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</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> / file revision</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/changelog">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 class="current">file</li> <li><a href="/drafts/log/929747cc36de/css-values-5/Overview.bs">revisions</a></li> <li><a href="/drafts/annotate/929747cc36de/css-values-5/Overview.bs">annotate</a></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-file/929747cc36de/css-values-5/Overview.bs">raw</a></li> </ul> <h2 class="no-link no-border">css-values-5/Overview.bs@929747cc36de</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 class="list" href="/drafts/rev/929747cc36de">929747cc36de</a></dd> <dt>parent 31802</dt> <dd> <a href="/drafts/file/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> <div class="source"> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1" id="l1"> 1</a> <pre class='metadata'> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2" id="l2"> 2</a> Title: CSS Values and Units Module Level 5 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3" id="l3"> 3</a> Group: CSSWG </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l4" id="l4"> 4</a> Shortname: css-values </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l5" id="l5"> 5</a> Level: 5 </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l6" id="l6"> 6</a> Status: WD </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l7" id="l7"> 7</a> Work Status: Exploring </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l8" id="l8"> 8</a> ED: https://drafts.csswg.org/css-values-5/ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l9" id="l9"> 9</a> TR: https://www.w3.org/TR/css-values-5/ </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l10" id="l10"> 10</a> Editor: Tab Atkins, Google, http://xanthir.com/contact/, w3cid 42199 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l11" id="l11"> 11</a> Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400 </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l12" id="l12"> 12</a> Editor: Miriam E. Suzanne, Invited Expert, http://miriamsuzanne.com/contact, w3cid 117151 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l13" id="l13"> 13</a> 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. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l14" id="l14"> 14</a> Ignored Terms: <spacing-limit>, containing block, property, <wq-name> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l15" id="l15"> 15</a> Ignored Vars: Cn+1, n </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l16" id="l16"> 16</a> Inline Github Issues: no </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l17" id="l17"> 17</a> Default Highlight: css </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l18" id="l18"> 18</a> Status Text: <strong>This spec is in the early exploration phase. Feedback is welcome, and and major breaking changes are expected.</strong> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l19" id="l19"> 19</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l20" id="l20"> 20</a> <pre class='link-defaults'> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l21" id="l21"> 21</a> spec:css-color-4; type:property; text:color </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l22" id="l22"> 22</a> spec:css-values-4; type: dfn; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l23" id="l23"> 23</a> text: determine the type of a calculation </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l24" id="l24"> 24</a> text: keyword </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l25" id="l25"> 25</a> text: identifier </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l26" id="l26"> 26</a> spec:selectors-4; type: dfn; text: selector </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l27" id="l27"> 27</a> spec:css-conditional-5; type:type; text:<size-feature> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l28" id="l28"> 28</a> spec:css-conditional-5; type:dfn; text:container feature </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l29" id="l29"> 29</a> spec:css-conditional-5; type:type; text:<container-name> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l30" id="l30"> 30</a> spec:css-conditional-5; type:at-rule; text:@container </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l31" id="l31"> 31</a> spec:css-conditional-5; type:type; text:<style-query> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l32" id="l32"> 32</a> spec:css-conditional-5; type:type; text:<style-query> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l33" id="l33"> 33</a> spec:css-mixins-1; type:dfn; text:custom function </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l34" id="l34"> 34</a> spec:css-properties-values-api; type:dfn; text: supported syntax component names </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l35" id="l35"> 35</a> spec:html; type:element; text:link </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l36" id="l36"> 36</a> spec:infra; type:dfn; text:list </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l37" id="l37"> 37</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l38" id="l38"> 38</a> <style> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l39" id="l39"> 39</a> code, small { white-space: nowrap } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l40" id="l40"> 40</a> pre.value { font: inherit; white-space: pre-wrap; margin: 0; padding: 0; } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l41" id="l41"> 41</a> #propvalues td { text-align: right; } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l42" id="l42"> 42</a> #propvalues td + td { text-align: left; } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l43" id="l43"> 43</a> dt + dt::before { content: ", "; } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l44" id="l44"> 44</a> dl:not(.switch) dt { display: inline; } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l45" id="l45"> 45</a> td > small { display: block; } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l46" id="l46"> 46</a> </style> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l47" id="l47"> 47</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l48" id="l48"> 48</a> <h2 id="intro"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l49" id="l49"> 49</a> Introduction</h2> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l50" id="l50"> 50</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l51" id="l51"> 51</a> 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> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l52" id="l52"> 52</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l53" id="l53"> 53</a> <h3 id="placement"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l54" id="l54"> 54</a> Module Interactions</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l55" id="l55"> 55</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l56" id="l56"> 56</a> This module extends [[CSS-VALUES-4]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l57" id="l57"> 57</a> which replaces and extends the data type definitions in [[!CSS21]] sections </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l58" id="l58"> 58</a> <a href="https://www.w3.org/TR/CSS21/about.html#value-defs">1.4.2.1</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l59" id="l59"> 59</a> <a href="https://www.w3.org/TR/CSS21/syndata.html#values">4.3</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l60" id="l60"> 60</a> and <a href="https://www.w3.org/TR/CSS21/aural.html#aural-intro">A.2</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l61" id="l61"> 61</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l62" id="l62"> 62</a> <h2 id="textual-values"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l63" id="l63"> 63</a> Textual Data Types</h2> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l64" id="l64"> 64</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l65" id="l65"> 65</a> See [[css-values-4#textual-values]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l66" id="l66"> 66</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l67" id="l67"> 67</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l68" id="l68"> 68</a>  </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l78" id="l78"> 78</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l79" id="l79"> 79</a> <h2 id=value-defs> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l80" id="l80"> 80</a> Value Definition Syntax</h2> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l81" id="l81"> 81</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l82" id="l82"> 82</a> See [[css-values-4#value-defs]]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l83" id="l83"> 83</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l84" id="l84"> 84</a> Additionally, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l85" id="l85"> 85</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l86" id="l86"> 86</a> <ol> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l87" id="l87"> 87</a> <li value=5>Boolean combinations of a conditional notation. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l88" id="l88"> 88</a> These are written using the <<boolean-expr[]>> notation, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l89" id="l89"> 89</a> and represent recursive expressions of boolean logic </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l90" id="l90"> 90</a> using keywords and parentheses, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l91" id="l91"> 91</a> applied to the grammar specified in brackets, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l92" id="l92"> 92</a> e.g. <<boolean-expr[ ( &lt;media-feature&gt; ) ]>> to express [=media queries=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l93" id="l93"> 93</a> </ol> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l94" id="l94"> 94</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l95" id="l95"> 95</a> <h3 id=component-functions> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l96" id="l96"> 96</a> Functional Notation Definitions</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l97" id="l97"> 97</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l98" id="l98"> 98</a> See [[css-values-4#component-functions]]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l99" id="l99"> 99</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l100" id="l100"> 100</a> <h4 id=component-function-commas> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l101" id="l101"> 101</a> Commas in Function Arguments</h4> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l102" id="l102"> 102</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l103" id="l103"> 103</a> [=Functional notation=] often uses commas </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l104" id="l104"> 104</a> to separate parts of its internal grammar. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l105" id="l105"> 105</a> However, some functions </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l106" id="l106"> 106</a> (such as ''mix()'') </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l107" id="l107"> 107</a> allow values that, themselves, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l108" id="l108"> 108</a> can contain commas. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l109" id="l109"> 109</a> These values </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l110" id="l110"> 110</a> (currently <<whole-value>>, <<declaration-value>>, and <<any-value>>) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l111" id="l111"> 111</a> are <dfn export>comma-containing productions</dfn>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l112" id="l112"> 112</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l113" id="l113"> 113</a> To accommodate these sorts of grammars unambiguously, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l114" id="l114"> 114</a> the [=comma-containing productions=] can be optionally wrapped in curly braces {}. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l115" id="l115"> 115</a> These braces are syntactic, not part of the actual value. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l116" id="l116"> 116</a> Specifically: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l117" id="l117"> 117</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l118" id="l118"> 118</a> * A [=comma-containing production=] can either start with a "{" token, or not. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l119" id="l119"> 119</a> * If it does not start with a "{" token, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l120" id="l120"> 120</a> then it cannot contain commas or {} blocks, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l121" id="l121"> 121</a> in addition to whatever specific restrictions it defines for itself. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l122" id="l122"> 122</a> (The production stops parsing at that point, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l123" id="l123"> 123</a> so the comma or {} block is matched by the next grammar term instead; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l124" id="l124"> 124</a> probably the function's own argument-separating comma.) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l125" id="l125"> 125</a> * If it does start with a "{" token, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l126" id="l126"> 126</a> then the production matches just the {} block that the "{" token opens. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l127" id="l127"> 127</a> It represents the <em>contents</em> of that block, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l128" id="l128"> 128</a> and applies whatever specific restrictions it defines for itself </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l129" id="l129"> 129</a> to those contents, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l130" id="l130"> 130</a> ignoring the {} block wrapper. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l131" id="l131"> 131</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l132" id="l132"> 132</a> <div class="example"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l133" id="l133"> 133</a> For example, the grammar of the ''random-item()'' function is: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l134" id="l134"> 134</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l135" id="l135"> 135</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l136" id="l136"> 136</a> random-item( <<random-caching-options>>, [<<declaration-value>>?]# ) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l137" id="l137"> 137</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l138" id="l138"> 138</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l139" id="l139"> 139</a> The ''#'' indicates comma-separated repetitions, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l140" id="l140"> 140</a> so randomly choosing between three keywords </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l141" id="l141"> 141</a> would be written as normal for functions, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l142" id="l142"> 142</a> like: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l143" id="l143"> 143</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l144" id="l144"> 144</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l145" id="l145"> 145</a> font-family: random-item(--x, serif, sans-serif, monospace); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l146" id="l146"> 146</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l147" id="l147"> 147</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l148" id="l148"> 148</a> However, sometimes the values you want to choose between </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l149" id="l149"> 149</a> need to include commas. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l150" id="l150"> 150</a> When this is the case, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l151" id="l151"> 151</a> wrapping the values in {} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l152" id="l152"> 152</a> allows their commas to be distinguished </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l153" id="l153"> 153</a> from the function's argument-separating commas: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l154" id="l154"> 154</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l155" id="l155"> 155</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l156" id="l156"> 156</a> font-family: random-item(--x, {Times, serif}, {Arial, sans-serif}, {Courier, monospace}); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l157" id="l157"> 157</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l158" id="l158"> 158</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l159" id="l159"> 159</a> This randomly chooses one of three font-family lists: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l160" id="l160"> 160</a> either ''Times, serif'', or ''Arial, sans-serif'', or ''Courier, monospace''. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l161" id="l161"> 161</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l162" id="l162"> 162</a> This is not all-or-nothing; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l163" id="l163"> 163</a> you can use {} around <em>some</em> arguments that need it, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l164" id="l164"> 164</a> while leaving others bare when they don't need it. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l165" id="l165"> 165</a> You are also allowed to use {} around a value when it's not strictly required. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l166" id="l166"> 166</a> For example: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l167" id="l167"> 167</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l168" id="l168"> 168</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l169" id="l169"> 169</a> font-family: random-item(--x, {Times, serif}, sans-serif, {monospace}); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l170" id="l170"> 170</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l171" id="l171"> 171</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l172" id="l172"> 172</a> This represents choosing between three font-family lists: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l173" id="l173"> 173</a> either ''Times, serif'', or ''sans-serif'', or ''monospace''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l174" id="l174"> 174</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l175" id="l175"> 175</a> However, this {}-wrapping is <em>only</em> allowed for some function arguments-- </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l176" id="l176"> 176</a> those defined as [=comma-containing productions=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l177" id="l177"> 177</a> It's not valid for any other productions; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l178" id="l178"> 178</a> if you use {} around other function arguments, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l179" id="l179"> 179</a> it'll just fail to match the function's grammar </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l180" id="l180"> 180</a> and become invalid. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l181" id="l181"> 181</a> For example, the following is <strong>invalid</strong>: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l182" id="l182"> 182</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l183" id="l183"> 183</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l184" id="l184"> 184</a> background-image: linear-gradient(to left, {red}, magenta); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l185" id="l185"> 185</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l186" id="l186"> 186</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l187" id="l187"> 187</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l188" id="l188"> 188</a> Note: Because {} wrappers are allowed even when not explicitly required, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l189" id="l189"> 189</a> they can be used defensively around values </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l190" id="l190"> 190</a> when the author isn't sure if they'll end up containing commas or not, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l191" id="l191"> 191</a> due to [=arbitrary substitution functions=] like ''var()''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l192" id="l192"> 192</a> For example, <l property>''font-family: random-item(--x, {var(--list1)}, monospace)''</l> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l193" id="l193"> 193</a> will work correctly </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l194" id="l194"> 194</a> regardless of whether the ''--list1'' custom property </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l195" id="l195"> 195</a> contains a comma-separated list or not. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l196" id="l196"> 196</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l197" id="l197"> 197</a> [=Functional notations=] are serialized without {} wrappers whenever possible. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l198" id="l198"> 198</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l199" id="l199"> 199</a> The following generic productions are [=comma-containing productions=]: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l200" id="l200"> 200</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l201" id="l201"> 201</a> * <<any-value>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l202" id="l202"> 202</a> * <<whole-value>> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l203" id="l203"> 203</a> * <<declaration-value>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l204" id="l204"> 204</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l205" id="l205"> 205</a> For legacy compat reasons, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l206" id="l206"> 206</a> the <<declaration-value>> defined the fallback value for ''var()'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l207" id="l207"> 207</a> is a <dfn export>non-strict comma-containing production</dfn>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l208" id="l208"> 208</a> It ignores the rules restricting what it can contain </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l209" id="l209"> 209</a> when it does not start with a "{" token: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l210" id="l210"> 210</a> it is allowed to contain commas and {} blocks. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l211" id="l211"> 211</a> It still follows the standard [=comma-containing production=] rules </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l212" id="l212"> 212</a> when it <em>does</em> start with a "{" token, however: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l213" id="l213"> 213</a> the fallback is just the contents of the {} block, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l214" id="l214"> 214</a> and doesn't include the {} wrapper itself. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l215" id="l215"> 215</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l216" id="l216"> 216</a> Other contexts <em>may</em> define that they use [=non-strict comma-containing productions=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l217" id="l217"> 217</a> but it <em>should</em> be avoided unless necessary. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l218" id="l218"> 218</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l219" id="l219"> 219</a> <h3 id=boolean> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l220" id="l220"> 220</a> Boolean Expression Multiplier <<boolean-expr[]>></h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l221" id="l221"> 221</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l222" id="l222"> 222</a> Several contexts </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l223" id="l223"> 223</a> (such as ''@media'', ''@supports'', ''if()'', ...) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l224" id="l224"> 224</a> specify conditions, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l225" id="l225"> 225</a> and allow combining those conditions with boolean logic (and/or/not/grouping). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l226" id="l226"> 226</a> Because they use the same non-trivial recursive syntax structure, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l227" id="l227"> 227</a> the special <dfn type><<boolean-expr[]>></dfn> production represents this pattern generically. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l228" id="l228"> 228</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l229" id="l229"> 229</a> The <<boolean-expr[]>> notation wraps another value type in the square brackets within it, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l230" id="l230"> 230</a> e.g. &lt;boolean[ &lt;test&gt; ]&gt;, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l231" id="l231"> 231</a> and represents that value type alone as well as </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l232" id="l232"> 232</a> boolean combinations </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l233" id="l233"> 233</a> using the ''not'', ''and'', and ''or'' keywords </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l234" id="l234"> 234</a> and grouping parenthesis. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l235" id="l235"> 235</a> It is formally equivalent to: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l236" id="l236"> 236</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l237" id="l237"> 237</a> <xmp class=prod> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l238" id="l238"> 238</a> <boolean-expr[ <test> ]> = not <boolean-expr-group> | <boolean-expr-group> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l239" id="l239"> 239</a> [ [ and <boolean-expr-group> ]* </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l240" id="l240"> 240</a> | [ or <boolean-expr-group> ]* ] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l241" id="l241"> 241</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l242" id="l242"> 242</a> <boolean-expr-group> = <test> | ( <boolean-expr[ <test> ]> ) | <general-enclosed> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l243" id="l243"> 243</a> </xmp> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l244" id="l244"> 244</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l245" id="l245"> 245</a> The <<boolean-expr[]>> production represents a true, false, or unknown value. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l246" id="l246"> 246</a> Its value is resolved using 3-value Kleene logic, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l247" id="l247"> 247</a> with top-level unknown values </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l248" id="l248"> 248</a> (those not directly nested inside the grammar of another <<boolean-expr[]>>) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l249" id="l249"> 249</a> resolving to false unless otherwise specified; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l250" id="l250"> 250</a> see [[#boolean-logic]] for details. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l251" id="l251"> 251</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l252" id="l252"> 252</a> <div class=example> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l253" id="l253"> 253</a> For example, the ''@container'' rule allows a wide variety of tests: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l254" id="l254"> 254</a> including size queries, style queries, and scroll-state queries. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l255" id="l255"> 255</a> All of these are arbitrarily combinable with boolean logic. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l256" id="l256"> 256</a> Using <<boolean-expr[]>>, the grammar for an ''@container'' query </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l257" id="l257"> 257</a> could be written as: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l258" id="l258"> 258</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l259" id="l259"> 259</a> <xmp class=prod> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l260" id="l260"> 260</a> <container-query> = <boolean-expr[ <cq-test> ]> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l261" id="l261"> 261</a> <cq-test> = (<size-query>) | style( <style-query> ) | scroll-state( <scroll-state-query> ) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l262" id="l262"> 262</a> <size-query> = <boolean-expr[ ( <size-feature> ) ]> | <size-feature> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l263" id="l263"> 263</a> <style-query> = <boolean-expr[ ( <style-feature> ) ]> | <style-feature> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l264" id="l264"> 264</a> <scroll-state-query> = <boolean-expr[ ( <scroll-state-feature> ) ]> | <scroll-state-feature> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l265" id="l265"> 265</a> </xmp> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l266" id="l266"> 266</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l267" id="l267"> 267</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l268" id="l268"> 268</a> The <<general-enclosed>> branch of the logic allows for future compatibility-- </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l269" id="l269"> 269</a> unless otherwise specified new expressions in an older UA </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l270" id="l270"> 270</a> will be parsed and considered “unknown”, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l271" id="l271"> 271</a> rather than invalidating the production. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l272" id="l272"> 272</a> For consistency with that allowance, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l273" id="l273"> 273</a> the <css>&lt;test></css> term in a <<boolean-expr[]>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l274" id="l274"> 274</a> should be defined to match <<general-enclosed>>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l275" id="l275"> 275</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l276" id="l276"> 276</a> <h3 id=css-syntax> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l277" id="l277"> 277</a> Specifying CSS Syntax in CSS: the <<syntax>> type</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l278" id="l278"> 278</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l279" id="l279"> 279</a> Some features in CSS, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l280" id="l280"> 280</a> such as the ''attr()'' function </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l281" id="l281"> 281</a> or [=registered custom properties=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l282" id="l282"> 282</a> allow you to specify how <em>another</em> value is meant to be parsed. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l283" id="l283"> 283</a> This is declared via the <<syntax>> production, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l284" id="l284"> 284</a> which resembles a limited form of the CSS [=value definition syntax=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l285" id="l285"> 285</a> used in specifications to define CSS features, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l286" id="l286"> 286</a> and which represents a [=syntax definition=]: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l287" id="l287"> 287</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l288" id="l288"> 288</a> <pre class="prod def" nohighlight> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l289" id="l289"> 289</a> <dfn><<syntax>></dfn> = '*' | <<syntax-component>> [ <<syntax-combinator>> <<syntax-component>> ]* | <<syntax-string>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l290" id="l290"> 290</a> <dfn><<syntax-component>></dfn> = <<syntax-single-component>> <<syntax-multiplier>>? </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l291" id="l291"> 291</a> | '<' transform-list '>' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l292" id="l292"> 292</a> <dfn><<syntax-single-component>></dfn> = '<' <<syntax-type-name>> '>' | <<ident>> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l293" id="l293"> 293</a> <dfn><<syntax-type-name>></dfn> = angle | color | custom-ident | image | integer </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l294" id="l294"> 294</a> | length | length-percentage | number </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l295" id="l295"> 295</a> | percentage | resolution | string | time </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l296" id="l296"> 296</a> | url | transform-function </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l297" id="l297"> 297</a> <dfn><<syntax-combinator>></dfn> = '|' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l298" id="l298"> 298</a> <dfn><<syntax-multiplier>></dfn> = [ '#' | '+' ] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l299" id="l299"> 299</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l300" id="l300"> 300</a> <dfn><<syntax-string>></dfn> = <<string>> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l301" id="l301"> 301</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l302" id="l302"> 302</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l303" id="l303"> 303</a> A <<syntax-component>> consists of either </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l304" id="l304"> 304</a> a <<syntax-type-name>> between &lt;&gt; (angle brackets), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l305" id="l305"> 305</a> which maps to one of the [=supported syntax component names=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l306" id="l306"> 306</a> or an <<ident>>, which represents any [=keyword=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l307" id="l307"> 307</a> Additionally, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l308" id="l308"> 308</a> a <<syntax-component>> may contain a [[css-properties-values-api-1#multipliers|multiplier]], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l309" id="l309"> 309</a> which indicates a [=list=] of values. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l310" id="l310"> 310</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l311" id="l311"> 311</a> Note: This means that <code>&lt;length&gt;</code> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l312" id="l312"> 312</a> and <code>length</code> are two different types: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l313" id="l313"> 313</a> the former describes a <<length>>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l314" id="l314"> 314</a> whereas the latter describes a [=keyword=] <code>length</code>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l315" id="l315"> 315</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l316" id="l316"> 316</a> Multiple <<syntax-component>>s may be [[css-properties-values-api-1#combinator|combined]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l317" id="l317"> 317</a> with a <code>|</code> <<delim-token>>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l318" id="l318"> 318</a> causing the syntax components to be matched </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l319" id="l319"> 319</a> against a value </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l320" id="l320"> 320</a> in the specified order. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l321" id="l321"> 321</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l322" id="l322"> 322</a> <div class='example'> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l323" id="l323"> 323</a> <xmp class='lang-css'> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l324" id="l324"> 324</a> <percentage> | <number> | auto </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l325" id="l325"> 325</a> </xmp> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l326" id="l326"> 326</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l327" id="l327"> 327</a> The above, when parsed as a <<syntax>>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l328" id="l328"> 328</a> would accept <<percentage>> values, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l329" id="l329"> 329</a> <<number>> values, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l330" id="l330"> 330</a> as well as the keyword <code>auto</code>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l331" id="l331"> 331</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l332" id="l332"> 332</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l333" id="l333"> 333</a> <div class='example'> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l334" id="l334"> 334</a> <xmp class='lang-css'> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l335" id="l335"> 335</a> red | <color> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l336" id="l336"> 336</a> </xmp> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l337" id="l337"> 337</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l338" id="l338"> 338</a> The [=syntax definition=] resulting from the above <<syntax>>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l339" id="l339"> 339</a> when used as a grammar for [=parse|parsing=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l340" id="l340"> 340</a> would match an input <code>red</code> as an [=identifier=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l341" id="l341"> 341</a> but would match an input <code>blue</code> as a <<color>>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l342" id="l342"> 342</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l343" id="l343"> 343</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l344" id="l344"> 344</a> The <code>*</code> <<delim-token>> represents the [=universal syntax definition=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l345" id="l345"> 345</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l346" id="l346"> 346</a> The <code>&lt;transform-list&gt;</code> production </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l347" id="l347"> 347</a> is a convenience form equivalent to <code>&lt;transform-function&gt;+</code>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l348" id="l348"> 348</a> <span class=note>Note that <code>&lt;transform-list&gt;</code> may not </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l349" id="l349"> 349</a> be followed by a <<syntax-multiplier>>.</span> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l350" id="l350"> 350</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l351" id="l351"> 351</a> [=Whitespace=] is not allowed </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l352" id="l352"> 352</a> between the angle bracket <<delim-token>>s (<code>&lt;</code> <code>&gt;</code>) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l353" id="l353"> 353</a> and the <<syntax-type-name>> they enclose, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l354" id="l354"> 354</a> nor is [=whitespace=] allowed to precede a <<syntax-multiplier>>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l355" id="l355"> 355</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l356" id="l356"> 356</a> Note: The [=whitespace=] restrictions also apply to <code>&lt;transform-list&gt;</code>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l357" id="l357"> 357</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l358" id="l358"> 358</a> A <<syntax-string>> is a <<string>> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l359" id="l359"> 359</a> whose value successfully [=CSS/parses=] as a <<syntax>>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l360" id="l360"> 360</a> and represents the same value as that <<syntax>> would. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l361" id="l361"> 361</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l362" id="l362"> 362</a> Note: <<syntax-string>> mostly exists for historical purposes; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l363" id="l363"> 363</a> before <<syntax>> was defined, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l364" id="l364"> 364</a> the ''@property'' rule used a <<string>> for this purpose. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l365" id="l365"> 365</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l366" id="l366"> 366</a> <h4 id=parse-syntax> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l367" id="l367"> 367</a> Parsing as <<syntax>></h4> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l368" id="l368"> 368</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l369" id="l369"> 369</a> The purpose of a <<syntax>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l370" id="l370"> 370</a> is usually to specify how to parse another value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l371" id="l371"> 371</a> (such as the value of a [=registered custom property=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l372" id="l372"> 372</a> or an attribute value in ''attr()''). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l373" id="l373"> 373</a> However, the generic [=CSS/parse something according to a CSS grammar=] algorithm </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l374" id="l374"> 374</a> returns an unspecified internal structure, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l375" id="l375"> 375</a> since parse results might be ambiguous </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l376" id="l376"> 376</a> and need further massaging. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l377" id="l377"> 377</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l378" id="l378"> 378</a> To avoid these issues and get a well-defined result, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l379" id="l379"> 379</a> use [=parse with a &lt;syntax>=]: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l380" id="l380"> 380</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l381" id="l381"> 381</a> <div algorithm> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l382" id="l382"> 382</a> To <dfn export>parse with a <<syntax>></dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l383" id="l383"> 383</a> given a [=string=] or [=list=] or [=CSS/component values=] |values|, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l384" id="l384"> 384</a> a <<syntax>> value |syntax|, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l385" id="l385"> 385</a> and optionally an element |el| for context, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l386" id="l386"> 386</a> perform the following steps. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l387" id="l387"> 387</a> It returns either CSS values, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l388" id="l388"> 388</a> or the [=guaranteed-invalid value=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l389" id="l389"> 389</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l390" id="l390"> 390</a> 1. [=Parse a list of component values=] from |values|, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l391" id="l391"> 391</a> and let |raw parse| be the result. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l392" id="l392"> 392</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l393" id="l393"> 393</a> 2. If |el| was given, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l394" id="l394"> 394</a> [=substitute arbitrary substitution functions=] in |raw parse|, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l395" id="l395"> 395</a> and set |raw parse| to that result. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l396" id="l396"> 396</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l397" id="l397"> 397</a> 3. [=CSS/parse=] |values| according to |syntax|, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l398" id="l398"> 398</a> with a ''*'' value treated as <code><<declaration-value>>?</code>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l399" id="l399"> 399</a> and let |parsed result| be the result. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l400" id="l400"> 400</a> If |syntax| used a ''|'' combinator, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l401" id="l401"> 401</a> let |parsed result| be the parse result from the first matching clause. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l402" id="l402"> 402</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l403" id="l403"> 403</a> 4. If |parsed result| is failure, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l404" id="l404"> 404</a> return the [=guaranteed-invalid value=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l405" id="l405"> 405</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l406" id="l406"> 406</a> 5. Assert: |parsed result| is now a well-defined list of one or more CSS values, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l407" id="l407"> 407</a> since each branch of a <<syntax>> defines an unambiguous parse result </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l408" id="l408"> 408</a> (or the ''*'' syntax is unambiguous on its own). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l409" id="l409"> 409</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l410" id="l410"> 410</a> 6. Return |parsed result|. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l411" id="l411"> 411</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l412" id="l412"> 412</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l413" id="l413"> 413</a> Note: This algorithm does not resolved the parsed values </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l414" id="l414"> 414</a> into [=computed values=]; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l415" id="l415"> 415</a> the context in which the value is used will usually do that already, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l416" id="l416"> 416</a> but if not, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l417" id="l417"> 417</a> the invoking algorithm will need to handle that on its own. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l418" id="l418"> 418</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l419" id="l419"> 419</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l420" id="l420"> 420</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l421" id="l421"> 421</a> <h2 id="level-4-extensions"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l422" id="l422"> 422</a> Extensions to Level 4 Value Types</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l423" id="l423"> 423</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l424" id="l424"> 424</a> See <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Level 4</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l425" id="l425"> 425</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l426" id="l426"> 426</a>  </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l436" id="l436"> 436</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l437" id="l437"> 437</a> <h3 id="urls"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l438" id="l438"> 438</a> Resource Locators: the <<url>> type</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l439" id="l439"> 439</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l440" id="l440"> 440</a> See [[css-values-4#urls]]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l441" id="l441"> 441</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l442" id="l442"> 442</a> <h4 id='request-url-modifiers'> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l443" id="l443"> 443</a> Request URL Modifiers</h4> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l444" id="l444"> 444</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l445" id="l445"> 445</a> <dfn><<request-url-modifier>></dfn>s are <<url-modifier>>s </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l446" id="l446"> 446</a> that affect the <<url>>’s resource [=/request=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l447" id="l447"> 447</a> by applying associated [=URL request modifier steps=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l448" id="l448"> 448</a> See [[css-values-4#url-processing]]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l449" id="l449"> 449</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l450" id="l450"> 450</a> This specification defines the following <<request-url-modifier>>s: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l451" id="l451"> 451</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l452" id="l452"> 452</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l453" id="l453"> 453</a> <<request-url-modifier>> = <<crossorigin-modifier>> | <<integrity-modifier>> | <<referrerpolicy-modifier>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l454" id="l454"> 454</a> <<crossorigin-modifier>> = crossorigin(anonymous | use-credentials) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l455" id="l455"> 455</a> <<integrity-modifier>> = integrity(<<string>>) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l456" id="l456"> 456</a> <<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) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l457" id="l457"> 457</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l458" id="l458"> 458</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l459" id="l459"> 459</a> <dl dfn-for="<request-url-modifier>"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l460" id="l460"> 460</a> <dt><dfn><<crossorigin-modifier>></dfn> = <dfn function lt="crossorigin()">crossorigin</dfn>(<dfn value>anonymous</dfn> | <dfn value>use-credentials</dfn>) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l461" id="l461"> 461</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l462" id="l462"> 462</a> The [=URL request modifier steps=] for this modifier given [=/request=] |req| are: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l463" id="l463"> 463</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l464" id="l464"> 464</a> 1. Set [=/request=]'s [=request/mode=] to "cors". </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l465" id="l465"> 465</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l466" id="l466"> 466</a> 2. If the given value is ''use-credentials'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l467" id="l467"> 467</a> set [=/request=]'s [=request/credentials mode=] to "include". </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l468" id="l468"> 468</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l469" id="l469"> 469</a> <dt><dfn><<integrity-modifier>></dfn> = <dfn function lt="integrity()">integrity</dfn>(<<string>>) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l470" id="l470"> 470</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l471" id="l471"> 471</a> The [=URL request modifier steps=] for this modifier given [=/request=] |req| </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l472" id="l472"> 472</a> are to set [=/request=]'s [=request/integrity metadata=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l473" id="l473"> 473</a> to the given <<string>>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l474" id="l474"> 474</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l475" id="l475"> 475</a> <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>) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l476" id="l476"> 476</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l477" id="l477"> 477</a> The [=URL request modifier steps=] for this modifier given [=/request=] |req| </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l478" id="l478"> 478</a> are to set [=/request=]'s [=request/referrer policy=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l479" id="l479"> 479</a> to the {{ReferrerPolicy}} that matches the given value. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l480" id="l480"> 480</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l481" id="l481"> 481</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l482" id="l482"> 482</a> <div algorithm> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l483" id="l483"> 483</a> To <dfn export>apply request modifiers from URL value</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l484" id="l484"> 484</a> given a [=/request=] |req| </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l485" id="l485"> 485</a> and a <<url>> |url|, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l486" id="l486"> 486</a> call the [=URL request modifier steps=] for |url|'s <<request-url-modifier>>s in sequence </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l487" id="l487"> 487</a> given |req|. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l488" id="l488"> 488</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l489" id="l489"> 489</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l490" id="l490"> 490</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l491" id="l491"> 491</a>  </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l501" id="l501"> 501</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l502" id="l502"> 502</a> <h3 id="position"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l503" id="l503"> 503</a> 2D Positioning: the <<position>> type</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l504" id="l504"> 504</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l505" id="l505"> 505</a> The <dfn><<position>></dfn> value specifies the position </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l506" id="l506"> 506</a> of an [=alignment subject=] (e.g. a background image) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l507" id="l507"> 507</a> inside an [=alignment container=] (e.g. its [=background positioning area=]) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l508" id="l508"> 508</a> as a pair of offsets between the specified edges </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l509" id="l509"> 509</a> (defaulting to the left and top). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l510" id="l510"> 510</a> Its syntax is: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l511" id="l511"> 511</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l512" id="l512"> 512</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l513" id="l513"> 513</a> <<position>> = <<position-one>> | <<position-two>> | <<position-four>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l514" id="l514"> 514</a> <dfn><<position-one>></dfn> = [ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l515" id="l515"> 515</a> left | center | right | top | bottom | </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l516" id="l516"> 516</a> x-start | x-end | y-start | y-end | </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l517" id="l517"> 517</a> block-start | block-end | inline-start | inline-end | </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l518" id="l518"> 518</a> <<length-percentage>> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l519" id="l519"> 519</a> ] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l520" id="l520"> 520</a> <dfn><<position-two>></dfn> = [ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l521" id="l521"> 521</a> [ left | center | right | x-start | x-end ] && </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l522" id="l522"> 522</a> [ top | center | bottom | y-start | y-end ] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l523" id="l523"> 523</a> | </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l524" id="l524"> 524</a> [ left | center | right | x-start | x-end | <<length-percentage>> ] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l525" id="l525"> 525</a> [ top | center | bottom | y-start | y-end | <<length-percentage>> ] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l526" id="l526"> 526</a> | </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l527" id="l527"> 527</a> [ block-start | center | block-end ] && </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l528" id="l528"> 528</a> [ inline-start | center | inline-end ] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l529" id="l529"> 529</a> | </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l530" id="l530"> 530</a> [ start | center | end ]{2} </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l531" id="l531"> 531</a> ] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l532" id="l532"> 532</a> <dfn><<position-four>></dfn> = [ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l533" id="l533"> 533</a> [ [ left | right | x-start | x-end ] <<length-percentage>> ] && </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l534" id="l534"> 534</a> [ [ top | bottom | y-start | y-end ] <<length-percentage>> ] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l535" id="l535"> 535</a> | </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l536" id="l536"> 536</a> [ [ block-start | block-end ] <<length-percentage>> ] && </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l537" id="l537"> 537</a> [ [ inline-start | inline-end ] <<length-percentage>> ] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l538" id="l538"> 538</a> | </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l539" id="l539"> 539</a> [ [ start | end ] <<length-percentage>> ]{2} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l540" id="l540"> 540</a> ] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l541" id="l541"> 541</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l542" id="l542"> 542</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l543" id="l543"> 543</a> If only one value is specified (<<position-one>>), </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l544" id="l544"> 544</a> the second value is assumed to be ''center''. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l545" id="l545"> 545</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l546" id="l546"> 546</a> If two values are given (<<position-two>>), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l547" id="l547"> 547</a> a <<length-percentage>> as the first value represents </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l548" id="l548"> 548</a> the horizontal position as the offset between </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l549" id="l549"> 549</a> the left edges of the [=alignment subject=] and [=alignment container=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l550" id="l550"> 550</a> and a <<length-percentage>> as the second value represents </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l551" id="l551"> 551</a> the vertical position as an offset between their top edges. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l552" id="l552"> 552</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l553" id="l553"> 553</a> If both keywords are one of ''<position>/start'' or ''<position>/end'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l554" id="l554"> 554</a> the first one represents the [=block axis=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l555" id="l555"> 555</a> and the second the [=inline axis=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l556" id="l556"> 556</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l557" id="l557"> 557</a> Note: A pair of axis-specific keywords can be reordered, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l558" id="l558"> 558</a> while a combination of keyword and length or percentage cannot. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l559" id="l559"> 559</a> So ''center left'' or ''inline-start block-end'' is valid, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l560" id="l560"> 560</a> while ''50% left'' is not. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l561" id="l561"> 561</a> ''<position>/start'' and ''<position>/end'' aren't axis-specific, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l562" id="l562"> 562</a> so ''start end'' and ''end start'' represent two different positions. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l563" id="l563"> 563</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l564" id="l564"> 564</a> If four values are given (<<position-four>>) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l565" id="l565"> 565</a> then each <<length-percentage>> represents an offset between </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l566" id="l566"> 566</a> the edges specified by the preceding keyword. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l567" id="l567"> 567</a> For example, ''background-position: bottom 10px right 20px'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l568" id="l568"> 568</a> represents a ''10px'' vertical offset up from the bottom edge </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l569" id="l569"> 569</a> and a ''20px'' horizontal offset leftward from the right edge. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l570" id="l570"> 570</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l571" id="l571"> 571</a> Positive values represent an offset <em>inward</em> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l572" id="l572"> 572</a> from the edge of the [=alignment container=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l573" id="l573"> 573</a> Negative values represent an offset <em>outward</em> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l574" id="l574"> 574</a> from the edge of the [=alignment container=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l575" id="l575"> 575</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l576" id="l576"> 576</a> <div class="example"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l577" id="l577"> 577</a> The following declarations give the stated (horizontal, vertical) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l578" id="l578"> 578</a> offsets from the top left corner: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l579" id="l579"> 579</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l580" id="l580"> 580</a> background-position: left 10px top 15px; /* 10px, 15px */ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l581" id="l581"> 581</a> background-position: left top ; /* 0px, 0px */ </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l582" id="l582"> 582</a> background-position: 10px 15px; /* 10px, 15px */ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l583" id="l583"> 583</a> background-position: left 15px; /* 0px, 15px */ </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l584" id="l584"> 584</a> background-position: 10px top ; /* 10px, 0px */ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l585" id="l585"> 585</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l586" id="l586"> 586</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l587" id="l587"> 587</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l588" id="l588"> 588</a> <div class=example> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l589" id="l589"> 589</a> <<position>>s can also be relative to other corners than the top left. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l590" id="l590"> 590</a> For example, the following puts the background image </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l591" id="l591"> 591</a> 10px from the bottom and 3em from the right: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l592" id="l592"> 592</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l593" id="l593"> 593</a> <pre>background-position: right 3em bottom 10px</pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l594" id="l594"> 594</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l595" id="l595"> 595</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l596" id="l596"> 596</a> The [=computed value=] of a <<position>> is </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l597" id="l597"> 597</a> a pair of offsets (horizontal and vertical), </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l598" id="l598"> 598</a> each given as a computed <<length-percentage>> value, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l599" id="l599"> 599</a> representing the distance between the left edges and top edges (respectively) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l600" id="l600"> 600</a> of the [=alignment subject=] and [=alignment container=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l601" id="l601"> 601</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l602" id="l602"> 602</a> <dl dfn-for="<position>" dfn-type=value> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l603" id="l603"> 603</a> <dt><dfn><<length-percentage>></dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l604" id="l604"> 604</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l605" id="l605"> 605</a> A <<length-percentage>> value specifies the size of the offset </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l606" id="l606"> 606</a> between the specified edges of the [=alignment subject=] and [=alignment container=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l607" id="l607"> 607</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l608" id="l608"> 608</a> For example, for ''background-position: 2cm 1cm'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l609" id="l609"> 609</a> the top left corner of the background image is placed </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l610" id="l610"> 610</a> 2cm to the right and 1cm below </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l611" id="l611"> 611</a> the top left corner of the [=background positioning area=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l612" id="l612"> 612</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l613" id="l613"> 613</a> A <<percentage>> for the horizontal offset is relative to </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l614" id="l614"> 614</a> (<var ignore>width of [=alignment container=]</var> - <var ignore>width of [=alignment subject=]</var>). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l615" id="l615"> 615</a> A <<percentage>> for the vertical offset is relative to </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l616" id="l616"> 616</a> (<var ignore>height of [=alignment container=]</var> - <var ignore>height of [=alignment subject=]</var>). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l617" id="l617"> 617</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l618" id="l618"> 618</a> <div class=example> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l619" id="l619"> 619</a> For example, with a value pair of ''0% 0%'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l620" id="l620"> 620</a> the upper left corner of the [=alignment subject=] is aligned with </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l621" id="l621"> 621</a> the upper left corner of the [=alignment container=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l622" id="l622"> 622</a> A value pair of ''100% 100%'' places </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l623" id="l623"> 623</a> the lower right corner of the [=alignment subject=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l624" id="l624"> 624</a> in the lower right corner of the [=alignment container=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l625" id="l625"> 625</a> With a value pair of ''75% 50%'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l626" id="l626"> 626</a> the point 75% across and 50% down the [=alignment subject=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l627" id="l627"> 627</a> is to be placed at the point 75% across and 50% down the [=alignment container=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l628" id="l628"> 628</a> <figure> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l629" id="l629"> 629</a> <img src="images/bg-pos.png" </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l630" id="l630"> 630</a> alt="Diagram of image position within element" </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l631" id="l631"> 631</a> > </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l632" id="l632"> 632</a> <figcaption> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l633" id="l633"> 633</a> Diagram of the meaning of ''background-position: 75% 50%''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l634" id="l634"> 634</a> </figcaption> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l635" id="l635"> 635</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l636" id="l636"> 636</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l637" id="l637"> 637</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l638" id="l638"> 638</a> <dt><dfn>top</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l639" id="l639"> 639</a> <dt><dfn>right</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l640" id="l640"> 640</a> <dt><dfn>bottom</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l641" id="l641"> 641</a> <dt><dfn>left</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l642" id="l642"> 642</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l643" id="l643"> 643</a> Offsets the top/left/right/bottom edges (respectively) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l644" id="l644"> 644</a> of the [=alignment subject=] and [=alignment container=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l645" id="l645"> 645</a> by the specified amount (defaulting to ''0%'') </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l646" id="l646"> 646</a> in the corresponding axis. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l647" id="l647"> 647</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l648" id="l648"> 648</a> <dt><dfn>y-start</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l649" id="l649"> 649</a> <dt><dfn>y-end</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l650" id="l650"> 650</a> <dt><dfn>x-start</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l651" id="l651"> 651</a> <dt><dfn>x-end</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l652" id="l652"> 652</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l653" id="l653"> 653</a> Computes the same as the physical edge keyword </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l654" id="l654"> 654</a> corresponding to the [=start=]/[=end=] side </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l655" id="l655"> 655</a> in the [=y-axis|y/[=x-axis|x=] axis. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l656" id="l656"> 656</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l657" id="l657"> 657</a> <dt><dfn>block-start</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l658" id="l658"> 658</a> <dt><dfn>block-end</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l659" id="l659"> 659</a> <dt><dfn>inline-start</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l660" id="l660"> 660</a> <dt><dfn>inline-end</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l661" id="l661"> 661</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l662" id="l662"> 662</a> Computes the same as the physical edge keyword </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l663" id="l663"> 663</a> corresponding to the [=start=]/[=end=] side </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l664" id="l664"> 664</a> in the [=block axis|block=]/[=inline axis|inline=] axis. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l665" id="l665"> 665</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l666" id="l666"> 666</a> <dt><dfn>center</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l667" id="l667"> 667</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l668" id="l668"> 668</a> Computes to a ''50%'' offset in the corresponding axis. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l669" id="l669"> 669</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l670" id="l670"> 670</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l671" id="l671"> 671</a> Unless otherwise specified, the [=flow-relative=] keywords are resolved </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l672" id="l672"> 672</a> according to the [=writing mode=] of the element on which the value is specified. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l673" id="l673"> 673</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l674" id="l674"> 674</a> Note: The 'background-position' property also accepts a three-value syntax. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l675" id="l675"> 675</a> This has been disallowed generically because it creates parsing ambiguities </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l676" id="l676"> 676</a> when combined with other length or percentage components in a property value. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l677" id="l677"> 677</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l678" id="l678"> 678</a> ISSUE(9690): Need to define how this syntax would expand to the longhands of 'background-position' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l679" id="l679"> 679</a> if e.g. ''var()'' is used for some (or all) of the components. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l680" id="l680"> 680</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l681" id="l681"> 681</a> <h4 id="position-parsing"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l682" id="l682"> 682</a> Parsing <<position>></h4> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l683" id="l683"> 683</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l684" id="l684"> 684</a> When specified in a grammar alongside other keywords, <<length>>s, or <<percentage>>s, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l685" id="l685"> 685</a> <<position>> is <em>greedily</em> parsed; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l686" id="l686"> 686</a> it consumes as many components as possible. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l687" id="l687"> 687</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l688" id="l688"> 688</a> <div class=example> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l689" id="l689"> 689</a> For example, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l690" id="l690"> 690</a> 'transform-origin' defines a 3D position </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l691" id="l691"> 691</a> as (effectively) ''<<position>> <<length>>?''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l692" id="l692"> 692</a> A value such as ''left 50px'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l693" id="l693"> 693</a> will be parsed as a 2-value <<position>>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l694" id="l694"> 694</a> with an omitted z-component; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l695" id="l695"> 695</a> on the other hand, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l696" id="l696"> 696</a> a value such as ''top 50px'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l697" id="l697"> 697</a> will be parsed as a single-value <<position>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l698" id="l698"> 698</a> followed by a <<length>>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l699" id="l699"> 699</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l700" id="l700"> 700</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l701" id="l701"> 701</a> <h4 id="position-serialization"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l702" id="l702"> 702</a> Serializing <<position>></h4> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l703" id="l703"> 703</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l704" id="l704"> 704</a> When serializing the [=specified value=] of a <<position>>: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l705" id="l705"> 705</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l706" id="l706"> 706</a> <dl class=switch> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l707" id="l707"> 707</a> <dt>If only one component is specified: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l708" id="l708"> 708</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l709" id="l709"> 709</a> * The implied <a value spec="css-backgrounds-3">center</a> keyword is added, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l710" id="l710"> 710</a> and a 2-component value is serialized. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l711" id="l711"> 711</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l712" id="l712"> 712</a> <dt>If two components are specified: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l713" id="l713"> 713</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l714" id="l714"> 714</a> * Keywords are serialized as keywords. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l715" id="l715"> 715</a> * <<length-percentage>>s are serialized as <<length-percentage>>s. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l716" id="l716"> 716</a> * Components are serialized horizontal first, then vertical. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l717" id="l717"> 717</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l718" id="l718"> 718</a> <dt>If four components are specified: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l719" id="l719"> 719</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l720" id="l720"> 720</a> * Keywords and offsets are both serialized. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l721" id="l721"> 721</a> * Components are serialized horizontal first, then vertical; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l722" id="l722"> 722</a> alternatively [=block-axis=] first, then [=inline-axis=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l723" id="l723"> 723</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l724" id="l724"> 724</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l725" id="l725"> 725</a> Note: <<position>> values are never serialized as a single value, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l726" id="l726"> 726</a> even when a single value would produce the same behavior, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l727" id="l727"> 727</a> to avoid causing parsing ambiguities in some grammars </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l728" id="l728"> 728</a> where a <<position>> is placed next to a <<length>>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l729" id="l729"> 729</a> such as 'transform-origin'. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l730" id="l730"> 730</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l731" id="l731"> 731</a> The [=computed value=] of a <<position>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l732" id="l732"> 732</a> is serialized as a pair of <<length-percentage>>s </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l733" id="l733"> 733</a> representing offsets from the left and top edges, in that order. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l734" id="l734"> 734</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l735" id="l735"> 735</a> <h4 id="combine-positions"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l736" id="l736"> 736</a> Combination of <<position>></h4> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l737" id="l737"> 737</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l738" id="l738"> 738</a> <l spec=css-values-4>[=Interpolation=]</l> of <<position>> is defined as </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l739" id="l739"> 739</a> the independent interpolation of each component (x, y) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l740" id="l740"> 740</a> normalized as an offset from the top left corner </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l741" id="l741"> 741</a> as a <<length-percentage>>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l742" id="l742"> 742</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l743" id="l743"> 743</a> <l spec=css-values-4>[=value addition|Addition=]</l> of <<position>> is likewise defined as </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l744" id="l744"> 744</a> the independent <l spec=css-values-4>[=value addition|addition=]</l> each component (x, y) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l745" id="l745"> 745</a> normalized as an offset from the top left corner </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l746" id="l746"> 746</a> as a <<length-percentage>>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l747" id="l747"> 747</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l748" id="l748"> 748</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l749" id="l749"> 749</a>  </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l759" id="l759"> 759</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l760" id="l760"> 760</a> <h2 id="progress"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l761" id="l761"> 761</a> Interpolation Progress Functional Notations</h2> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l762" id="l762"> 762</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l763" id="l763"> 763</a> ISSUE(6245): This section is an exploratory draft, and not yet approved by the CSSWG. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l764" id="l764"> 764</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l765" id="l765"> 765</a> The ''progress()'', ''media-progress()'', and ''container-progress()'' [=functional notations=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l766" id="l766"> 766</a> represent the proportional distance </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l767" id="l767"> 767</a> of a given value (the <dfn noexport>progress value</dfn>) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l768" id="l768"> 768</a> from one value (the <dfn noexport>progress start value</dfn>) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l769" id="l769"> 769</a> to another value (the <dfn noexport>progress end value</dfn>). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l770" id="l770"> 770</a> They allow drawing a progress ratio from </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l771" id="l771"> 771</a> [=math functions=], [=media features=], and [=container features=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l772" id="l772"> 772</a> respectively, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l773" id="l773"> 773</a> following a common syntactic pattern: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l774" id="l774"> 774</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l775" id="l775"> 775</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l776" id="l776"> 776</a> <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> ) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l777" id="l777"> 777</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l778" id="l778"> 778</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l779" id="l779"> 779</a> Each resolves to a <<number>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l780" id="l780"> 780</a> by [=calculating a progress function=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l781" id="l781"> 781</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l782" id="l782"> 782</a> <div algorithm> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l783" id="l783"> 783</a> To <dfn export>calculate a progress function</dfn>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l784" id="l784"> 784</a> given a [=progress value=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l785" id="l785"> 785</a> [=progress start value=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l786" id="l786"> 786</a> and [=progress end value=]: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l787" id="l787"> 787</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l788" id="l788"> 788</a> : If the [=progress start value=] and [=progress end value=] are different values </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l789" id="l789"> 789</a> :: <code>([=progress value=] - [=progress start value=]) / ([=progress end value=] - [=progress start value=])</code>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l790" id="l790"> 790</a> : If the [=progress start value=] and [=progress end value=] are the same value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l791" id="l791"> 791</a> :: 0, -∞, or +∞, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l792" id="l792"> 792</a> depending on whether [=progress value=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l793" id="l793"> 793</a> is equal to, less than, or greater than </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l794" id="l794"> 794</a> the shared value. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l795" id="l795"> 795</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l796" id="l796"> 796</a> Note: The return value is a plain <<number>>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l797" id="l797"> 797</a> not [=made consistent=] with its arguments by default. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l798" id="l798"> 798</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l799" id="l799"> 799</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l800" id="l800"> 800</a> The resulting number can then be input into other calculations, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l801" id="l801"> 801</a> such as a [=math function=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l802" id="l802"> 802</a> or a [=mix notation=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l803" id="l803"> 803</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l804" id="l804"> 804</a> <h3 id="progress-func"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l805" id="l805"> 805</a> Calculated Progress Values: the ''progress()'' notation</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l806" id="l806"> 806</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l807" id="l807"> 807</a> The <dfn>progress()</dfn> functional notation </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l808" id="l808"> 808</a> returns a <<number>> value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l809" id="l809"> 809</a> representing the position of one [=calculation=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l810" id="l810"> 810</a> (the [=progress value=]) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l811" id="l811"> 811</a> between two other [=calculations=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l812" id="l812"> 812</a> (the [=progress start value=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l813" id="l813"> 813</a> and [=progress end value=]). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l814" id="l814"> 814</a> ''progress()'' is a [=math function=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l815" id="l815"> 815</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l816" id="l816"> 816</a> The syntax of ''progress()'' is defined as follows: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l817" id="l817"> 817</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l818" id="l818"> 818</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l819" id="l819"> 819</a> <dfn id=typedef-progress-fn><<progress()>></dfn> = progress(<<calc-sum>>, <<calc-sum>>, <<calc-sum>>) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l820" id="l820"> 820</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l821" id="l821"> 821</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l822" id="l822"> 822</a> where the first, second, and third <<calc-sum>> values represent </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l823" id="l823"> 823</a> the [=progress value=], [=progress start value=], and [=progress end value=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l824" id="l824"> 824</a> respectively. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l825" id="l825"> 825</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l826" id="l826"> 826</a> The argument [=calculations=] can resolve to any <<number>>, <<dimension>>, or <<percentage>>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l827" id="l827"> 827</a> but must have a [=consistent type=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l828" id="l828"> 828</a> or else the function is invalid. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l829" id="l829"> 829</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l830" id="l830"> 830</a> The value of ''progress()'' is a <<number>>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l831" id="l831"> 831</a> determined by [=calculating a progress function=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l832" id="l832"> 832</a> then [=made consistent=] with the [=consistent type=] of its arguments. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l833" id="l833"> 833</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l834" id="l834"> 834</a> ISSUE: Do we need a ''percent-progress()'' notation, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l835" id="l835"> 835</a> or do enough places auto-convert that it's not necessary? </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l836" id="l836"> 836</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l837" id="l837"> 837</a> Note: The ''progress()'' function is essentially syntactic sugar </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l838" id="l838"> 838</a> for a particular pattern of ''calc()'' notations, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l839" id="l839"> 839</a> so it's a [=math function=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l840" id="l840"> 840</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l841" id="l841"> 841</a> <h3 id="media-progress-func"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l842" id="l842"> 842</a> Media Query Progress Values: the ''media-progress()'' notation</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l843" id="l843"> 843</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l844" id="l844"> 844</a> Similar to the ''progress()'' notation, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l845" id="l845"> 845</a> the <dfn>media-progress()</dfn> functional notation </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l846" id="l846"> 846</a> returns a <<number>> value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l847" id="l847"> 847</a> representing current value of the specified [=media query=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l848" id="l848"> 848</a> [[!MEDIAQUERIES-4]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l849" id="l849"> 849</a> as a [=progress value=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l850" id="l850"> 850</a> between two explicit values of the [=media query=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l851" id="l851"> 851</a> (as the [=progress start value=] and [=progress end value=]). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l852" id="l852"> 852</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l853" id="l853"> 853</a> The syntax of ''media-progress()'' is defined as follows: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l854" id="l854"> 854</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l855" id="l855"> 855</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l856" id="l856"> 856</a> <dfn><<media-progress()>></dfn> = media-progress(<<mf-name>>, <<calc-sum>>, <<calc-sum>>) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l857" id="l857"> 857</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l858" id="l858"> 858</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l859" id="l859"> 859</a> where the value of the [=media feature=] corresponding to <<mf-name>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l860" id="l860"> 860</a> represents the [=progress value=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l861" id="l861"> 861</a> and the two <<calc-sum>> values represent </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l862" id="l862"> 862</a> the [=progress start value=] and [=progress end value=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l863" id="l863"> 863</a> respectively. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l864" id="l864"> 864</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l865" id="l865"> 865</a> The specified [=media feature=] must be a valid “range” type feature, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l866" id="l866"> 866</a> the specified [=progress start value=] and [=progress end value=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l867" id="l867"> 867</a> must be valid values for the specified [=media query=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l868" id="l868"> 868</a> and both [=calculation=] values must have a [=consistent type=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l869" id="l869"> 869</a> or else the function is invalid. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l870" id="l870"> 870</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l871" id="l871"> 871</a> The [=progress start value=] and [=progress end value=] [=calculations=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l872" id="l872"> 872</a> are interpreted as specified for the [=media feature=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l873" id="l873"> 873</a> (rather than as specified by the context the function is used in). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l874" id="l874"> 874</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l875" id="l875"> 875</a> The value of ''media-progress()'' is a <<number>>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l876" id="l876"> 876</a> determined by [=calculating a progress function=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l877" id="l877"> 877</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l878" id="l878"> 878</a> Note: ''media-progress()'' is <em>not</em> a [=math function=]; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l879" id="l879"> 879</a> it's just a function that evaluates to a <<number>>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l880" id="l880"> 880</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l881" id="l881"> 881</a> <h3 id="container-progress-func"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l882" id="l882"> 882</a> Container Query Progress Values: the ''container-progress()'' notation</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l883" id="l883"> 883</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l884" id="l884"> 884</a> The <dfn>container-progress()</dfn> functional notation </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l885" id="l885"> 885</a> is identical to the ''media-progress()'' functional notation, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l886" id="l886"> 886</a> except that it accepts [=container features=] [[!CSS-CONTAIN-3]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l887" id="l887"> 887</a> in place of [=media features=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l888" id="l888"> 888</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l889" id="l889"> 889</a> The syntax of ''container-progress()'' is defined as follows: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l890" id="l890"> 890</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l891" id="l891"> 891</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l892" id="l892"> 892</a> <dfn><<container-progress()>></dfn> = container-progress(<<mf-name>> [ of <<container-name>> ]?, <<calc-sum>>, <<calc-sum>>) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l893" id="l893"> 893</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l894" id="l894"> 894</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l895" id="l895"> 895</a> where <<mf-name>> represents a [=size feature=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l896" id="l896"> 896</a> and the optional <<container-name>> component specifies </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l897" id="l897"> 897</a> the named containers to consider when selecting a container </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l898" id="l898"> 898</a> to resolve them against. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l899" id="l899"> 899</a> The value of the [=size feature=] is the [=progress value=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l900" id="l900"> 900</a> and the two <<calc-sum>> values represent </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l901" id="l901"> 901</a> the [=progress start value=] and [=progress end value=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l902" id="l902"> 902</a> respectively. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l903" id="l903"> 903</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l904" id="l904"> 904</a> The specified <<mf-name>> must be a valid [=size feature=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l905" id="l905"> 905</a> the specified [=progress start value=] and [=progress end value=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l906" id="l906"> 906</a> must be valid values for that [=size feature=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l907" id="l907"> 907</a> and both [=calculation=] values must have a [=consistent type=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l908" id="l908"> 908</a> or else the function is invalid. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l909" id="l909"> 909</a> ''container-progress()'' is only valid in a property value context; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l910" id="l910"> 910</a> it cannot be used in, for example, a [=media query=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l911" id="l911"> 911</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l912" id="l912"> 912</a> The [=progress start value=] and [=progress end value=] [=calculations=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l913" id="l913"> 913</a> are interpreted as specified for the [=size feature=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l914" id="l914"> 914</a> (rather than as specified by the context the function is used in). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l915" id="l915"> 915</a> If no appropriate containers are found, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l916" id="l916"> 916</a> ''container-progress()'' resolves its <<size-feature>> query </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l917" id="l917"> 917</a> against the [=small viewport size=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l918" id="l918"> 918</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l919" id="l919"> 919</a> The value of ''media-progress()'' is a <<number>>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l920" id="l920"> 920</a> determined by [=calculating a progress function=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l921" id="l921"> 921</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l922" id="l922"> 922</a> Note: ''container-progress()'' is <em>not</em> a [=math function=]; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l923" id="l923"> 923</a> it's just a function that evaluates to a <<number>>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l924" id="l924"> 924</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l925" id="l925"> 925</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l926" id="l926"> 926</a>  </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l936" id="l936"> 936</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l937" id="l937"> 937</a> <h2 id="mixing"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l938" id="l938"> 938</a> Mixing and Interpolation Notations: the *-mix() family</h2> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l939" id="l939"> 939</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l940" id="l940"> 940</a> ISSUE(6245): This feature <a href="https://css.typetura.com/ruleset-interpolation/explainer/">does not handle multiple breakpoints very well</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l941" id="l941"> 941</a> and <a href="https://github.com/w3c/csswg-drafts/issues/6245#issuecomment-2469190377">might need to be redesigned</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l942" id="l942"> 942</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l943" id="l943"> 943</a> Several <dfn>mix notations</dfn> in CSS </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l944" id="l944"> 944</a> allow representing the interpolation of two values, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l945" id="l945"> 945</a> the <dfn>mix start value</dfn> and the <dfn>mix end value</dfn>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l946" id="l946"> 946</a> at a given point in progress between them (the <dfn>mix progress value</dfn>). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l947" id="l947"> 947</a> These [=functional notations=] follow the syntactic pattern: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l948" id="l948"> 948</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l949" id="l949"> 949</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l950" id="l950"> 950</a> <var>mix-function</var>() = <var>mix-function</var>( <<progress>>, [=mix start value|start-value=], [=mix end value|end-value=] ) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l951" id="l951"> 951</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l952" id="l952"> 952</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l953" id="l953"> 953</a> The [=mix notations=] in CSS include: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l954" id="l954"> 954</a> * ''calc-mix()'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l955" id="l955"> 955</a> for interpolating <<length>>, <<percentage>>, <<time>>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l956" id="l956"> 956</a> and other dimensions representable in ''calc()'' expressions </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l957" id="l957"> 957</a> * ''color-mix()'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l958" id="l958"> 958</a> for interpolating two <<color>> values </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l959" id="l959"> 959</a> * ''cross-fade()'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l960" id="l960"> 960</a> for interpolating <<image>> values </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l961" id="l961"> 961</a> * ''palette-mix()'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l962" id="l962"> 962</a> for interpolating two 'font-palette' values </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l963" id="l963"> 963</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l964" id="l964"> 964</a> and finally the generic ''mix()'' notation, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l965" id="l965"> 965</a> which can represent the interpolation of any property's values </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l966" id="l966"> 966</a> (but only the property's entire value, not individual components). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l967" id="l967"> 967</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l968" id="l968"> 968</a> Note: The ''cross-fade()'' notation </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l969" id="l969"> 969</a> also has an alternative syntax </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l970" id="l970"> 970</a> that allows for mixing more than two values, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l971" id="l971"> 971</a> but does not allow for the more complex expressions of <<progress>>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l972" id="l972"> 972</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l973" id="l973"> 973</a> ISSUE: The ''mix()'' notation also has a variant that takes a set of keyframes. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l974" id="l974"> 974</a> It does this by referring to an ''@keyframes'' rule, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l975" id="l975"> 975</a> and pulling the corresponding property declaration out of that. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l976" id="l976"> 976</a> It would be nice to allow the other mix notations to take keyframe also, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l977" id="l977"> 977</a> but how would we represent a set of keyframes for a [=component value=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l978" id="l978"> 978</a> (rather than a full property value)? </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l979" id="l979"> 979</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l980" id="l980"> 980</a> <h3 id="progress-type"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l981" id="l981"> 981</a> Representing Interpolation Progress: the <<progress>> type</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l982" id="l982"> 982</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l983" id="l983"> 983</a> The <dfn><<progress>></dfn> value type represents </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l984" id="l984"> 984</a> the [=mix progress value=] in a [=mix notation=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l985" id="l985"> 985</a> and ultimately resolves to a percentage. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l986" id="l986"> 986</a> It can, however, draw that percentage value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l987" id="l987"> 987</a> from sources such as media queries and animation timelines, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l988" id="l988"> 988</a> and can also convert it through an [=easing function=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l989" id="l989"> 989</a> before using it for interpolation. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l990" id="l990"> 990</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l991" id="l991"> 991</a> Its syntax is defined as follows: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l992" id="l992"> 992</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l993" id="l993"> 993</a> <<progress>> = [ <<percentage>> | <<number>> | <<'animation-timeline'>> ] && [ by <<easing-function>> ]? </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l994" id="l994"> 994</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l995" id="l995"> 995</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l996" id="l996"> 996</a> where: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l997" id="l997"> 997</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l998" id="l998"> 998</a> <dl dfn-type=value dfn-for="<progress>"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l999" id="l999"> 999</a> <dt><dfn><<percentage-token>></dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1000" id="l1000"> 1000</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1001" id="l1001"> 1001</a> Computes to the equivalent <<number>>: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1002" id="l1002"> 1002</a> ''0%'' becomes ''0'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1003" id="l1003"> 1003</a> ''100%'' becomes ''1'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1004" id="l1004"> 1004</a> etc. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1005" id="l1005"> 1005</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1006" id="l1006"> 1006</a> Note: This only allows literal percentages, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1007" id="l1007"> 1007</a> like ''15%''; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1008" id="l1008"> 1008</a> calculations like ''calc(100% / 7)'' will not work, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1009" id="l1009"> 1009</a> as they will instead attempt to use the normal rules </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1010" id="l1010"> 1010</a> for resolving a percentage against another type </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1011" id="l1011"> 1011</a> (such as <<length>>, in 'width'). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1012" id="l1012"> 1012</a> Use expressions like ''calc(1 / 7)'' instead. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1013" id="l1013"> 1013</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1014" id="l1014"> 1014</a> <dt><dfn><<number>></dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1015" id="l1015"> 1015</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1016" id="l1016"> 1016</a> Represents the [=mix progress value=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1017" id="l1017"> 1017</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1018" id="l1018"> 1018</a> Note: This allows the use of the ''progress()'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1019" id="l1019"> 1019</a> ''media-progress()'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1020" id="l1020"> 1020</a> and ''container-progress()'' notations. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1021" id="l1021"> 1021</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1022" id="l1022"> 1022</a> <dt><dfn><<'animation-timeline'>></dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1023" id="l1023"> 1023</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1024" id="l1024"> 1024</a> Represents the [=mix progress value=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1025" id="l1025"> 1025</a> as the progress of the specified [[web-animations-1#timelines|animation timeline]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1026" id="l1026"> 1026</a> The values ''animation-timeline/none'' and ''animation-timeline/auto'', however, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1027" id="l1027"> 1027</a> are invalid. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1028" id="l1028"> 1028</a> [[!CSS-ANIMATIONS-2]] [[!WEB-ANIMATIONS-2]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1029" id="l1029"> 1029</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1030" id="l1030"> 1030</a> <dt><dfn><<easing-function>></dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1031" id="l1031"> 1031</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1032" id="l1032"> 1032</a> Converts the specified input [=mix progress value=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1033" id="l1033"> 1033</a> into an output [=mix progress value=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1034" id="l1034"> 1034</a> using the specified [=easing function=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1035" id="l1035"> 1035</a> [[!CSS-EASING-1]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1036" id="l1036"> 1036</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1037" id="l1037"> 1037</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1038" id="l1038"> 1038</a> Note: Progress values below ''0'' and above ''1'' are valid; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1039" id="l1039"> 1039</a> they allow representing interpolation beyond the range </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1040" id="l1040"> 1040</a> defined by the start and end values. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1041" id="l1041"> 1041</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1042" id="l1042"> 1042</a> Note: While <<progress>> itself can be a <<percentage>>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1043" id="l1043"> 1043</a> mapping directly to the equivalent <<number>>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1044" id="l1044"> 1044</a> a function that <em>resolves</em> to a <<number>>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1045" id="l1045"> 1045</a> like ''progress()'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1046" id="l1046"> 1046</a> resolves <<percentage>>s using the normal rules for the context; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1047" id="l1047"> 1047</a> for example, in 'width', they would be resolved against a length. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1048" id="l1048"> 1048</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1049" id="l1049"> 1049</a> The [=computed value=] of a <<progress>> value specified with <<percentage>> or <<number>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1050" id="l1050"> 1050</a> is the computed <<number>> converted through the <<easing-function>> (if any). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1051" id="l1051"> 1051</a> The [=computed value=] of a <<progress>> value specified with <<'animation-timeline'>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1052" id="l1052"> 1052</a> is the computed <<'animation-timeline'>> and <<easing-function>> (if any). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1053" id="l1053"> 1053</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1054" id="l1054"> 1054</a> <h3 id="calc-mix"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1055" id="l1055"> 1055</a> Interpolated Numeric and Dimensional Values: the ''calc-mix()'' notation</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1056" id="l1056"> 1056</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1057" id="l1057"> 1057</a> The <dfn>calc-mix()</dfn> [=mix notation=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1058" id="l1058"> 1058</a> represents an interpolated numeric or dimensional value. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1059" id="l1059"> 1059</a> Like ''calc()'', it is a [=math function=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1060" id="l1060"> 1060</a> with the following syntactic form: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1061" id="l1061"> 1061</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1062" id="l1062"> 1062</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1063" id="l1063"> 1063</a> <dfn><<calc-mix()>></dfn> = calc-mix( <<progress>>, <<calc-sum>>, <<calc-sum>> ) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1064" id="l1064"> 1064</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1065" id="l1065"> 1065</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1066" id="l1066"> 1066</a> The <<calc-sum>> arguments can resolve </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1067" id="l1067"> 1067</a> to any <<number>>, <<dimension>>, or <<percentage>>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1068" id="l1068"> 1068</a> but must have a [=consistent type=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1069" id="l1069"> 1069</a> or else the function is invalid. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1070" id="l1070"> 1070</a> The result's type will be the [=consistent type=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1071" id="l1071"> 1071</a> [=made consistent=] with the type of the <<progress>> value. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1072" id="l1072"> 1072</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1073" id="l1073"> 1073</a> The [=used value=] of a valid ''calc-mix()'' is </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1074" id="l1074"> 1074</a> the result of interpolating these two values </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1075" id="l1075"> 1075</a> to the progress given by <<progress>>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1076" id="l1076"> 1076</a> If the <<progress>> value can be computed to a <<number>>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1077" id="l1077"> 1077</a> then the [=computed value=] is likewise </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1078" id="l1078"> 1078</a> the result of interpolating the two [=computed values=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1079" id="l1079"> 1079</a> to that <<progress>> value </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1080" id="l1080"> 1080</a> (in other words, ''A * (1-progress) + B * progress'') </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1081" id="l1081"> 1081</a> it is otherwise the ''calc-mix()'' notation itself </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1082" id="l1082"> 1082</a> with its arguments each computed according to their type. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1083" id="l1083"> 1083</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1084" id="l1084"> 1084</a> <h3 id="color-mix"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1085" id="l1085"> 1085</a> Interpolated Color Values: the ''color-mix()'' notation</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1086" id="l1086"> 1086</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1087" id="l1087"> 1087</a> This specification extends the ''color-mix()'' [=functional notation=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1088" id="l1088"> 1088</a> as a [=mix notation=] accepting the following syntaxes: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1089" id="l1089"> 1089</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1090" id="l1090"> 1090</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1091" id="l1091"> 1091</a> <<color-mix()>> = </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1092" id="l1092"> 1092</a> color-mix( [ <<progress>> && <<color-interpolation-method>>? ] , <<color>>, <<color>> ) | </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1093" id="l1093"> 1093</a> color-mix( <<color-interpolation-method>>, [<<color>> && <<percentage [0,100]>>?]#{2} ) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1094" id="l1094"> 1094</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1095" id="l1095"> 1095</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1096" id="l1096"> 1096</a> The used value of the first [=mix notation=] variant </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1097" id="l1097"> 1097</a> is equivalent to assigning the <<progress>> value, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1098" id="l1098"> 1098</a> as a <<percentage>>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1099" id="l1099"> 1099</a> to the <<percentage>> of the second <<color>> argument in the second variant. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1100" id="l1100"> 1100</a> <span class=note>That is, ''color-mix(progress, color1, color2)'' is equivalent to ''color-mix(color1, color2 progress)''.</span> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1101" id="l1101"> 1101</a> See [[css-color-5#color-mix]] for the normative definition of the second variant. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1102" id="l1102"> 1102</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1103" id="l1103"> 1103</a> ISSUE: <<progress>> allows returning percentages outside 0-100%, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1104" id="l1104"> 1104</a> but ''color-mix()'' doesn't allows such values, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1105" id="l1105"> 1105</a> so need to define how that gets processed. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1106" id="l1106"> 1106</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1107" id="l1107"> 1107</a> <h3 id="cross-fade"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1108" id="l1108"> 1108</a> Interpolated Image Values: the ''cross-fade()'' notation</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1109" id="l1109"> 1109</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1110" id="l1110"> 1110</a> This specification extends the ''cross-fade()'' [=functional notation=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1111" id="l1111"> 1111</a> as a [=mix notation=] accepting the following syntaxes: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1112" id="l1112"> 1112</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1113" id="l1113"> 1113</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1114" id="l1114"> 1114</a> <<cross-fade()>> = </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1115" id="l1115"> 1115</a> cross-fade( <<progress>>, [ <<image>> | <<color>> ], [ <<image>> | <<color>> ] ) | </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1116" id="l1116"> 1116</a> cross-fade( <<cf-image>># ) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1117" id="l1117"> 1117</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1118" id="l1118"> 1118</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1119" id="l1119"> 1119</a> The used value of the first [=mix notation=] variant </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1120" id="l1120"> 1120</a> is equivalent to assigning the <<progress>> value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1121" id="l1121"> 1121</a> as the <<percentage>> of the second <<color>> argument in the second variant. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1122" id="l1122"> 1122</a> <span class=note>That is, ''cross-fade(progress, image1, image2)'' is equivalent to ''cross-fade(image1, image2 progress)''.</span> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1123" id="l1123"> 1123</a> See [[css-images-4#cross-fade-function]] for the normative definition of the second variant. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1124" id="l1124"> 1124</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1125" id="l1125"> 1125</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1126" id="l1126"> 1126</a> <h3 id="transform-mix"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1127" id="l1127"> 1127</a> Interpolated Transform Values: the ''transform-mix()'' notation</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1128" id="l1128"> 1128</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1129" id="l1129"> 1129</a> The <dfn>transform-mix()</dfn> [=mix notation=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1130" id="l1130"> 1130</a> represents an interpolated <<transform-list>>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1131" id="l1131"> 1131</a> with the following syntactic form: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1132" id="l1132"> 1132</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1133" id="l1133"> 1133</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1134" id="l1134"> 1134</a> <dfn><<transform-mix()>></dfn> = transform-mix( <<progress>>, <<transform-list>>, <<transform-list>> ) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1135" id="l1135"> 1135</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1136" id="l1136"> 1136</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1137" id="l1137"> 1137</a> The [=used value=] of a valid ''transform-mix()'' is </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1138" id="l1138"> 1138</a> the result of interpolating these two values </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1139" id="l1139"> 1139</a> to the progress given by <<progress>>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1140" id="l1140"> 1140</a> If the <<progress>> value can be computed to a <<percentage>>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1141" id="l1141"> 1141</a> and the <<transform-list>>s can be interpolated </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1142" id="l1142"> 1142</a> without used-value-time information, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1143" id="l1143"> 1143</a> then the [=computed value=] is likewise </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1144" id="l1144"> 1144</a> the result of interpolating the two [=computed values=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1145" id="l1145"> 1145</a> to that <<progress>> value; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1146" id="l1146"> 1146</a> it is otherwise the ''transform-mix()'' notation itself </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1147" id="l1147"> 1147</a> with its arguments each computed according to their type. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1148" id="l1148"> 1148</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1149" id="l1149"> 1149</a> ''transform-mix()'' is, itself, a <<transform-function>>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1150" id="l1150"> 1150</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1151" id="l1151"> 1151</a> <h3 id="mix"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1152" id="l1152"> 1152</a> Interpolated Property Values: the ''mix()'' notation</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1153" id="l1153"> 1153</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1154" id="l1154"> 1154</a> [=Interpolation=] of any two property values can be represented </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1155" id="l1155"> 1155</a> by the <dfn>mix()</dfn> [=mix notation=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1156" id="l1156"> 1156</a> which supports two alternative syntax patterns: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1157" id="l1157"> 1157</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1158" id="l1158"> 1158</a> <pre class="prod"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1159" id="l1159"> 1159</a> <dfn><<mix()>></dfn> = </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1160" id="l1160"> 1160</a> mix( <<progress>> , <<whole-value>> , <<whole-value>> ) | </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1161" id="l1161"> 1161</a> mix( <<progress>> && of <<keyframes-name>> ) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1162" id="l1162"> 1162</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1163" id="l1163"> 1163</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1164" id="l1164"> 1164</a> The first syntax alternative, like other [=mix notations=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1165" id="l1165"> 1165</a> interpolates between the first <<whole-value>> (its [=mix start value=]) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1166" id="l1166"> 1166</a> and the second <<whole-value>> (its [=mix end value=]). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1167" id="l1167"> 1167</a> The second uses the [=mix progress value=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1168" id="l1168"> 1168</a> to interpolate the corresponding property declarations from a set of keyframes, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1169" id="l1169"> 1169</a> allowing for more complex interpolation curves. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1170" id="l1170"> 1170</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1171" id="l1171"> 1171</a> For the standard [=mix notation=] variant, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1172" id="l1172"> 1172</a> if the two <<whole-value>>s being interpolated by ''mix()'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1173" id="l1173"> 1173</a> are [=interpolation|interpolable=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1174" id="l1174"> 1174</a> as values for the property in which it is specified, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1175" id="l1175"> 1175</a> and the interpolated value can be represented without ''mix()'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1176" id="l1176"> 1176</a> the [=computed value=] of ''mix()'' is </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1177" id="l1177"> 1177</a> the result of interpolating these two values </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1178" id="l1178"> 1178</a> to the progress given by <<progress>>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1179" id="l1179"> 1179</a> Otherwise, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1180" id="l1180"> 1180</a> the [=computed value=] of ''mix()'' is </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1181" id="l1181"> 1181</a> the ''mix()'' [=functional notation=] itself </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1182" id="l1182"> 1182</a> with its <<progress>> value computed </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1183" id="l1183"> 1183</a> and its <<whole-value>>s (if provided) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1184" id="l1184"> 1184</a> computed as values for this property. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1185" id="l1185"> 1185</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1186" id="l1186"> 1186</a> <div class="example"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1187" id="l1187"> 1187</a> For example, most uses of ''mix()'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1188" id="l1188"> 1188</a> will resolve at computed-value time: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1189" id="l1189"> 1189</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1190" id="l1190"> 1190</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1191" id="l1191"> 1191</a> color: mix(90%, red, blue); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1192" id="l1192"> 1192</a> /* via simple interpolation, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1193" id="l1193"> 1193</a> computes to: */ </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1194" id="l1194"> 1194</a> color: rgb(10% 0 90%); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1195" id="l1195"> 1195</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1196" id="l1196"> 1196</a> color: mix(90%, currentcolor, black); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1197" id="l1197"> 1197</a> /* can't be fully resolved at computed-value time, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1198" id="l1198"> 1198</a> but still has a defined representation: */ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1199" id="l1199"> 1199</a> color: color-mix(currentcolor 90%, black 10%); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1200" id="l1200"> 1200</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1201" id="l1201"> 1201</a> float: mix(90%, left, right); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1202" id="l1202"> 1202</a> /* discretely animatable */ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1203" id="l1203"> 1203</a> float: right; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1204" id="l1204"> 1204</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1205" id="l1205"> 1205</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1206" id="l1206"> 1206</a> But a few cases don't have an intermediate representation: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1207" id="l1207"> 1207</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1208" id="l1208"> 1208</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1209" id="l1209"> 1209</a> transform: mix(90%, translate(calc(1em + 50%)), rotate(30deg)); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1210" id="l1210"> 1210</a> /* because functions don't match, it will interpolate </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1211" id="l1211"> 1211</a> via matrix(). But translate(%) needs layout </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1212" id="l1212"> 1212</a> information to turn into a matrix(), so the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1213" id="l1213"> 1213</a> interpolated value can't actually be represented. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1214" id="l1214"> 1214</a> Computes to: */ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1215" id="l1215"> 1215</a> transform: mix(90%, translate(calc(16px + 50%)), rotate(30deg)); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1216" id="l1216"> 1216</a> transform: mix(90% of ripple); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1217" id="l1217"> 1217</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1218" id="l1218"> 1218</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1219" id="l1219"> 1219</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1220" id="l1220"> 1220</a> The ''mix()'' notation is a <<whole-value>>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1221" id="l1221"> 1221</a> Additionally, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1222" id="l1222"> 1222</a> if any of its <<whole-value>> arguments are [=not animatable=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1223" id="l1223"> 1223</a> the notation is invalid. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1224" id="l1224"> 1224</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1225" id="l1225"> 1225</a> <div class="example"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1226" id="l1226"> 1226</a> For example, the following declarations are invalid, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1227" id="l1227"> 1227</a> and will be ignored: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1228" id="l1228"> 1228</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1229" id="l1229"> 1229</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1230" id="l1230"> 1230</a> /* Invalid start value */ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1231" id="l1231"> 1231</a> color: mix(90%, #invalid, #F00); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1232" id="l1232"> 1232</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1233" id="l1233"> 1233</a> /* Function is mixed with other values */ </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1234" id="l1234"> 1234</a> background: url(ocean) mix(10%, blue, yellow); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1235" id="l1235"> 1235</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1236" id="l1236"> 1236</a> /* 'animation-*' is not animatable */ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1237" id="l1237"> 1237</a> animation-delay: mix(0%, 0s, 2s); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1238" id="l1238"> 1238</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1239" id="l1239"> 1239</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1240" id="l1240"> 1240</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1241" id="l1241"> 1241</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1242" id="l1242"> 1242</a>  </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1252" id="l1252"> 1252</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1253" id="l1253"> 1253</a> <h2 id="value-insert"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1254" id="l1254"> 1254</a> Miscellaneous Value Substituting Functions</h2> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1255" id="l1255"> 1255</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1256" id="l1256"> 1256</a> <h3 id="whole-value" type lt="<whole-value>"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1257" id="l1257"> 1257</a> Representing An Entire Property Value: the <<whole-value>> type</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1258" id="l1258"> 1258</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1259" id="l1259"> 1259</a> Several functions defined in this specification </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1260" id="l1260"> 1260</a> can only be used as the "whole value" of a property. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1261" id="l1261"> 1261</a> For example, ''background-position: toggle(50px 50px, center);'' is valid, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1262" id="l1262"> 1262</a> but ''background-position: toggle(50px, center) 50px;'' is not. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1263" id="l1263"> 1263</a> The <<whole-value>> production represents these values. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1264" id="l1264"> 1264</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1265" id="l1265"> 1265</a> All properties implicitly accept a <<whole-value>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1266" id="l1266"> 1266</a> as their entire value, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1267" id="l1267"> 1267</a> just as they accept the [=CSS-wide keywords=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1268" id="l1268"> 1268</a> as their entire value. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1269" id="l1269"> 1269</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1270" id="l1270"> 1270</a> When used as a component value of a function, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1271" id="l1271"> 1271</a> <<whole-value>> also represents any CSS value </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1272" id="l1272"> 1272</a> normally valid as the whole value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1273" id="l1273"> 1273</a> of the property in which it is used </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1274" id="l1274"> 1274</a> (including additional <<whole-value>> functions). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1275" id="l1275"> 1275</a> However, some functions may restrict </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1276" id="l1276"> 1276</a> what a <<whole-value>> argument can include. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1277" id="l1277"> 1277</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1278" id="l1278"> 1278</a> <h3 id="first-valid"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1279" id="l1279"> 1279</a> Selecting the First Supported Value: the ''first-valid()'' notation</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1280" id="l1280"> 1280</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1281" id="l1281"> 1281</a> CSS supports progressive enhancement with its forward-compatible parsing: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1282" id="l1282"> 1282</a> authors can declare the same property multiple times in a style rule, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1283" id="l1283"> 1283</a> using different values each time, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1284" id="l1284"> 1284</a> and a CSS UA will automatically use the last one that it understands </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1285" id="l1285"> 1285</a> and throw out the rest. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1286" id="l1286"> 1286</a> This principle, together with the ''@supports'' rule, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1287" id="l1287"> 1287</a> allows authors to write stylesheets that work well </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1288" id="l1288"> 1288</a> in old and new UAs simultaneously. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1289" id="l1289"> 1289</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1290" id="l1290"> 1290</a> However, using ''var()'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1291" id="l1291"> 1291</a> (or similar substitution functions that resolve after parsing) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1292" id="l1292"> 1292</a> thwarts this functionality; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1293" id="l1293"> 1293</a> CSS UAs must assume any such property is valid at parse-time. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1294" id="l1294"> 1294</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1295" id="l1295"> 1295</a> The <dfn>first-valid()</dfn> [=functional notation=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1296" id="l1296"> 1296</a> inlines the fallback behavior </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1297" id="l1297"> 1297</a> intrinsic to parsing declarations. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1298" id="l1298"> 1298</a> Unlike most notations, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1299" id="l1299"> 1299</a> it can accept any valid or invalid syntax in its arguments, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1300" id="l1300"> 1300</a> and represents the first value among its arguments </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1301" id="l1301"> 1301</a> that is supported (parsed as valid) by the UA </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1302" id="l1302"> 1302</a> as the whole value of the property it's used in. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1303" id="l1303"> 1303</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1304" id="l1304"> 1304</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1305" id="l1305"> 1305</a> <dfn>&lt;first-valid()></dfn> = first-valid( <<declaration-value>># ) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1306" id="l1306"> 1306</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1307" id="l1307"> 1307</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1308" id="l1308"> 1308</a> If none of the arguments represent a valid value for the property, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1309" id="l1309"> 1309</a> the property is [=invalid at computed-value time=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1310" id="l1310"> 1310</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1311" id="l1311"> 1311</a> ''first-valid()'' is a <<whole-value>>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1312" id="l1312"> 1312</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1313" id="l1313"> 1313</a> Issue: Should this have a different name? </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1314" id="l1314"> 1314</a> We didn't quite decide on it during the resolution to add this. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1315" id="l1315"> 1315</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1316" id="l1316"> 1316</a> Note: Despite effectively taking <<whole-value>>s as its argument, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1317" id="l1317"> 1317</a> ''first-valid()'' is instead defined to take <<declaration-value>>s </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1318" id="l1318"> 1318</a> because, by definition, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1319" id="l1319"> 1319</a> it's intended to be used in cases </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1320" id="l1320"> 1320</a> <em>where its values might be invalid for the declaration it's in</em>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1321" id="l1321"> 1321</a> <<declaration-value>> imposes no contextual validity constraints on what it matches, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1322" id="l1322"> 1322</a> unlike <<whole-value>>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1323" id="l1323"> 1323</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1324" id="l1324"> 1324</a>  </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1326" id="l1326"> 1326</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1327" id="l1327"> 1327</a> <h3 id="if-notation"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1328" id="l1328"> 1328</a> Conditional Value Selection: the ''if()'' notation</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1329" id="l1329"> 1329</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1330" id="l1330"> 1330</a> The <dfn>if()</dfn> notation is an [=arbitrary substitution function=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1331" id="l1331"> 1331</a> that represents conditional values. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1332" id="l1332"> 1332</a> Its argument consists of an ordered semi-colon&ndash;separated list of statements, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1333" id="l1333"> 1333</a> each consisting of a condition </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1334" id="l1334"> 1334</a> followed by a colon </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1335" id="l1335"> 1335</a> followed by a value. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1336" id="l1336"> 1336</a> An ''if()'' notation represents </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1337" id="l1337"> 1337</a> the value corresponding to the first condition in its argument list to be true; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1338" id="l1338"> 1338</a> if no condition matches, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1339" id="l1339"> 1339</a> then the ''if()'' notation represents an empty token stream. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1340" id="l1340"> 1340</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1341" id="l1341"> 1341</a> The ''if()'' notation syntax is defined as follows: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1342" id="l1342"> 1342</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1343" id="l1343"> 1343</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1344" id="l1344"> 1344</a> <dfn><<if()>></dfn> = if( [ <<if-condition>> : <<declaration-value>>? ; ]* </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1345" id="l1345"> 1345</a> <<if-condition>> : <<declaration-value>>? ;? ) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1346" id="l1346"> 1346</a> <dfn><<if-condition>></dfn> = <<boolean-expr[ <<if-test>> ]>> | else </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1347" id="l1347"> 1347</a> <dfn><<if-test>></dfn> = </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1348" id="l1348"> 1348</a> supports( [ <<supports-condition>> | <<ident>> : <<declaration-value>> ] ) | </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1349" id="l1349"> 1349</a> media( <<media-query>> ) | </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1350" id="l1350"> 1350</a> style( <<style-query>> ) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1351" id="l1351"> 1351</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1352" id="l1352"> 1352</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1353" id="l1353"> 1353</a> The <dfn value for="if()">else</dfn> keyword represents </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1354" id="l1354"> 1354</a> a condition that is always true. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1355" id="l1355"> 1355</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1356" id="l1356"> 1356</a> To <dfn export>[=resolve an arbitrary substitution function|resolve an if() function=]</dfn>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1357" id="l1357"> 1357</a> return the <<declaration-value>>? </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1358" id="l1358"> 1358</a> associated with the first <<if-condition>> that is true; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1359" id="l1359"> 1359</a> if none are true, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1360" id="l1360"> 1360</a> return nothing (an empty token stream). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1361" id="l1361"> 1361</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1362" id="l1362"> 1362</a> Note: Unlike using ''@media''/''@supports''/''@container'' rules, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1363" id="l1363"> 1363</a> which just ignore their contents when they're false </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1364" id="l1364"> 1364</a> and let the cascade determine what values otherwise apply, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1365" id="l1365"> 1365</a> declarations with ''if()'' do not roll back the cascade if the conditions are false; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1366" id="l1366"> 1366</a> any fallback values must be provided inline. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1367" id="l1367"> 1367</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1368" id="l1368"> 1368</a>  </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1378" id="l1378"> 1378</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1379" id="l1379"> 1379</a> <h3 id="toggle-notation"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1380" id="l1380"> 1380</a> Toggling Between Values: the ''toggle()'' notation</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1381" id="l1381"> 1381</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1382" id="l1382"> 1382</a> The <dfn>toggle()</dfn> expression allows descendant elements </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1383" id="l1383"> 1383</a> to cycle over a list of values instead of inheriting the same value. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1384" id="l1384"> 1384</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1385" id="l1385"> 1385</a> <div class='example'> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1386" id="l1386"> 1386</a> The following example makes <code>&lt;em></code> elements italic in general, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1387" id="l1387"> 1387</a> but makes them normal if they're inside something that's italic: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1388" id="l1388"> 1388</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1389" id="l1389"> 1389</a> <pre>em { font-style: toggle(italic, normal); }</pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1390" id="l1390"> 1390</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1391" id="l1391"> 1391</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1392" id="l1392"> 1392</a> <div class='example'> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1393" id="l1393"> 1393</a> The following example cycles markers for nested lists, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1394" id="l1394"> 1394</a> so that a top level list has ''list-style-type/disc''-shaped markers, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1395" id="l1395"> 1395</a> but nested lists use ''list-style-type/circle'', then ''list-style-type/square'', then ''list-style-type/box'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1396" id="l1396"> 1396</a> and then repeat through the list of marker shapes, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1397" id="l1397"> 1397</a> starting again (for the 5th list deep) with ''list-style-type/disc''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1398" id="l1398"> 1398</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1399" id="l1399"> 1399</a> <pre>ul { list-style-type: toggle(disc, circle, square, box); }</pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1400" id="l1400"> 1400</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1401" id="l1401"> 1401</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1402" id="l1402"> 1402</a> The syntax of the ''toggle()'' expression is: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1403" id="l1403"> 1403</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1404" id="l1404"> 1404</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1405" id="l1405"> 1405</a> <dfn><<toggle()>></dfn> = toggle( <<whole-value>># ) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1406" id="l1406"> 1406</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1407" id="l1407"> 1407</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1408" id="l1408"> 1408</a> The ''toggle()'' notation is a <<whole-value>>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1409" id="l1409"> 1409</a> However, it is not allowed to be nested, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1410" id="l1410"> 1410</a> nor may it contain ''attr()'' or ''calc()'' notations; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1411" id="l1411"> 1411</a> declarations containing such constructs are invalid. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1412" id="l1412"> 1412</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1413" id="l1413"> 1413</a> <div class="example"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1414" id="l1414"> 1414</a> The following ''toggle()'' examples are all invalid: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1415" id="l1415"> 1415</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1416" id="l1416"> 1416</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1417" id="l1417"> 1417</a> background-position: 10px toggle(50px, 100px); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1418" id="l1418"> 1418</a> /* toggle() must be the sole value of the property */ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1419" id="l1419"> 1419</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1420" id="l1420"> 1420</a> list-style-type: toggle(disc, 50px); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1421" id="l1421"> 1421</a> /* ''50px'' isn't a valid value of 'list-style-type' */ </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1422" id="l1422"> 1422</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1423" id="l1423"> 1423</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1424" id="l1424"> 1424</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1425" id="l1425"> 1425</a> To determine the computed value of ''toggle()'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1426" id="l1426"> 1426</a> first evaluate each argument as if it were the sole value of the property in which ''toggle()'' is placed </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1427" id="l1427"> 1427</a> to determine the computed value that each represents, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1428" id="l1428"> 1428</a> called <var>C<sub>n</sub></var> for the <var>n</var>-th argument to ''toggle()''. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1429" id="l1429"> 1429</a> Then, compare the property's <a>inherited value</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1430" id="l1430"> 1430</a> with each <var>C<sub>n</sub></var>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1431" id="l1431"> 1431</a> For the earliest <var>C<sub>n</sub></var> that matches the <a>inherited value</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1432" id="l1432"> 1432</a> the computed value of ''toggle()'' is <var>C<sub>n+1</sub></var>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1433" id="l1433"> 1433</a> If the match was the last argument in the list, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1434" id="l1434"> 1434</a> or there was no match, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1435" id="l1435"> 1435</a> the computed value of ''toggle()'' is the computed value that the first argument represents. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1436" id="l1436"> 1436</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1437" id="l1437"> 1437</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1438" id="l1438"> 1438</a> Note: This means that repeating values in a ''toggle()'' short-circuits the list. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1439" id="l1439"> 1439</a> For example ''toggle(1em, 2em, 1em, 4em)'' will be equivalent to ''toggle(1em, 2em)''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1440" id="l1440"> 1440</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1441" id="l1441"> 1441</a>  </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1442" id="l1442"> 1442</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1443" id="l1443"> 1443</a> Note: That ''toggle()'' explicitly looks at the computed value of the parent, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1444" id="l1444"> 1444</a> so it works even on non-inherited properties. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1445" id="l1445"> 1445</a> This is similar to the ''inherit'' keyword, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1446" id="l1446"> 1446</a> which works even on non-inherited properties. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1447" id="l1447"> 1447</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1448" id="l1448"> 1448</a> Note: That the [=computed value=] of a property is an abstract set of values, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1449" id="l1449"> 1449</a> not a particular serialization [[!CSS21]], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1450" id="l1450"> 1450</a> so comparison between computed values should always be unambiguous and have the expected result. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1451" id="l1451"> 1451</a> For example, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1452" id="l1452"> 1452</a> a Level 2 <l spec=css22>'background-position'</l> computed value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1453" id="l1453"> 1453</a> is just two offsets, each represented as an absolute length or a percentage, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1454" id="l1454"> 1454</a> so the declarations ''background-position: top center'' and ''background-position: 50% 0%'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1455" id="l1455"> 1455</a> produce identical computed values. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1456" id="l1456"> 1456</a> If the "Computed Value" line of a property definition seems to define something ambiguous or overly strict, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1457" id="l1457"> 1457</a> please <a href="#sotd">provide feedback</a> so we can fix it. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1458" id="l1458"> 1458</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1459" id="l1459"> 1459</a> If ''toggle()'' is used on a <a>shorthand property</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1460" id="l1460"> 1460</a> it sets each of its longhands to a ''toggle()'' value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1461" id="l1461"> 1461</a> with arguments corresponding to what the longhand would have received </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1462" id="l1462"> 1462</a> had each of the original ''toggle()'' arguments been the sole value of the <a>shorthand</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1463" id="l1463"> 1463</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1464" id="l1464"> 1464</a> <div class="example"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1465" id="l1465"> 1465</a> For example, the following shorthand declaration: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1466" id="l1466"> 1466</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1467" id="l1467"> 1467</a> <pre>margin: toggle(1px 2px, 4px, 1px 5px 4px);</pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1468" id="l1468"> 1468</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1469" id="l1469"> 1469</a> is equivalent to the following longhand declarations: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1470" id="l1470"> 1470</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1471" id="l1471"> 1471</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1472" id="l1472"> 1472</a> margin-top: toggle(1px, 4px, 1px); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1473" id="l1473"> 1473</a> margin-right: toggle(2px, 4px, 5px); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1474" id="l1474"> 1474</a> margin-bottom: toggle(1px, 4px, 4px); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1475" id="l1475"> 1475</a> margin-left: toggle(2px, 4px, 5px); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1476" id="l1476"> 1476</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1477" id="l1477"> 1477</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1478" id="l1478"> 1478</a> Note that, since ''1px'' appears twice in the top margin and ''4px'' appears twice in bottom margin, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1479" id="l1479"> 1479</a> they will cycle between only two values </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1480" id="l1480"> 1480</a> while the left and right margins cycle through three. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1481" id="l1481"> 1481</a> In other words, the declarations above will yield the same computed values </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1482" id="l1482"> 1482</a> as the longhand declarations below: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1483" id="l1483"> 1483</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1484" id="l1484"> 1484</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1485" id="l1485"> 1485</a> margin-top: toggle(1px, 4px); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1486" id="l1486"> 1486</a> margin-right: toggle(2px, 4px, 5px); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1487" id="l1487"> 1487</a> margin-bottom: toggle(1px, 4px); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1488" id="l1488"> 1488</a> margin-left: toggle(2px, 4px, 5px); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1489" id="l1489"> 1489</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1490" id="l1490"> 1490</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1491" id="l1491"> 1491</a> which may not be what was intended. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1492" id="l1492"> 1492</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1493" id="l1493"> 1493</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1494" id="l1494"> 1494</a> <h3 id="var-notation"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1495" id="l1495"> 1495</a> Custom Property References: the ''var()'' notation</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1496" id="l1496"> 1496</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1497" id="l1497"> 1497</a> The ''var()'' notation substitutes the value of a [=custom property=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1498" id="l1498"> 1498</a> see the <a href="https://www.w3.org/TR/css-variables/#using-variables">CSS Custom Properties for Cascading Variables Module</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1499" id="l1499"> 1499</a> [[CSS-VARIABLES]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1500" id="l1500"> 1500</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1501" id="l1501"> 1501</a> <h3 id="inherit-notation"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1502" id="l1502"> 1502</a> Inherited Value References: the ''inherit()'' notation</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1503" id="l1503"> 1503</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1504" id="l1504"> 1504</a> Like the ''inherit'' keyword, the <dfn>inherit()</dfn> [=functional notation=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1505" id="l1505"> 1505</a> resolves to the [=computed value=] of a property on the parent. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1506" id="l1506"> 1506</a> Rather than resolving to the value of the same property, however, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1507" id="l1507"> 1507</a> it resolves to the tokenized [=computed value=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1508" id="l1508"> 1508</a> of the property specified as its first argument. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1509" id="l1509"> 1509</a> Its second argument, if present, is used as a fallback </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1510" id="l1510"> 1510</a> in case the first argument resolves to the [=guaranteed-invalid value=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1511" id="l1511"> 1511</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1512" id="l1512"> 1512</a> ''inherit()'' is an [=arbitrary substitution function=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1513" id="l1513"> 1513</a> whose syntax is defined as: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1514" id="l1514"> 1514</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1515" id="l1515"> 1515</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1516" id="l1516"> 1516</a> <dfn><<inherit()>></dfn> = inherit( <<custom-property-name>>, <<declaration-value>>? ) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1517" id="l1517"> 1517</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1518" id="l1518"> 1518</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1519" id="l1519"> 1519</a> To <dfn export>[=resolve an arbitrary substitution function|resolve an inherit() function=]</dfn>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1520" id="l1520"> 1520</a> return the [=inherited value=] of the [=custom property=] specified by the first argument, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1521" id="l1521"> 1521</a> and (if specified) the fallback specified by the second argument. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1522" id="l1522"> 1522</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1523" id="l1523"> 1523</a> Note: Future levels of CSS may allow specifying standard CSS properties in ''inherit()''; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1524" id="l1524"> 1524</a> however because the tokenization of [=computed values=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1525" id="l1525"> 1525</a> is not fully standardized for all CSS properties, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1526" id="l1526"> 1526</a> this feature is deferred from Level 5. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1527" id="l1527"> 1527</a> Note that the [=computed value=] differs from the [=used value=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1528" id="l1528"> 1528</a> and is not always the resolved value returned by {{getComputedStyle()}}; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1529" id="l1529"> 1529</a> thus even if ''inherit(width)'' were allowed, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1530" id="l1530"> 1530</a> it would frequently return the keyword ''width/auto'', not the used <<length>>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1531" id="l1531"> 1531</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1532" id="l1532"> 1532</a>  </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1542" id="l1542"> 1542</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1543" id="l1543"> 1543</a> <h3 id="attr-notation"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1544" id="l1544"> 1544</a> Attribute References: the ''attr()'' notation</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1545" id="l1545"> 1545</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1546" id="l1546"> 1546</a>  </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1550" id="l1550"> 1550</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1551" id="l1551"> 1551</a> The <dfn>attr()</dfn> function substitutes the value of an <l spec=dom>[=attribute=]</l> on an <l spec=dom>[=/element=]</l> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1552" id="l1552"> 1552</a> into a property, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1553" id="l1553"> 1553</a> similar to how the ''var()'' function </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1554" id="l1554"> 1554</a> substitutes a [=custom property=] value into a function. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1555" id="l1555"> 1555</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1556" id="l1556"> 1556</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1557" id="l1557"> 1557</a> attr() = attr( <<attr-name>> <<attr-type>>? , <<declaration-value>>?) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1558" id="l1558"> 1558</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1559" id="l1559"> 1559</a> <dfn>&lt;attr-name></dfn> = [ <<ident-token>> '|' ]? <<ident-token>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1560" id="l1560"> 1560</a> <dfn>&lt;attr-type></dfn> = type( <<syntax>> ) | string | <<attr-unit>> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1561" id="l1561"> 1561</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1562" id="l1562"> 1562</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1563" id="l1563"> 1563</a> The <dfn>&lt;attr-unit></dfn> production matches any [=identifier=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1564" id="l1564"> 1564</a> that is an [=ASCII case-insensitive=] match </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1565" id="l1565"> 1565</a> for the name of a CSS dimension unit, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1566" id="l1566"> 1566</a> such as ''px'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1567" id="l1567"> 1567</a> or the <<delim-token>> <css>%</css>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1568" id="l1568"> 1568</a> It is not expanded literally here, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1569" id="l1569"> 1569</a> as the set of units expands over time. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1570" id="l1570"> 1570</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1571" id="l1571"> 1571</a>  </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1574" id="l1574"> 1574</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1575" id="l1575"> 1575</a> The arguments of ''attr()'' are: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1576" id="l1576"> 1576</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1577" id="l1577"> 1577</a> : <<attr-name>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1578" id="l1578"> 1578</a> :: Gives the name of the attribute being referenced, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1579" id="l1579"> 1579</a> similar to <<wq-name>> (from [[SELECTORS-3]]) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1580" id="l1580"> 1580</a> but without the possibility of a wildcard prefix. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1581" id="l1581"> 1581</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1582" id="l1582"> 1582</a> If no namespace is specified </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1583" id="l1583"> 1583</a> (just an identifier is given, like ''attr(foo)''), </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1584" id="l1584"> 1584</a> the null namespace is implied. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1585" id="l1585"> 1585</a> (This is usually what's desired, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1586" id="l1586"> 1586</a> as namespaced attributes are rare. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1587" id="l1587"> 1587</a> In particular, HTML and SVG do not contain namespaced attributes.) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1588" id="l1588"> 1588</a> As with [=attribute selectors=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1589" id="l1589"> 1589</a> the case-sensitivity of <<attr-name>> depends on the document language. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1590" id="l1590"> 1590</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1591" id="l1591"> 1591</a> If ''attr()'' is used in a property applied to an element, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1592" id="l1592"> 1592</a> it references the attribute of the given name on that element; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1593" id="l1593"> 1593</a> if applied to a pseudo-element, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1594" id="l1594"> 1594</a> the attribute is looked up on the pseudo-element's [=originating element=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1595" id="l1595"> 1595</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1596" id="l1596"> 1596</a> : <<attr-type>> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1597" id="l1597"> 1597</a> :: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1598" id="l1598"> 1598</a> Specifies how the attribute value is [=CSS/parsed=] into a CSS value. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1599" id="l1599"> 1599</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1600" id="l1600"> 1600</a> If given as a ''type()'' function, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1601" id="l1601"> 1601</a> the value is parsed according to the <<syntax>> argument, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1602" id="l1602"> 1602</a> and substitutes as the resulting tokens. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1603" id="l1603"> 1603</a> Values that fail to parse according to the syntax </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1604" id="l1604"> 1604</a> trigger fallback. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1605" id="l1605"> 1605</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1606" id="l1606"> 1606</a> If given as an <<attr-unit>> value, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1607" id="l1607"> 1607</a> the value is first parsed as if <css>type(&lt;number>)</css> was specified, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1608" id="l1608"> 1608</a> then the resulting numeric value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1609" id="l1609"> 1609</a> is turned into a dimension with the corresponding unit, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1610" id="l1610"> 1610</a> or a percentage if <css>%</css> was given. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1611" id="l1611"> 1611</a> Values that fail to parse as a <css>&lt;number></css> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1612" id="l1612"> 1612</a> trigger fallback. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1613" id="l1613"> 1613</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1614" id="l1614"> 1614</a> If given as the <css>string</css> keyword, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1615" id="l1615"> 1615</a> or omitted entirely, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1616" id="l1616"> 1616</a> it causes the attribute's literal value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1617" id="l1617"> 1617</a> to be treated as the value of a CSS string, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1618" id="l1618"> 1618</a> with no CSS parsing performed at all </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1619" id="l1619"> 1619</a> (including CSS escapes, whitespace removal, comments, etc). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1620" id="l1620"> 1620</a> No value triggers fallback; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1621" id="l1621"> 1621</a> only the lack of the attribute entirely does. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1622" id="l1622"> 1622</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1623" id="l1623"> 1623</a> Note: This is different from specifying a syntax of ''type(*)'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1624" id="l1624"> 1624</a> which still triggers CSS parsing </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1625" id="l1625"> 1625</a> (but with no requirements placed on it </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1626" id="l1626"> 1626</a> beyond that it parse validly), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1627" id="l1627"> 1627</a> and which substitutes the result of that parsing directly as tokens, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1628" id="l1628"> 1628</a> rather than as a <<string>> value. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1629" id="l1629"> 1629</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1630" id="l1630"> 1630</a> : <<declaration-value>> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1631" id="l1631"> 1631</a> :: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1632" id="l1632"> 1632</a> Specifies a fallback value for the ''attr()'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1633" id="l1633"> 1633</a> which will be substituted instead of the attribute's value </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1634" id="l1634"> 1634</a> if the attribute is missing </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1635" id="l1635"> 1635</a> or fails to parse as the specified type. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1636" id="l1636"> 1636</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1637" id="l1637"> 1637</a> If the <<syntax>> argument is omitted, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1638" id="l1638"> 1638</a> the fallback defaults to the empty string if omitted; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1639" id="l1639"> 1639</a> otherwise, it defaults to the [=guaranteed-invalid value=] if omitted. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1640" id="l1640"> 1640</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1641" id="l1641"> 1641</a> If a property contains one or more ''attr()'' functions, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1642" id="l1642"> 1642</a> and those functions are syntactically valid, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1643" id="l1643"> 1643</a> the entire property's grammar must be assumed to be valid at parse time. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1644" id="l1644"> 1644</a> It is only syntax-checked at computed-value time, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1645" id="l1645"> 1645</a> after ''attr()'' functions have been [=substitute an attr()|substituted=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1646" id="l1646"> 1646</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1647" id="l1647"> 1647</a> <div class='note'> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1648" id="l1648"> 1648</a> Note that the default value need not be of the type given. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1649" id="l1649"> 1649</a> For instance, if the type required of the attribute by the author is ''&lt;number px>'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1650" id="l1650"> 1650</a> the default could still be <css>auto</css>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1651" id="l1651"> 1651</a> like in ''width: attr(size &lt;number px>, auto);''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1652" id="l1652"> 1652</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1653" id="l1653"> 1653</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1654" id="l1654"> 1654</a> <div class="example"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1655" id="l1655"> 1655</a> This example shows the use of attr() to visually illustrate data </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1656" id="l1656"> 1656</a> in an XML file: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1657" id="l1657"> 1657</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1658" id="l1658"> 1658</a> <xmp> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1659" id="l1659"> 1659</a> <stock> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1660" id="l1660"> 1660</a> <wood length="12"/> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1661" id="l1661"> 1661</a> <wood length="5"/> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1662" id="l1662"> 1662</a> <metal length="19"/> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1663" id="l1663"> 1663</a> <wood length="4"/> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1664" id="l1664"> 1664</a> </stock> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1665" id="l1665"> 1665</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1666" id="l1666"> 1666</a> stock::before { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1667" id="l1667"> 1667</a> display: block; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1668" id="l1668"> 1668</a> content: "To scale, the lengths of materials in stock are:"; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1669" id="l1669"> 1669</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1670" id="l1670"> 1670</a> stock > * { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1671" id="l1671"> 1671</a> display: block; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1672" id="l1672"> 1672</a> width: attr(length em, 0px); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1673" id="l1673"> 1673</a> height: 1em; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1674" id="l1674"> 1674</a> border: solid thin; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1675" id="l1675"> 1675</a> margin: 0.5em; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1676" id="l1676"> 1676</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1677" id="l1677"> 1677</a> wood { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1678" id="l1678"> 1678</a> background: orange url(wood.png); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1679" id="l1679"> 1679</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1680" id="l1680"> 1680</a> metal { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1681" id="l1681"> 1681</a> background: silver url(metal.png); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1682" id="l1682"> 1682</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1683" id="l1683"> 1683</a> </xmp> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1684" id="l1684"> 1684</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1685" id="l1685"> 1685</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1686" id="l1686"> 1686</a> <h4 id=attr-substitution> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1687" id="l1687"> 1687</a> Attribute Value Substitution: the ''attr()'' notation</h4> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1688" id="l1688"> 1688</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1689" id="l1689"> 1689</a> ''attr()'' is an [=arbitrary substitution function=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1690" id="l1690"> 1690</a> similar to ''var()'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1691" id="l1691"> 1691</a> and so is replaced with the value it represents (if possible) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1692" id="l1692"> 1692</a> at [=computed value=] time; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1693" id="l1693"> 1693</a> otherwise, it's replaced with the [=guaranteed-invalid value=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1694" id="l1694"> 1694</a> which will make its declaration [=invalid at computed-value time=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1695" id="l1695"> 1695</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1696" id="l1696"> 1696</a> <div algorithm> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1697" id="l1697"> 1697</a> To <dfn export>[=resolve an arbitrary substitution function|resolve an attr() function=]</dfn>: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1698" id="l1698"> 1698</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1699" id="l1699"> 1699</a> 1. Let |el| be the element that the style containing the ''attr()'' function </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1700" id="l1700"> 1700</a> is being applied to. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1701" id="l1701"> 1701</a> Let |attr name| be the attribute name specified in the function. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1702" id="l1702"> 1702</a> Let |syntax| be the <<syntax>> specified in the function, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1703" id="l1703"> 1703</a> or null if it was omitted. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1704" id="l1704"> 1704</a> Let |fallback| be the <<declaration-value>>? argument specified in the function, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1705" id="l1705"> 1705</a> or the [=guaranteed-invalid value=] if it was omitted. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1706" id="l1706"> 1706</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1707" id="l1707"> 1707</a> 2. If there is no attribute named |attr name| on |el|, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1708" id="l1708"> 1708</a> return the [=guaranteed-invalid value=] and |fallback|. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1709" id="l1709"> 1709</a> Otherwise, let |attr value| be that attribute's value. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1710" id="l1710"> 1710</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1711" id="l1711"> 1711</a> 3. If |syntax| is null, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1712" id="l1712"> 1712</a> return a CSS <<string>> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1713" id="l1713"> 1713</a> whose value is |attr value|. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1714" id="l1714"> 1714</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1715" id="l1715"> 1715</a> Note: No parsing or modification of any kind is performed on the value. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1716" id="l1716"> 1716</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1717" id="l1717"> 1717</a> 4. [=Parse with a &lt;syntax>=] |attr value|, with |syntax| and |el|. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1718" id="l1718"> 1718</a> Return the result and |fallback|. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1719" id="l1719"> 1719</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1720" id="l1720"> 1720</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1721" id="l1721"> 1721</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1722" id="l1722"> 1722</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1723" id="l1723"> 1723</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1724" id="l1724"> 1724</a> <h4 id=attr-security> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1725" id="l1725"> 1725</a> Security</h4> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1726" id="l1726"> 1726</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1727" id="l1727"> 1727</a> An ''attr()'' function can reference attributes </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1728" id="l1728"> 1728</a> that were never intended by the page to be used for styling, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1729" id="l1729"> 1729</a> and might contain sensitive information </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1730" id="l1730"> 1730</a> (for example, a security token used by scripts on the page). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1731" id="l1731"> 1731</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1732" id="l1732"> 1732</a> In general, this is fine. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1733" id="l1733"> 1733</a> It is difficult to use ''attr()'' to extract information from a page </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1734" id="l1734"> 1734</a> and send it to a hostile party, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1735" id="l1735"> 1735</a> in most circumstances. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1736" id="l1736"> 1736</a> The exception to this is URLs. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1737" id="l1737"> 1737</a> If a URL can be constructed with the value of an arbitrary attribute, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1738" id="l1738"> 1738</a> purely from CSS, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1739" id="l1739"> 1739</a> it can easily send any information stored in attributes </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1740" id="l1740"> 1740</a> to a hostile party, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1741" id="l1741"> 1741</a> if 3rd-party CSS is allowed at all. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1742" id="l1742"> 1742</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1743" id="l1743"> 1743</a> To guard against this, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1744" id="l1744"> 1744</a> the values produced by an ''attr()'' are considered <dfn export lt="attr()-taint">attr()-tainted</dfn>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1745" id="l1745"> 1745</a> as are functions that contain an [=attr()-tainted=] value. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1746" id="l1746"> 1746</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1747" id="l1747"> 1747</a> The substitution value of an [=arbitrary substitution function=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1748" id="l1748"> 1748</a> is [=attr()-tainted=] <em>as a whole</em> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1749" id="l1749"> 1749</a> if any [=attr()-tainted=] values were involved </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1750" id="l1750"> 1750</a> in creating that substitution value. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1751" id="l1751"> 1751</a> <span class=note>This extends to the [=equivalent token sequence=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1752" id="l1752"> 1752</a> when substituting values of [=registered custom properties=].</span> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1753" id="l1753"> 1753</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1754" id="l1754"> 1754</a> Using an [=attr()-tainted=] value as or in a <<url>> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1755" id="l1755"> 1755</a> makes a declaration [=invalid at computed-value time=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1756" id="l1756"> 1756</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1757" id="l1757"> 1757</a> <div class=example> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1758" id="l1758"> 1758</a> For example, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1759" id="l1759"> 1759</a> all of the following are [=invalid at computed-value time=]: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1760" id="l1760"> 1760</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1761" id="l1761"> 1761</a> * ''background-image: src(attr(foo));'' - can't use it directly. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1762" id="l1762"> 1762</a> * ''background-image: image(attr(foo))'' - can't use it in other <<url>>-taking functions. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1763" id="l1763"> 1763</a> * ''background-image: src(string("http://example.com/evil?token=" attr(foo)))'' - can't "launder" it thru another function. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1764" id="l1764"> 1764</a> * ''--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. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1765" id="l1765"> 1765</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1766" id="l1766"> 1766</a> However, using ''attr()'' for other purposes is fine, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1767" id="l1767"> 1767</a> even if the usage is <em>near</em> a url: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1768" id="l1768"> 1768</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1769" id="l1769"> 1769</a> * ''background-image: image("foo.jpg", attr(bgcolor type(&lt;color>)))'' is fine; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1770" id="l1770"> 1770</a> the ''attr()'' is providing a fallback color, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1771" id="l1771"> 1771</a> and the <<url>> isn't [=attr()-tainted=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1772" id="l1772"> 1772</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1773" id="l1773"> 1773</a> Using ''attr()'' indirectly via a [=custom property=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1774" id="l1774"> 1774</a> causes [=attr()-tainting=] of the whole custom property value: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1775" id="l1775"> 1775</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1776" id="l1776"> 1776</a> * ''--foo: image("foo.jpg", attr(bgcolor type(&lt;color&gt;))); background-image: var(--foo);'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1777" id="l1777"> 1777</a> is [=invalid at computed-value time=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1778" id="l1778"> 1778</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1779" id="l1779"> 1779</a> Issue: Investigate partial tainting of custom property values. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1780" id="l1780"> 1780</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1781" id="l1781"> 1781</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1782" id="l1782"> 1782</a> Note: Implementing this restriction </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1783" id="l1783"> 1783</a> requires tracking a dirty bit </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1784" id="l1784"> 1784</a> on values constructed from ''attr()'' values, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1785" id="l1785"> 1785</a> since they can be fully resolved into a string </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1786" id="l1786"> 1786</a> via [=registered custom properties=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1787" id="l1787"> 1787</a> so you can't rely on just examining the value expression. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1788" id="l1788"> 1788</a> Note that non-string types can even trigger this, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1789" id="l1789"> 1789</a> via functions like <css>string()</css> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1790" id="l1790"> 1790</a> that can stringify other types of values: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1791" id="l1791"> 1791</a> ''--foo: attr(foo type(&lt;number&gt;)); background-image: src(string(var(--foo)))'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1792" id="l1792"> 1792</a> needs to be invalid as well. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1793" id="l1793"> 1793</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1794" id="l1794"> 1794</a>  </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1804" id="l1804"> 1804</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1805" id="l1805"> 1805</a> <h2 id=randomness> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1806" id="l1806"> 1806</a> Generating Random Values</h2> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1807" id="l1807"> 1807</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1808" id="l1808"> 1808</a> It is often useful to incorporate some degree of "randomness" to a design, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1809" id="l1809"> 1809</a> either to make repeated elements on a page feel less static and identical, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1810" id="l1810"> 1810</a> or just to add a bit of "flair" to a page without being distracting. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1811" id="l1811"> 1811</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1812" id="l1812"> 1812</a> The ''random()'' and ''random-item()'' functions </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1813" id="l1813"> 1813</a> (the <dfn export for=CSS>random functions</dfn>) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1814" id="l1814"> 1814</a> allow authors to incorporate randomness into their page, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1815" id="l1815"> 1815</a> while keeping this randomness predictable from a design perspective, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1816" id="l1816"> 1816</a> letting authors decide whether a random value should be reused in several places </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1817" id="l1817"> 1817</a> or be unique between instances. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1818" id="l1818"> 1818</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1819" id="l1819"> 1819</a> The exact random-number generation method is UA-defined. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1820" id="l1820"> 1820</a> It <em>should</em> be the case that two distinct random values </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1821" id="l1821"> 1821</a> have no easily-detectable correlation, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1822" id="l1822"> 1822</a> but this specification intentionally does not specify what that means </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1823" id="l1823"> 1823</a> in terms of cryptographic strength. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1824" id="l1824"> 1824</a> Authors <em>must not</em> rely on [=random functions=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1825" id="l1825"> 1825</a> for any purposes that depend on quality cryptography. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1826" id="l1826"> 1826</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1827" id="l1827"> 1827</a> <h3 id=random> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1828" id="l1828"> 1828</a> Generating a Random Numeric Value: the ''random()'' function</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1829" id="l1829"> 1829</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1830" id="l1830"> 1830</a> The <dfn>random()</dfn> function is a [=math function=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1831" id="l1831"> 1831</a> that represents a random value between a minimum and maximum value, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1832" id="l1832"> 1832</a> drawn from a uniform distribution, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1833" id="l1833"> 1833</a> optionally limiting the possible values to a step between those limits: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1834" id="l1834"> 1834</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1835" id="l1835"> 1835</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1836" id="l1836"> 1836</a> &lt;random()> = random( <<random-caching-options>>? , <<calc-sum>>, <<calc-sum>>, [by <<calc-sum>>]? ) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1837" id="l1837"> 1837</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1838" id="l1838"> 1838</a> <dfn><<random-caching-options>></dfn> = <<dashed-ident>> || per-element </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1839" id="l1839"> 1839</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1840" id="l1840"> 1840</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1841" id="l1841"> 1841</a> Its arguments are: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1842" id="l1842"> 1842</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1843" id="l1843"> 1843</a> <dl> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1844" id="l1844"> 1844</a> : <<random-caching-options>> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1845" id="l1845"> 1845</a> :: The optional <<random-caching-options>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1846" id="l1846"> 1846</a> provides some control over whether a given ''random()'' function </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1847" id="l1847"> 1847</a> resolves similarly or differently to other ''random()''s on the page. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1848" id="l1848"> 1848</a> See [[#random-caching]] for details. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1849" id="l1849"> 1849</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1850" id="l1850"> 1850</a> <div class=note> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1851" id="l1851"> 1851</a> By default, ''random()'' resolves to a single value, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1852" id="l1852"> 1852</a> shared by all elements using that style, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1853" id="l1853"> 1853</a> and two ''random()'' functions with identical arguments </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1854" id="l1854"> 1854</a> will resolve to the same random value. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1855" id="l1855"> 1855</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1856" id="l1856"> 1856</a> Providing a <<dashed-ident>> does nothing, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1857" id="l1857"> 1857</a> but can make the argument lists distinct </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1858" id="l1858"> 1858</a> between two or more otherwise-identical ''random()'' functions, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1859" id="l1859"> 1859</a> so they'll generate distinct values. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1860" id="l1860"> 1860</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1861" id="l1861"> 1861</a> The ''per-element'' keyword causes the ''random()'' function </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1862" id="l1862"> 1862</a> to generate a different value <em>on each element</em> the function is applied to, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1863" id="l1863"> 1863</a> rather than resolving to a single value per usage in the stylesheet. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1864" id="l1864"> 1864</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1865" id="l1865"> 1865</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1866" id="l1866"> 1866</a> : <<calc-sum>>, <<calc-sum>> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1867" id="l1867"> 1867</a> :: The two required [=calculations=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1868" id="l1868"> 1868</a> specify the minimum and maximum value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1869" id="l1869"> 1869</a> the function can resolve to. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1870" id="l1870"> 1870</a> Both limits are inclusive </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1871" id="l1871"> 1871</a> (the result can be the min or the max). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1872" id="l1872"> 1872</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1873" id="l1873"> 1873</a> If the maximum value is less than the minimum value, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1874" id="l1874"> 1874</a> it behaves as if it's equal to the minimum value. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1875" id="l1875"> 1875</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1876" id="l1876"> 1876</a> <div class=example> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1877" id="l1877"> 1877</a> For example, ''random(100px, 300px)'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1878" id="l1878"> 1878</a> will resolve to a random <<length>> between ''100px'' and ''300px'': </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1879" id="l1879"> 1879</a> it might be ''100px'', ''300px'', or any value between them like ''234.5px''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1880" id="l1880"> 1880</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1881" id="l1881"> 1881</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1882" id="l1882"> 1882</a> : ''by <<calc-sum>>'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1883" id="l1883"> 1883</a> :: The final optional argument </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1884" id="l1884"> 1884</a> specifies a step value: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1885" id="l1885"> 1885</a> the values the function can resolve to </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1886" id="l1886"> 1886</a> are further restricted to the form <code>min + (N * step)</code>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1887" id="l1887"> 1887</a> where N is a non-negative integer </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1888" id="l1888"> 1888</a> chosen uniformly randomly from the possible values </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1889" id="l1889"> 1889</a> that result in an in-range value. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1890" id="l1890"> 1890</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1891" id="l1891"> 1891</a> <div class=example> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1892" id="l1892"> 1892</a> For example, ''random(100px, 300px, by 50px)'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1893" id="l1893"> 1893</a> can only resolve to ''100px'', ''150px'', ''200px'', ''250px'', or ''300px''; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1894" id="l1894"> 1894</a> it will never return a value like ''120px''. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1895" id="l1895"> 1895</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1896" id="l1896"> 1896</a> While the minimum value is always a possible result, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1897" id="l1897"> 1897</a> the maximum value isn't always, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1898" id="l1898"> 1898</a> if it's not also a multiple of the step from the minimum. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1899" id="l1899"> 1899</a> For example, in ''random(100px, 300px, by 30px)'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1900" id="l1900"> 1900</a> the largest possible value it can resolve to is ''280px'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1901" id="l1901"> 1901</a> 6 steps from the minimum value. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1902" id="l1902"> 1902</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1903" id="l1903"> 1903</a> Note that rounding issues might have an effect here: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1904" id="l1904"> 1904</a> in ''random(100px, 200px, by 100px / 3)'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1905" id="l1905"> 1905</a> you'll definitely get three possible values </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1906" id="l1906"> 1906</a> (''100px'', and approximately ''133.33px'' and ''166.67px''), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1907" id="l1907"> 1907</a> but whether ''200px'' is possible depends on rounding precision. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1908" id="l1908"> 1908</a> To be safe, you can put the maximum value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1909" id="l1909"> 1909</a> <em>slightly above</em> where you expect the final step to land, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1910" id="l1910"> 1910</a> like ''random(100px, 201px, by 100px / 3)''. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1911" id="l1911"> 1911</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1912" id="l1912"> 1912</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1913" id="l1913"> 1913</a> <div class=example> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1914" id="l1914"> 1914</a> As explained in the definition of ''round()'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1915" id="l1915"> 1915</a> CSS has no "natural" precision for values, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1916" id="l1916"> 1916</a> but the step value can be used to assign one. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1917" id="l1917"> 1917</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1918" id="l1918"> 1918</a> For example, ''random(100px, 500px, by 1px)'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1919" id="l1919"> 1919</a> restricts it to resolving only to whole px values; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1920" id="l1920"> 1920</a> ''random(1, 10, by 1)'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1921" id="l1921"> 1921</a> is restricted to resolving only to integers; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1922" id="l1922"> 1922</a> etc. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1923" id="l1923"> 1923</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1924" id="l1924"> 1924</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1925" id="l1925"> 1925</a> Note: The definition of the step <em>does not</em> allow </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1926" id="l1926"> 1926</a> for naively generating a random value in the range </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1927" id="l1927"> 1927</a> and then rounding it to the nearest step value, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1928" id="l1928"> 1928</a> as that can result in the values not appearing with the same weights. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1929" id="l1929"> 1929</a> For example, ''random(100px, 200px, by 50px)'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1930" id="l1930"> 1930</a> has to generate the three possible values each with a 1/3 chance; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1931" id="l1931"> 1931</a> a naive rounding-based method will instead incorrectly generate ''150px'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1932" id="l1932"> 1932</a> twice as often as the boundary values. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1933" id="l1933"> 1933</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1934" id="l1934"> 1934</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1935" id="l1935"> 1935</a> All of the [=calculation=] arguments can resolve to any <<number>>, <<dimension>>, or <<percentage>>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1936" id="l1936"> 1936</a> but must have the <em>same</em> [=determine the type of a calculation|type=], or else the function is invalid; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1937" id="l1937"> 1937</a> the result will have the same type as the arguments. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1938" id="l1938"> 1938</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1939" id="l1939"> 1939</a> <div class=example> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1940" id="l1940"> 1940</a> For example, ''random(50px, 100%, by 1em)'' is valid </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1941" id="l1941"> 1941</a> (assuming percentages are valid in the context this is used, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1942" id="l1942"> 1942</a> and resolve to a <<length>>), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1943" id="l1943"> 1943</a> as all three arguments resolve to a length. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1944" id="l1944"> 1944</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1945" id="l1945"> 1945</a> However, ''random(50px, 180deg)'' is invalid, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1946" id="l1946"> 1946</a> as lengths and angles are not the same type. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1947" id="l1947"> 1947</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1948" id="l1948"> 1948</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1949" id="l1949"> 1949</a> A ''random()'' function can be [=simplify a calculation tree|simplified=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1950" id="l1950"> 1950</a> as soon as its argument [=calculations=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1951" id="l1951"> 1951</a> can be simplified to numeric values. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1952" id="l1952"> 1952</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1953" id="l1953"> 1953</a> Note: This means that ''random()'' is <em>usually</em> resolved </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1954" id="l1954"> 1954</a> by [=computed value=] time, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1955" id="l1955"> 1955</a> and thus will inherit as a static numeric value. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1956" id="l1956"> 1956</a> However, if the argument [=calculations=] aren't resolved </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1957" id="l1957"> 1957</a> until [=used value=] time </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1958" id="l1958"> 1958</a> (such as if they include <<percentage>> values </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1959" id="l1959"> 1959</a> that require layout information to resolve), </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1960" id="l1960"> 1960</a> [=inheritance=] will transfer the ''random()'' function itself. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1961" id="l1961"> 1961</a> (This is no different, however, to the behavior of the <<percentage>>s themselves, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1962" id="l1962"> 1962</a> which would inherit as <<percentage>>s </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1963" id="l1963"> 1963</a> and thus might resolve to different values on the child elements.) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1964" id="l1964"> 1964</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1965" id="l1965"> 1965</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1966" id="l1966"> 1966</a> Issue: At least in theory it should be fine to use ''random()'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1967" id="l1967"> 1967</a> in non-property contexts, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1968" id="l1968"> 1968</a> so long as ''per-element'' isn't specified; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1969" id="l1969"> 1969</a> it's well-defined what happens with <code>@media (max-width: random(100px, 500px)) {...}</code>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1970" id="l1970"> 1970</a> for example. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1971" id="l1971"> 1971</a> I suspect we want to disallow it, tho? </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1972" id="l1972"> 1972</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1973" id="l1973"> 1973</a> <h4 id=random-infinities> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1974" id="l1974"> 1974</a> Argument Ranges</h4> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1975" id="l1975"> 1975</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1976" id="l1976"> 1976</a> In ''random(A, B, by C)'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1977" id="l1977"> 1977</a> if A or B is infinite, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1978" id="l1978"> 1978</a> the result is NaN. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1979" id="l1979"> 1979</a> If C is infinite, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1980" id="l1980"> 1980</a> the result is A. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1981" id="l1981"> 1981</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1982" id="l1982"> 1982</a> (If C is zero or negative, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1983" id="l1983"> 1983</a> the result is A, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1984" id="l1984"> 1984</a> but that falls out of the standard definition.) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1985" id="l1985"> 1985</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1986" id="l1986"> 1986</a> Note: As usual for [=math functions=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1987" id="l1987"> 1987</a> if any argument calculation is NaN, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1988" id="l1988"> 1988</a> the result is NaN. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1989" id="l1989"> 1989</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1990" id="l1990"> 1990</a> <h3 id=random-item> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1991" id="l1991"> 1991</a> Picking a Random Item From a List: the ''random-item()'' function</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1992" id="l1992"> 1992</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1993" id="l1993"> 1993</a> The <dfn>random-item()</dfn> function </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1994" id="l1994"> 1994</a> resolves to a random item </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1995" id="l1995"> 1995</a> from among its list of items. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1996" id="l1996"> 1996</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1997" id="l1997"> 1997</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1998" id="l1998"> 1998</a> &lt;random-item()> = random-item( <<random-caching-options>> , [ <<declaration-value>>? ]# ) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1999" id="l1999"> 1999</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2000" id="l2000"> 2000</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2001" id="l2001"> 2001</a> The <em>required</em> <<random-caching-options>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2002" id="l2002"> 2002</a> is interpreted identically to ''random()''. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2003" id="l2003"> 2003</a> (See [[#random-caching]] for details.) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2004" id="l2004"> 2004</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2005" id="l2005"> 2005</a> <div class=note> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2006" id="l2006"> 2006</a> Like ''random()'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2007" id="l2007"> 2007</a> the <<dashed-ident>> can be used to force similar ''random-item()'' functions </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2008" id="l2008"> 2008</a> to generate distinct random values, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2009" id="l2009"> 2009</a> and ''per-element'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2010" id="l2010"> 2010</a> causes it to resolve to a distinct value on each element. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2011" id="l2011"> 2011</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2012" id="l2012"> 2012</a> Aside from these, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2013" id="l2013"> 2013</a> the grouping of ''random-item()'' functions as "identical" </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2014" id="l2014"> 2014</a> is much simpler: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2015" id="l2015"> 2015</a> all that matters is the number of arguments. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2016" id="l2016"> 2016</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2017" id="l2017"> 2017</a> That is, ''random-item(--x, red, blue, green)'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2018" id="l2018"> 2018</a> and ''random-item(--x, 1, 2, 3)'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2019" id="l2019"> 2019</a> will always resolve to the same argument index: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2020" id="l2020"> 2020</a> either ''red'' and ''1'', or ''blue'' and ''2'', or ''green'' and ''3''. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2021" id="l2021"> 2021</a> This allows coordination between groups of properties </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2022" id="l2022"> 2022</a> that all want to use a random set of values. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2023" id="l2023"> 2023</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2024" id="l2024"> 2024</a> On the other hand, ''random-item(--x, red, blue, green)'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2025" id="l2025"> 2025</a> and ''random-item(--x, 1, 2, 3, 4)'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2026" id="l2026"> 2026</a> will have no connection to each other; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2027" id="l2027"> 2027</a> any of the 12 possible combinations can occur. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2028" id="l2028"> 2028</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2029" id="l2029"> 2029</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2030" id="l2030"> 2030</a> Note: The <<random-caching-options>> argument is required in ''random-item()'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2031" id="l2031"> 2031</a> but optional in ''random()'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2032" id="l2032"> 2032</a> both for parsing reasons </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2033" id="l2033"> 2033</a> (it's impossible to tell whether ''random-item(--foo, --bar, --baz)'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2034" id="l2034"> 2034</a> has three <<declaration-value>> arguments </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2035" id="l2035"> 2035</a> or two and a <<random-caching-options>> argument), </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2036" id="l2036"> 2036</a> and because accidentally associating the random generation of ''random-item()'' functions together </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2037" id="l2037"> 2037</a> is much easier to do accidentally, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2038" id="l2038"> 2038</a> since only the number of arguments is used to distinguish instances. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2039" id="l2039"> 2039</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2040" id="l2040"> 2040</a> The remaining arguments are arbitrary sequences of CSS values. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2041" id="l2041"> 2041</a> The ''random-item()'' function resolves to one of these sequences, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2042" id="l2042"> 2042</a> chosen uniformly at random. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2043" id="l2043"> 2043</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2044" id="l2044"> 2044</a> The ''random-item()'' function is an [=arbitrary substitution function=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2045" id="l2045"> 2045</a> like ''var()''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2046" id="l2046"> 2046</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2047" id="l2047"> 2047</a> <div class=note> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2048" id="l2048"> 2048</a> That is, if you use ''random-item()'': </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2049" id="l2049"> 2049</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2050" id="l2050"> 2050</a> * So long as ''random-item()'' itself (and any other [=arbitrary substitution functions=]) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2051" id="l2051"> 2051</a> is syntactically valid, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2052" id="l2052"> 2052</a> the entire property is assumed to be valid at parse time. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2053" id="l2053"> 2053</a> * ''random-item()'' is substituted with whatever value it resolves to </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2054" id="l2054"> 2054</a> at [=computed value=] time </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2055" id="l2055"> 2055</a> when you'd [=substitute a var()=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2056" id="l2056"> 2056</a> so children all inherit the same resolved value. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2057" id="l2057"> 2057</a> * If the substituted value ends up making the property invalid, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2058" id="l2058"> 2058</a> the property's value becomes the [=guaranteed-invalid value=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2059" id="l2059"> 2059</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2060" id="l2060"> 2060</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2061" id="l2061"> 2061</a> Issue: Define [=arbitrary substitution function=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2062" id="l2062"> 2062</a> probably over in Variables, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2063" id="l2063"> 2063</a> since we have several upcoming functions leaning on this functionality. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2064" id="l2064"> 2064</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2065" id="l2065"> 2065</a> Issue: Since ''random-item()'' is var()-like, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2066" id="l2066"> 2066</a> we probably want to restrict it to only be usable in properties. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2067" id="l2067"> 2067</a> (This is likely something we want to apply to all such functions.) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2068" id="l2068"> 2068</a> Tho ''random()'' is a fundamentally different kind of value, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2069" id="l2069"> 2069</a> we probably want to restrict it as well, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2070" id="l2070"> 2070</a> for thematic consistency. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2071" id="l2071"> 2071</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2072" id="l2072"> 2072</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2073" id="l2073"> 2073</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2074" id="l2074"> 2074</a> <h3 id=random-caching> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2075" id="l2075"> 2075</a> Generating/Caching Random Values: the <<random-caching-options>> value</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2076" id="l2076"> 2076</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2077" id="l2077"> 2077</a> In a programming language like JavaScript, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2078" id="l2078"> 2078</a> there's a clear temporal ordering to code, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2079" id="l2079"> 2079</a> so you can tell exactly <em>when</em> something like a call to {{Math/random()|Math.random()}} is evaluated. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2080" id="l2080"> 2080</a> You can also store the results in a variable, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2081" id="l2081"> 2081</a> making it clear when you're reusing a single random value in multiple places, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2082" id="l2082"> 2082</a> versus using a distinct random value in each location. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2083" id="l2083"> 2083</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2084" id="l2084"> 2084</a> CSS, on the other hand, is a declarative language </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2085" id="l2085"> 2085</a> (code is not "executed" in any particular order, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2086" id="l2086"> 2086</a> nor is there any control over how many times something is "executed"); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2087" id="l2087"> 2087</a> it makes it very easy to apply identical styles to multiple elements </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2088" id="l2088"> 2088</a> but difficult to specify distinct values for each of them </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2089" id="l2089"> 2089</a> (making it unclear whether a property using ''random()'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2090" id="l2090"> 2090</a> is meant to resolve to the same value on each element it's applied to </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2091" id="l2091"> 2091</a> or to distinct values on each); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2092" id="l2092"> 2092</a> and it has very limited "variable" functionality </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2093" id="l2093"> 2093</a> (making it difficult to intentionally reuse a particular randomly-generated value in several places). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2094" id="l2094"> 2094</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2095" id="l2095"> 2095</a> To resolve these issues, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2096" id="l2096"> 2096</a> the ''random()'' and ''random-item()'' functions are defined to generate random values </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2097" id="l2097"> 2097</a> under the following caching semantics: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2098" id="l2098"> 2098</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2099" id="l2099"> 2099</a> * Each instance of ''random()'' or ''random-item()'' in a stylesheet </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2100" id="l2100"> 2100</a> specifies a <dfn>random-caching key</dfn>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2101" id="l2101"> 2101</a> Two instances of either function must resolve to <em>identical</em> values </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2102" id="l2102"> 2102</a> if their [=random-caching keys=] are identical; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2103" id="l2103"> 2103</a> they must resolve to <em>distinct</em> values </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2104" id="l2104"> 2104</a> if they're different. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2105" id="l2105"> 2105</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2106" id="l2106"> 2106</a> ("Distinct" here means generated by a fresh random operation; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2107" id="l2107"> 2107</a> this might coincidentally result in the same value as another random operation.) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2108" id="l2108"> 2108</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2109" id="l2109"> 2109</a> * For ''random()'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2110" id="l2110"> 2110</a> the [=random-caching key=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2111" id="l2111"> 2111</a> is a [=tuple=] of: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2112" id="l2112"> 2112</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2113" id="l2113"> 2113</a> 1. The [=used value=] of the minimum [=calculation=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2114" id="l2114"> 2114</a> 2. The [=used value=] of the maximum [=calculation=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2115" id="l2115"> 2115</a> 3. The [=used value=] of the step [=calculation=], if present, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2116" id="l2116"> 2116</a> or null otherwise. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2117" id="l2117"> 2117</a> 4. The <<dashed-ident>> part of the <<random-caching-options>>, if present, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2118" id="l2118"> 2118</a> or null otherwise. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2119" id="l2119"> 2119</a> 5. If ''per-element'' is specified in the <<random-caching-options>>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2120" id="l2120"> 2120</a> a unique value per element or pseudo-element the function appears in. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2121" id="l2121"> 2121</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2122" id="l2122"> 2122</a> * For ''random-item()'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2123" id="l2123"> 2123</a> the [=random-caching key=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2124" id="l2124"> 2124</a> is a [=tuple=] of: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2125" id="l2125"> 2125</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2126" id="l2126"> 2126</a> 1. The number of arguments to the function. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2127" id="l2127"> 2127</a> 2. The <<dashed-ident>> part of the <<random-caching-options>>, if present, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2128" id="l2128"> 2128</a> or null otherwise. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2129" id="l2129"> 2129</a> 3. If ''per-element'' is specified in the <<random-caching-options>>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2130" id="l2130"> 2130</a> a unique value per element or pseudo-element the function appears in. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2131" id="l2131"> 2131</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2132" id="l2132"> 2132</a> The "unique value per element or pseudo-element" must have the same lifetime </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2133" id="l2133"> 2133</a> as a JavaScript reference to the element </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2134" id="l2134"> 2134</a> (or to the [=originating element=] + sufficient additional info to uniquely identify the pseudo-element). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2135" id="l2135"> 2135</a> Elements in separate documents </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2136" id="l2136"> 2136</a> (including across refreshes of the same page, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2137" id="l2137"> 2137</a> which produces distinct documents with distinct elements) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2138" id="l2138"> 2138</a> <em>should</em> have distinct unique values. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2139" id="l2139"> 2139</a> (This is not strictly required, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2140" id="l2140"> 2140</a> to allow for pseudo-random generation of these values, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2141" id="l2141"> 2141</a> but uniqueness should be likely enough </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2142" id="l2142"> 2142</a> that authors cannot depend on elements having the same values across documents.) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2143" id="l2143"> 2143</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2144" id="l2144"> 2144</a> Additionally, the random generation method <em>should</em> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2145" id="l2145"> 2145</a> generate distinct values for the same operation </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2146" id="l2146"> 2146</a> when invoked on different documents </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2147" id="l2147"> 2147</a> (including refreshes of the same page). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2148" id="l2148"> 2148</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2149" id="l2149"> 2149</a> <div class=example> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2150" id="l2150"> 2150</a> For example, in the following stylesheet: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2151" id="l2151"> 2151</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2152" id="l2152"> 2152</a> <pre highlight=css> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2153" id="l2153"> 2153</a> .random-square { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2154" id="l2154"> 2154</a> width: random(100px, 500px); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2155" id="l2155"> 2155</a> height: random(100px, 500px); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2156" id="l2156"> 2156</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2157" id="l2157"> 2157</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2158" id="l2158"> 2158</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2159" id="l2159"> 2159</a> The [=random-caching keys=] for both functions are identical: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2160" id="l2160"> 2160</a> <code>(100px, 500px, null, null, null)</code>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2161" id="l2161"> 2161</a> This means that both will resolve to the exact same value, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2162" id="l2162"> 2162</a> guaranteeing a square element </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2163" id="l2163"> 2163</a> with a size somewhere between ''100px'' and ''500px''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2164" id="l2164"> 2164</a> Additionally, <em>every</em> ''.random-square'' element </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2165" id="l2165"> 2165</a> will have the same size. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2166" id="l2166"> 2166</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2167" id="l2167"> 2167</a> On other hand, in this stylesheet: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2168" id="l2168"> 2168</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2169" id="l2169"> 2169</a> <pre highlight=css> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2170" id="l2170"> 2170</a> .random-rect { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2171" id="l2171"> 2171</a> width: random(100px, 500px); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2172" id="l2172"> 2172</a> height: random(--x, 100px, 500px); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2173" id="l2173"> 2173</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2174" id="l2174"> 2174</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2175" id="l2175"> 2175</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2176" id="l2176"> 2176</a> The [=random-caching keys=] are distinct between the two functions: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2177" id="l2177"> 2177</a> the function in 'width' has <code>(100px, 500px, null, null, null)</code>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2178" id="l2178"> 2178</a> while the function in 'height' has <code>(100px, 500px, null, --x, null)</code>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2179" id="l2179"> 2179</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2180" id="l2180"> 2180</a> This means the two functions will resolve to distinct random values, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2181" id="l2181"> 2181</a> making it very unlikely for the element to be square. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2182" id="l2182"> 2182</a> However, every element matching ''.random-rect'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2183" id="l2183"> 2183</a> will still have the <em>same</em> random size. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2184" id="l2184"> 2184</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2185" id="l2185"> 2185</a> Changing any aspect of the function also alters this key. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2186" id="l2186"> 2186</a> The following two declarations are similarly distinct, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2187" id="l2187"> 2187</a> resulting in the width and height having no connection to each other: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2188" id="l2188"> 2188</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2189" id="l2189"> 2189</a> <pre highlight=css> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2190" id="l2190"> 2190</a> .random-rect-2 { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2191" id="l2191"> 2191</a> width: random(100px, 500px); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2192" id="l2192"> 2192</a> height: random(100px, 500px, by 50px); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2193" id="l2193"> 2193</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2194" id="l2194"> 2194</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2195" id="l2195"> 2195</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2196" id="l2196"> 2196</a> But so long as the [=used values=] end up identical, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2197" id="l2197"> 2197</a> two functions that look distinct might end up identical. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2198" id="l2198"> 2198</a> For example, in the following code: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2199" id="l2199"> 2199</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2200" id="l2200"> 2200</a> <pre highlight=css> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2201" id="l2201"> 2201</a> .random-square-2 { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2202" id="l2202"> 2202</a> font-size: 16px; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2203" id="l2203"> 2203</a> width: random(160px, 320px); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2204" id="l2204"> 2204</a> height: random(10em, 20em); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2205" id="l2205"> 2205</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2206" id="l2206"> 2206</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2207" id="l2207"> 2207</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2208" id="l2208"> 2208</a> The two functions superficially look different, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2209" id="l2209"> 2209</a> but after the lengths are fully resolved </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2210" id="l2210"> 2210</a> they end up with identical [=random-caching keys=]; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2211" id="l2211"> 2211</a> each is <code>(160px, 320px, null, null, null)</code>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2212" id="l2212"> 2212</a> so actually the widths and heights will end up always identical. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2213" id="l2213"> 2213</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2214" id="l2214"> 2214</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2215" id="l2215"> 2215</a> <div class=example> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2216" id="l2216"> 2216</a> By default, each instance of a ''random()'' function in a stylesheet </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2217" id="l2217"> 2217</a> essentially resolves to a static value, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2218" id="l2218"> 2218</a> which is then shared by every element that property applies to. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2219" id="l2219"> 2219</a> This behavior can be changed with the ''per-element'' keyword. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2220" id="l2220"> 2220</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2221" id="l2221"> 2221</a> For example, in: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2222" id="l2222"> 2222</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2223" id="l2223"> 2223</a> <pre highlight=css> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2224" id="l2224"> 2224</a> .foo { width: random(100px, 500px); } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2225" id="l2225"> 2225</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2226" id="l2226"> 2226</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2227" id="l2227"> 2227</a> Multiple elements matching ''.foo'' will end up with the same random width. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2228" id="l2228"> 2228</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2229" id="l2229"> 2229</a> But in: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2230" id="l2230"> 2230</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2231" id="l2231"> 2231</a> <pre highlight=css> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2232" id="l2232"> 2232</a> .foo { width: random(per-element, 100px, 500px); } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2233" id="l2233"> 2233</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2234" id="l2234"> 2234</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2235" id="l2235"> 2235</a> Every element matching ''.foo'' will get its own <em>unique</em> width. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2236" id="l2236"> 2236</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2237" id="l2237"> 2237</a> Note that this causes the value to be unique per element, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2238" id="l2238"> 2238</a> not per <em>value</em> necessarily. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2239" id="l2239"> 2239</a> For example, in: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2240" id="l2240"> 2240</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2241" id="l2241"> 2241</a> <pre highlight=css> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2242" id="l2242"> 2242</a> .random-squares { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2243" id="l2243"> 2243</a> width: random(per-element, 100px, 500px); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2244" id="l2244"> 2244</a> height: random(per-element, 100px, 500px); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2245" id="l2245"> 2245</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2246" id="l2246"> 2246</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2247" id="l2247"> 2247</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2248" id="l2248"> 2248</a> Every element matching ''.random-squares'' will get a distinct random value, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2249" id="l2249"> 2249</a> but that value will be <em>the same</em> for 'width' and 'height' on a given element, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2250" id="l2250"> 2250</a> making the element square. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2251" id="l2251"> 2251</a> This is because in both properties </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2252" id="l2252"> 2252</a> the [=random-caching key=] is <code>(100px, 500px, null, null, [unique value for the element])</code>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2253" id="l2253"> 2253</a> so both functions will resolve to the same length on a single element. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2254" id="l2254"> 2254</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2255" id="l2255"> 2255</a> This makes random values in [=custom properties=] act more predictably. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2256" id="l2256"> 2256</a> The preceding code could also be written as: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2257" id="l2257"> 2257</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2258" id="l2258"> 2258</a> <pre highlight=css> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2259" id="l2259"> 2259</a> .foo { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2260" id="l2260"> 2260</a> --size: random(per-element, 100px, 500px); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2261" id="l2261"> 2261</a> width: var(--size); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2262" id="l2262"> 2262</a> height: var(--size); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2263" id="l2263"> 2263</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2264" id="l2264"> 2264</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2265" id="l2265"> 2265</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2266" id="l2266"> 2266</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2267" id="l2267"> 2267</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2268" id="l2268"> 2268</a>  </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2278" id="l2278"> 2278</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2279" id="l2279"> 2279</a> <h2 id="tree-counting"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2280" id="l2280"> 2280</a> Tree Counting Functions: the ''sibling-count()'' and ''sibling-index()'' notations</h2> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2281" id="l2281"> 2281</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2282" id="l2282"> 2282</a> The <dfn>sibling-count()</dfn> [=functional notation=] represents, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2283" id="l2283"> 2283</a> as an <<integer>>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2284" id="l2284"> 2284</a> the total number of child <l spec=css-display-3>[=elements=]</l> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2285" id="l2285"> 2285</a> in the parent of the element on which the notation is used. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2286" id="l2286"> 2286</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2287" id="l2287"> 2287</a> The <dfn>sibling-index()</dfn> [=functional notation=] represents, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2288" id="l2288"> 2288</a> as an <<integer>>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2289" id="l2289"> 2289</a> the index of the element </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2290" id="l2290"> 2290</a> on which the notation is used </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2291" id="l2291"> 2291</a> among the children of its parent. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2292" id="l2292"> 2292</a> Like '':nth-child()'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2293" id="l2293"> 2293</a> ''sibling-index()'' is 1-indexed. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2294" id="l2294"> 2294</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2295" id="l2295"> 2295</a> Note: The ''counter()'' function can provide similar abilities as ''sibling-index()'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2296" id="l2296"> 2296</a> but returns a <<string>> rather than an <<integer>>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2297" id="l2297"> 2297</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2298" id="l2298"> 2298</a> When used on a [=pseudo-element=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2299" id="l2299"> 2299</a> these both resolve as if specified </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2300" id="l2300"> 2300</a> on its [=ultimate originating element=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2301" id="l2301"> 2301</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2302" id="l2302"> 2302</a> Note: Like the rest of CSS (other than [=selectors=]), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2303" id="l2303"> 2303</a> ''sibling-count()'' and ''sibling-index()'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2304" id="l2304"> 2304</a> operate on the [=flat tree=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2305" id="l2305"> 2305</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2306" id="l2306"> 2306</a> Note: These functions may, in the future, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2307" id="l2307"> 2307</a> be extended to accept an ''of <<selector>>'' argument, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2308" id="l2308"> 2308</a> similar to '':nth-child()'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2309" id="l2309"> 2309</a> to filter on a subset of the children. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2310" id="l2310"> 2310</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2311" id="l2311"> 2311</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2312" id="l2312"> 2312</a>  </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2322" id="l2322"> 2322</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2323" id="l2323"> 2323</a> <h2 id=calc-size> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2324" id="l2324"> 2324</a> Calculating With Intrinsic Sizes: the ''calc-size()'' function</h2> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2325" id="l2325"> 2325</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2326" id="l2326"> 2326</a> When transitioning between two [=definite=] sizes, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2327" id="l2327"> 2327</a> or slightly adjusting an existing definite size, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2328" id="l2328"> 2328</a> ''calc()'' works great: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2329" id="l2329"> 2329</a> halfway between ''100%'' and ''20px'' is ''calc(50% + 10px)'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2330" id="l2330"> 2330</a> ''20%'' with a margin of ''15px'' on either side is ''calc(20% + 15px * 2)'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2331" id="l2331"> 2331</a> etc. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2332" id="l2332"> 2332</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2333" id="l2333"> 2333</a> But these operations are no longer possible if the size you want to adjust </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2334" id="l2334"> 2334</a> or transition to/from </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2335" id="l2335"> 2335</a> is an [=intrinsic size=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2336" id="l2336"> 2336</a> for both practical and backward-compatibility reasons. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2337" id="l2337"> 2337</a> The ''calc-size()'' function </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2338" id="l2338"> 2338</a> allows math to be performed on intrinsic sizes </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2339" id="l2339"> 2339</a> in a safe, well-defined way. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2340" id="l2340"> 2340</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2341" id="l2341"> 2341</a> <pre class=prod> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2342" id="l2342"> 2342</a> <dfn function lt="calc-size()">&lt;calc-size()></dfn> = calc-size( <<calc-size-basis>>, <<calc-sum>> ) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2343" id="l2343"> 2343</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2344" id="l2344"> 2344</a> <dfn>&lt;calc-size-basis></dfn> = [ <<intrinsic-size-keyword>> | <<calc-size()>> | any | <<calc-sum>> ] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2345" id="l2345"> 2345</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2346" id="l2346"> 2346</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2347" id="l2347"> 2347</a> The <dfn>&lt;intrinsic-size-keyword></dfn> production </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2348" id="l2348"> 2348</a> matches any [=intrinsic size=] keywords allowed in the context. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2349" id="l2349"> 2349</a> For example, in 'width', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2350" id="l2350"> 2350</a> it matches ''width/auto'', ''width/min-content'', ''width/stretch'', etc. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2351" id="l2351"> 2351</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2352" id="l2352"> 2352</a> <details class=note> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2353" id="l2353"> 2353</a> <summary>Why can ''calc-size()'' be nested?</summary> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2354" id="l2354"> 2354</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2355" id="l2355"> 2355</a> Allowing ''calc-size()'' as the basis argument </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2356" id="l2356"> 2356</a> means that authors can use a variable as the basis </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2357" id="l2357"> 2357</a> (like ''calc-size(var(--foo), size + 20px)'') </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2358" id="l2358"> 2358</a> and it will <em>always work</em> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2359" id="l2359"> 2359</a> as long as the variable was originally valid for the property. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2360" id="l2360"> 2360</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2361" id="l2361"> 2361</a> Doing the same with just ''calc()'' doesn't work - </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2362" id="l2362"> 2362</a> for example, if you have ''--foo: calc-size(min-content, size + 20px)'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2363" id="l2363"> 2363</a> or even just ''--foo: min-content'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2364" id="l2364"> 2364</a> then ''calc( (var(--foo)) + 20px )'' fails. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2365" id="l2365"> 2365</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2366" id="l2366"> 2366</a> The nesting is simplified away during interpolation, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2367" id="l2367"> 2367</a> and at used-value time, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2368" id="l2368"> 2368</a> so the basis always ends up as a simple value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2369" id="l2369"> 2369</a> by the time interpolation and other effects occur; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2370" id="l2370"> 2370</a> see [[#simplifying-calc-size]]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2371" id="l2371"> 2371</a> </details> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2372" id="l2372"> 2372</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2373" id="l2373"> 2373</a> The first argument given is the <dfn>calc-size basis</dfn>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2374" id="l2374"> 2374</a> and the second is the <dfn>calc-size calculation</dfn>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2375" id="l2375"> 2375</a> For either argument, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2376" id="l2376"> 2376</a> if a <<calc-sum>> is given, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2377" id="l2377"> 2377</a> its [=CSSNumericValue/type=] must [=CSSNumericValue/match=] <<length-percentage>>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2378" id="l2378"> 2378</a> and it must resolve to a <<length>>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2379" id="l2379"> 2379</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2380" id="l2380"> 2380</a> Within the [=calc-size calculation=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2381" id="l2381"> 2381</a> if the [=calc-size basis=] is not ''calc-size()/any'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2382" id="l2382"> 2382</a> the keyword <dfn for=calc-size() value>size</dfn> is allowed. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2383" id="l2383"> 2383</a> This keyword is a <<length>>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2384" id="l2384"> 2384</a> and resolves at [=used value=] time. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2385" id="l2385"> 2385</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2386" id="l2386"> 2386</a> ''calc-size()'' represents an [=intrinsic size=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2387" id="l2387"> 2387</a> It is specifically <em>not</em> a <<length>>; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2388" id="l2388"> 2388</a> any place that wants to accept a ''calc-size()'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2389" id="l2389"> 2389</a> must explicitly include it in its grammar. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2390" id="l2390"> 2390</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2391" id="l2391"> 2391</a> <details class=note> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2392" id="l2392"> 2392</a> <summary>Why not just allow intrinsic keywords in ''calc()''?</summary> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2393" id="l2393"> 2393</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2394" id="l2394"> 2394</a> In theory, rather than introducing ''calc-size()'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2395" id="l2395"> 2395</a> we could have defined ''calc(auto * .5)'' to be valid, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2396" id="l2396"> 2396</a> allowing interpolation to work as normal. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2397" id="l2397"> 2397</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2398" id="l2398"> 2398</a> This has the minor issue that mixing keywords still wouldn't be allowed, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2399" id="l2399"> 2399</a> but it wouldn't be as obvious </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2400" id="l2400"> 2400</a> (that is, ''calc((min-content + max-content)/2)'' looks reasonable, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2401" id="l2401"> 2401</a> but would be disallowed). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2402" id="l2402"> 2402</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2403" id="l2403"> 2403</a> The larger issue, tho, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2404" id="l2404"> 2404</a> is that this wouldn't allow us to smoothly transition percentages. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2405" id="l2405"> 2405</a> ''calc(50%)'' is only half the size of ''calc(100%)'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2406" id="l2406"> 2406</a> when percentages are [=definite=] in the context; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2407" id="l2407"> 2407</a> if they're not, the two values will usually be the same size </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2408" id="l2408"> 2408</a> (depending on the context, either ''0px'' or ''width/auto''-sized). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2409" id="l2409"> 2409</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2410" id="l2410"> 2410</a> Using a new function that explicitly separates </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2411" id="l2411"> 2411</a> the size you're calculating with </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2412" id="l2412"> 2412</a> from the calculation itself </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2413" id="l2413"> 2413</a> lets us get smooth interpolation in <em>all</em> cases. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2414" id="l2414"> 2414</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2415" id="l2415"> 2415</a> An additional consideration is that there are many effects, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2416" id="l2416"> 2416</a> some small and some large, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2417" id="l2417"> 2417</a> that depend on whether an element is intrinsically sized </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2418" id="l2418"> 2418</a> or definite. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2419" id="l2419"> 2419</a> Using ''calc()'' would mean that the answer to the question </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2420" id="l2420"> 2420</a> "is the element intrinsically-sized" </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2421" id="l2421"> 2421</a> can have one answer in the middle of a transition </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2422" id="l2422"> 2422</a> ("yes", for ''calc(min-content * .2 + 20px * .8))''), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2423" id="l2423"> 2423</a> but a different answer at the end of the transition </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2424" id="l2424"> 2424</a> ("no", for ''calc(20px)''), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2425" id="l2425"> 2425</a> causing the layout to jump at the end of an otherwise-smooth transition. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2426" id="l2426"> 2426</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2427" id="l2427"> 2427</a> (This is similar to the stacking-layer changes that can occur </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2428" id="l2428"> 2428</a> when animating from ''opacity:1'' to ''opacity: 0''; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2429" id="l2429"> 2429</a> any non-''1'' value forces a stacking context. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2430" id="l2430"> 2430</a> With 'opacity' you can get around this by animating to ''.999'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2431" id="l2431"> 2431</a> which is visually indistinguishable from ''1'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2432" id="l2432"> 2432</a> but forces a stacking context. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2433" id="l2433"> 2433</a> It's not as reasonable to ask people to animate to ''calc(auto * .0001)'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2434" id="l2434"> 2434</a> to ensure it retains its intrinsic-ness.) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2435" id="l2435"> 2435</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2436" id="l2436"> 2436</a> Again, using a new function that identifies itself </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2437" id="l2437"> 2437</a> as being <em>inherently</em> an intrinsic size, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2438" id="l2438"> 2438</a> like ''calc-size(auto, 20px)'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2439" id="l2439"> 2439</a> means we can maintain stable layout behaviors the entire time, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2440" id="l2440"> 2440</a> even when the actual size is a definite length. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2441" id="l2441"> 2441</a> </details> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2442" id="l2442"> 2442</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2443" id="l2443"> 2443</a> <h3 id=simplifying-calc-size> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2444" id="l2444"> 2444</a> Simplifying ''calc-size()''</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2445" id="l2445"> 2445</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2446" id="l2446"> 2446</a> Similar to [=math functions=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2447" id="l2447"> 2447</a> at both [=specified value=] and [=computed value=] times </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2448" id="l2448"> 2448</a> the [=calc-size calculation=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2449" id="l2449"> 2449</a> (and the [=calc-size basis=], if it's a <<calc-sum>>) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2450" id="l2450"> 2450</a> are simplified to the extent possible, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2451" id="l2451"> 2451</a> as defined in [[css-values-4#calc-simplification]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2452" id="l2452"> 2452</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2453" id="l2453"> 2453</a> <div algorithm> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2454" id="l2454"> 2454</a> To <dfn export for=calc-size()>canonicalize for interpolation</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2455" id="l2455"> 2455</a> a ''calc-size()'' function: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2456" id="l2456"> 2456</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2457" id="l2457"> 2457</a> <dl class=switch> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2458" id="l2458"> 2458</a> : If the [=calc-size basis=] is a ''calc-size()'' function itself </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2459" id="l2459"> 2459</a> :: The [=calc-size basis=] of the outer function </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2460" id="l2460"> 2460</a> is replaced with that of the inner function, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2461" id="l2461"> 2461</a> and the inner function's [=calc-size calculation=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2462" id="l2462"> 2462</a> is [=substitute into a calc-size calculation|substituted=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2463" id="l2463"> 2463</a> into the outer function's [=calc-size calculation=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2464" id="l2464"> 2464</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2465" id="l2465"> 2465</a> : Otherwise, if the [=calc-size basis=] is a <<calc-sum>> whose </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2466" id="l2466"> 2466</a> [=CSSNumericValue/type=] [=CSSNumericValue/matches=] <<length>> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2467" id="l2467"> 2467</a> (no percentage present) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2468" id="l2468"> 2468</a> :: Replace the basis with ''calc-size/any'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2469" id="l2469"> 2469</a> and the original basis is [=substitute into a calc-size calculation|substituted=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2470" id="l2470"> 2470</a> into the [=calc-size calculation=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2471" id="l2471"> 2471</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2472" id="l2472"> 2472</a> : Otherwise, if the [=calc-size basis=] is any other <<calc-sum>> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2473" id="l2473"> 2473</a> (contains a percentage) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2474" id="l2474"> 2474</a> :: Replace the basis with ''100%'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2475" id="l2475"> 2475</a> and the original basis is [=de-percentify a calc-size calculation|de-percentified=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2476" id="l2476"> 2476</a> then [=substitute into a calc-size calculation|substituted=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2477" id="l2477"> 2477</a> into the [=calc-size calculation=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2478" id="l2478"> 2478</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2479" id="l2479"> 2479</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2480" id="l2480"> 2480</a> (The above is performed recursively, if necessary.) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2481" id="l2481"> 2481</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2482" id="l2482"> 2482</a> If any [=substitute into a calc-size calculation=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2483" id="l2483"> 2483</a> returns failure, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2484" id="l2484"> 2484</a> the entire operation immediately returns failure. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2485" id="l2485"> 2485</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2486" id="l2486"> 2486</a> Note: After canonicalization, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2487" id="l2487"> 2487</a> a ''calc-size()'' function </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2488" id="l2488"> 2488</a> will only have a [=calc-size basis=] that's a keyword, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2489" id="l2489"> 2489</a> or the value ''100%''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2490" id="l2490"> 2490</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2491" id="l2491"> 2491</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2492" id="l2492"> 2492</a> <details class=note> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2493" id="l2493"> 2493</a> <summary>Why are percentages simplified in this way?</summary> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2494" id="l2494"> 2494</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2495" id="l2495"> 2495</a> This percentage simplification </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2496" id="l2496"> 2496</a> ensures that transitions work linearly. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2497" id="l2497"> 2497</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2498" id="l2498"> 2498</a> For example, say that 100% is 100px, for simplicity. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2499" id="l2499"> 2499</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2500" id="l2500"> 2500</a> If you transitioned from `calc-size(100px, size * 2)` </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2501" id="l2501"> 2501</a> (resolves to 200px) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2502" id="l2502"> 2502</a> to `calc-size(50%, size - 20px)` </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2503" id="l2503"> 2503</a> (resolves to 30px) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2504" id="l2504"> 2504</a> by interpolating both the arguments, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2505" id="l2505"> 2505</a> then at the halfway point </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2506" id="l2506"> 2506</a> you'd have `calc-size(75px, size * 2 * .5 + (size - 20px) * .5)` </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2507" id="l2507"> 2507</a> (resolves to 102.5px), </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2508" id="l2508"> 2508</a> which is *not* halfway between 30 and 200 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2509" id="l2509"> 2509</a> (that would be 115px). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2510" id="l2510"> 2510</a> Interpolating one argument, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2511" id="l2511"> 2511</a> then substituting it into another calculation </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2512" id="l2512"> 2512</a> and interpolating that one too, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2513" id="l2513"> 2513</a> generally gives <em>quadratic</em> interpolation behavior. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2514" id="l2514"> 2514</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2515" id="l2515"> 2515</a> Instead, we substitute the basis arg into the calculation arg, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2516" id="l2516"> 2516</a> so you get `calc-size(percentage, 100px * 2)` </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2517" id="l2517"> 2517</a> and `calc-size(percentage, (size * .5) - 20px)`, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2518" id="l2518"> 2518</a> and when interpolated, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2519" id="l2519"> 2519</a> at the halfway point you get </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2520" id="l2520"> 2520</a> `calc-size(percentage, 100px * 2 * .5 + ((size * .5) - 20px) * .5)`, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2521" id="l2521"> 2521</a> which does indeed resolve to 115px, as expected. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2522" id="l2522"> 2522</a> Other points in the transition are similarly linear. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2523" id="l2523"> 2523</a> </details> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2524" id="l2524"> 2524</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2525" id="l2525"> 2525</a> <div algorithm> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2526" id="l2526"> 2526</a> To <dfn export>de-percentify a calc-size calculation</dfn> |calc|: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2527" id="l2527"> 2527</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2528" id="l2528"> 2528</a> 1. Replace every instance of a <<percentage-token>> in |calc| </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2529" id="l2529"> 2529</a> with ''(size * N)'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2530" id="l2530"> 2530</a> where N is the percentage's value divided by 100. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2531" id="l2531"> 2531</a> Return |calc|. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2532" id="l2532"> 2532</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2533" id="l2533"> 2533</a> Note: For example, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2534" id="l2534"> 2534</a> ''50% + 20px'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2535" id="l2535"> 2535</a> becomes ''(size * .5) + 20px''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2536" id="l2536"> 2536</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2537" id="l2537"> 2537</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2538" id="l2538"> 2538</a> <div algorithm> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2539" id="l2539"> 2539</a> To <dfn export>substitute into a calc-size calculation</dfn> |calc| </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2540" id="l2540"> 2540</a> a value |insertion value|: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2541" id="l2541"> 2541</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2542" id="l2542"> 2542</a> 1. If |calc| doesn't have the ''calc-size()/size'' keyword in it, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2543" id="l2543"> 2543</a> do nothing. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2544" id="l2544"> 2544</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2545" id="l2545"> 2545</a> 2. Otherwise, replace every instance of the ''calc-size()/size'' keyword </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2546" id="l2546"> 2546</a> in |calc| </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2547" id="l2547"> 2547</a> with |insertion value|, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2548" id="l2548"> 2548</a> wrapped in parentheses. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2549" id="l2549"> 2549</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2550" id="l2550"> 2550</a> 3. If this substitution would produce a value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2551" id="l2551"> 2551</a> larger than an UA-defined limit, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2552" id="l2552"> 2552</a> return failure. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2553" id="l2553"> 2553</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2554" id="l2554"> 2554</a> Note: This is intentionally identical </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2555" id="l2555"> 2555</a> to the protection against substitution attacks </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2556" id="l2556"> 2556</a> defined for variable substitution; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2557" id="l2557"> 2557</a> see [[css-variables-1#long-variables]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2558" id="l2558"> 2558</a> However, the use-cases for very long ''calc-size()'' values </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2559" id="l2559"> 2559</a> are much less than for long custom properties, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2560" id="l2560"> 2560</a> so UAs might wish to impose a smaller size limit. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2561" id="l2561"> 2561</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2562" id="l2562"> 2562</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2563" id="l2563"> 2563</a> <h3 id=resolving-calc-size> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2564" id="l2564"> 2564</a> Resolving ''calc-size()''</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2565" id="l2565"> 2565</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2566" id="l2566"> 2566</a> A ''calc-size()'' is treated, in all respects, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2567" id="l2567"> 2567</a> as if it were its [=calc-size basis=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2568" id="l2568"> 2568</a> (with ''calc-size()/any'' acting as an unspecified [=definite=] size). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2569" id="l2569"> 2569</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2570" id="l2570"> 2570</a> When actually performing layout calculations, however, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2571" id="l2571"> 2571</a> the size represented by its [=calc-size basis=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2572" id="l2572"> 2572</a> is modified to be the value of its [=calc-size calculation=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2573" id="l2573"> 2573</a> with the ''calc-size()/size'' keyword </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2574" id="l2574"> 2574</a> evaluating to the [=calc-size basis's=] original size. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2575" id="l2575"> 2575</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2576" id="l2576"> 2576</a> (If the [=calc-size basis=] is <dfn for="calc-size()" value>any</dfn>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2577" id="l2577"> 2577</a> the ''calc-size()'' is a [=definite=] length, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2578" id="l2578"> 2578</a> equal to its [=calc-size calculation=].) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2579" id="l2579"> 2579</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2580" id="l2580"> 2580</a> <div class=example> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2581" id="l2581"> 2581</a> For example, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2582" id="l2582"> 2582</a> an element with ''height: calc-size(auto, round(up, size, 20px))'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2583" id="l2583"> 2583</a> will be treated identically to an element with ''height: auto'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2584" id="l2584"> 2584</a> but with its size rounded up to the nearest multiple of ''20px''. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2585" id="l2585"> 2585</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2586" id="l2586"> 2586</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2587" id="l2587"> 2587</a> When evaluating the [=calc-size calculation=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2588" id="l2588"> 2588</a> if percentages are not definite in the given context, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2589" id="l2589"> 2589</a> they resolve to ''0px''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2590" id="l2590"> 2590</a> Otherwise, they resolve as normal. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2591" id="l2591"> 2591</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2592" id="l2592"> 2592</a> (A percentage in the [=calc-size basis=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2593" id="l2593"> 2593</a> is treated differently; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2594" id="l2594"> 2594</a> [[#simplifying-calc-size|simplification]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2595" id="l2595"> 2595</a> moves the percentage into the [=calc-size calculation=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2596" id="l2596"> 2596</a> and replaces it with ''size'' references. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2597" id="l2597"> 2597</a> The [=calc-size basis=] then becomes ''100%'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2598" id="l2598"> 2598</a> behaving as whatever ''100%'' would normally do in that context, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2599" id="l2599"> 2599</a> including possibly making a property [=behave as auto=], etc.) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2600" id="l2600"> 2600</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2601" id="l2601"> 2601</a> <div class=note> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2602" id="l2602"> 2602</a> Percentages in the basis work as normal </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2603" id="l2603"> 2603</a> so you can always smoothly transition to <em>any</em> size, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2604" id="l2604"> 2604</a> regardless of its value or behavior. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2605" id="l2605"> 2605</a> For example, without ''calc-size()'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2606" id="l2606"> 2606</a> transitioning from ''100%'' to ''0px'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2607" id="l2607"> 2607</a> only works smoothly if the percentage is [=definite=]; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2608" id="l2608"> 2608</a> if it's not, then during the entire transition </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2609" id="l2609"> 2609</a> the property might [=behave as auto=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2610" id="l2610"> 2610</a> and not actually change size at all. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2611" id="l2611"> 2611</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2612" id="l2612"> 2612</a> Percentages in the calculation, on the other hand, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2613" id="l2613"> 2613</a> are resolved to 0 when indefinite </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2614" id="l2614"> 2614</a> to avoid making the ''calc-size()'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2615" id="l2615"> 2615</a> potentially act in two different ways; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2616" id="l2616"> 2616</a> there are some cases where a ''width/min-content'' size </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2617" id="l2617"> 2617</a> will cause different layout effects than a ''100%'' size, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2618" id="l2618"> 2618</a> and so a ''calc-size()'' has to masquerade as one or the other. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2619" id="l2619"> 2619</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2620" id="l2620"> 2620</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2621" id="l2621"> 2621</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2622" id="l2622"> 2622</a> <h3 id=interp-calc-size> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2623" id="l2623"> 2623</a> Interpolating ''calc-size()''</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2624" id="l2624"> 2624</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2625" id="l2625"> 2625</a> Two ''calc-size()'' functions can be interpolated if </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2626" id="l2626"> 2626</a> (after being [=canonicalized for interpolation=]): </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2627" id="l2627"> 2627</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2628" id="l2628"> 2628</a> <dl class=switch> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2629" id="l2629"> 2629</a> : Either function returned failure from being [=canonicalized for interpolation=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2630" id="l2630"> 2630</a> :: The values cannot be interpolated. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2631" id="l2631"> 2631</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2632" id="l2632"> 2632</a> : Both [=calc-size basises=] are identical </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2633" id="l2633"> 2633</a> :: The result's [=calc-size basis=] is the that basis value. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2634" id="l2634"> 2634</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2635" id="l2635"> 2635</a> : Either [=calc-size basis=] is ''calc-size()/any'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2636" id="l2636"> 2636</a> :: The result's [=calc-size basis=] is the non-''calc-size()/any'' basis. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2637" id="l2637"> 2637</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2638" id="l2638"> 2638</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2639" id="l2639"> 2639</a> The result's [=calc-size calculation=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2640" id="l2640"> 2640</a> is the interpolation of the two input [=calc-size calculations=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2641" id="l2641"> 2641</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2642" id="l2642"> 2642</a> Note: These interpolation restrictions ensure that a ''calc-size()'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2643" id="l2643"> 2643</a> doesn't try to act in two different ways at once; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2644" id="l2644"> 2644</a> there are some cases where a ''width/min-content'' and ''width/max-content'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2645" id="l2645"> 2645</a> would produce different layout behaviors, for example, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2646" id="l2646"> 2646</a> so the ''calc-size()'' has to masquerade as one or the other. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2647" id="l2647"> 2647</a> This, unfortunately, means you can't transition between keywords, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2648" id="l2648"> 2648</a> like going from ''width/auto'' to ''width/min-content''. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2649" id="l2649"> 2649</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2650" id="l2650"> 2650</a> Some ''calc-size()'' values can also be interpolated </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2651" id="l2651"> 2651</a> with a <<length-percentage>> or an <<intrinsic-size-keyword>>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2652" id="l2652"> 2652</a> To determine whether the values can interpolate </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2653" id="l2653"> 2653</a> and what the interpolation behavior is, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2654" id="l2654"> 2654</a> treat the non-''calc-size()'' value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2655" id="l2655"> 2655</a> as ''calc-size(any, <var ignore>value</var> )'' if the value is a <<calc-sum>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2656" id="l2656"> 2656</a> or as ''calc-size( <var ignore>value</var> , size)'' otherwise, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2657" id="l2657"> 2657</a> and apply the rules above. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2658" id="l2658"> 2658</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2659" id="l2659"> 2659</a> <div class=example> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2660" id="l2660"> 2660</a> For example, ''calc-size()'' allows interpolation to/from ''height: auto'': </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2661" id="l2661"> 2661</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2662" id="l2662"> 2662</a> <pre class=lang-css> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2663" id="l2663"> 2663</a> details { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2664" id="l2664"> 2664</a> transition: height 1s; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2665" id="l2665"> 2665</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2666" id="l2666"> 2666</a> details::details-content { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2667" id="l2667"> 2667</a> display: block; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2668" id="l2668"> 2668</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2669" id="l2669"> 2669</a> details[open]::details-content { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2670" id="l2670"> 2670</a> height: auto; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2671" id="l2671"> 2671</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2672" id="l2672"> 2672</a> details:not([open])::details-content { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2673" id="l2673"> 2673</a> height: calc-size(any, 0px); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2674" id="l2674"> 2674</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2675" id="l2675"> 2675</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2676" id="l2676"> 2676</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2677" id="l2677"> 2677</a> This will implicitly interpolate </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2678" id="l2678"> 2678</a> between ''calc-size(auto, size)'' and ''calc-size(any, 0px)''. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2679" id="l2679"> 2679</a> Half a second after opening the <{details}>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2680" id="l2680"> 2680</a> the ::details-content wrapper's 'height' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2681" id="l2681"> 2681</a> will be ''calc-size(auto, size * .5)'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2682" id="l2682"> 2682</a> half its open size; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2683" id="l2683"> 2683</a> thruout the transition it'll smoothly animate its height. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2684" id="l2684"> 2684</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2685" id="l2685"> 2685</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2686" id="l2686"> 2686</a> Note: ''calc-size()'' is designed such that </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2687" id="l2687"> 2687</a> transitioning to/from ''calc-size(any, [=definite=] length)'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2688" id="l2688"> 2688</a> will <em>always</em> work smoothly, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2689" id="l2689"> 2689</a> regardless of how the other side of the transition is specified. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2690" id="l2690"> 2690</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2691" id="l2691"> 2691</a> Note: This "upgrade a plain value into a ''calc-size()''" behavior </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2692" id="l2692"> 2692</a> puts <<length-percentage>> values into the [=calc-size calculation=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2693" id="l2693"> 2693</a> This allows values with percentages </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2694" id="l2694"> 2694</a> to interpolate with intrinsic size keywords, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2695" id="l2695"> 2695</a> but does mean that when a percentage isn't [=definite=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2696" id="l2696"> 2696</a> it'll resolve to zero. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2697" id="l2697"> 2697</a> If you want to resolve to the actual size the percentage would make the element, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2698" id="l2698"> 2698</a> explicitly write a ''calc-size()'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2699" id="l2699"> 2699</a> with the value in its [=calc-size basis=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2700" id="l2700"> 2700</a> like ''calc-size(50%, size)''. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2701" id="l2701"> 2701</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2702" id="l2702"> 2702</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2703" id="l2703"> 2703</a> <h3 id=interpolate-size> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2704" id="l2704"> 2704</a> Interpolating sizing keywords: the 'interpolate-size' property</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2705" id="l2705"> 2705</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2706" id="l2706"> 2706</a> Note: If we had a time machine, this property wouldn't need to exist. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2707" id="l2707"> 2707</a> It exists because many existing style sheets assume that </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2708" id="l2708"> 2708</a> intrinsic sizing keywords </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2709" id="l2709"> 2709</a> (such as ''width/auto'', ''width/min-content'', etc.) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2710" id="l2710"> 2710</a> cannot animate. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2711" id="l2711"> 2711</a> Therefore this property exists to allow style sheets to choose </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2712" id="l2712"> 2712</a> to get the expected behavior. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2713" id="l2713"> 2713</a> Specifying ''interpolate-size: allow-keywords'' on the root element </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2714" id="l2714"> 2714</a> chooses the new behavior for the entire page. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2715" id="l2715"> 2715</a> We suggest doing this whenever compatibility isn't an issue. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2716" id="l2716"> 2716</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2717" id="l2717"> 2717</a> <pre class="propdef"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2718" id="l2718"> 2718</a> Name: interpolate-size </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2719" id="l2719"> 2719</a> Value: numeric-only | allow-keywords </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2720" id="l2720"> 2720</a> Initial: numeric-only </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2721" id="l2721"> 2721</a> Inherited: yes </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2722" id="l2722"> 2722</a> Applies to: all elements </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2723" id="l2723"> 2723</a> Computed value: as specified </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2724" id="l2724"> 2724</a> Animation type: not animatable </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2725" id="l2725"> 2725</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2726" id="l2726"> 2726</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2727" id="l2727"> 2727</a> <dl dfn-for="interpolate-size" dfn-type="value"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2728" id="l2728"> 2728</a> <dt><dfn>numeric-only</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2729" id="l2729"> 2729</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2730" id="l2730"> 2730</a> An <<intrinsic-size-keyword>> cannot be interpolated. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2731" id="l2731"> 2731</a> </dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2732" id="l2732"> 2732</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2733" id="l2733"> 2733</a> <dt><dfn>allow-keywords</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2734" id="l2734"> 2734</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2735" id="l2735"> 2735</a> Two values can also be interpolated if </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2736" id="l2736"> 2736</a> one of them is an <<intrinsic-size-keyword>> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2737" id="l2737"> 2737</a> and the other is a <<length-percentage>>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2738" id="l2738"> 2738</a> This is done by treating </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2739" id="l2739"> 2739</a> the <<intrinsic-size-keyword>> <var>keyword</var> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2740" id="l2740"> 2740</a> as though it is ''calc-size(<var>keyword</var>, size)'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2741" id="l2741"> 2741</a> and applying the rules in [[#interp-calc-size]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2742" id="l2742"> 2742</a> In other cases, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2743" id="l2743"> 2743</a> an <<intrinsic-size-keyword>> still cannot be interpolated. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2744" id="l2744"> 2744</a> </dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2745" id="l2745"> 2745</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2746" id="l2746"> 2746</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2747" id="l2747"> 2747</a> The value of 'interpolate-size' that matters </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2748" id="l2748"> 2748</a> is the computed value on the element </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2749" id="l2749"> 2749</a> at the time the animation might start. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2750" id="l2750"> 2750</a> For CSS transitions, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2751" id="l2751"> 2751</a> this means the value in the [=after-change style=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2752" id="l2752"> 2752</a> An animation is not stopped or started later </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2753" id="l2753"> 2753</a> because 'interpolate-size' changes. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2754" id="l2754"> 2754</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2755" id="l2755"> 2755</a>  </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2765" id="l2765"> 2765</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2766" id="l2766"> 2766</a> <h2 id=arbitrary-substitution> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2767" id="l2767"> 2767</a> Appendix A: Arbitrary Substitution Functions</h2> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2768" id="l2768"> 2768</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2769" id="l2769"> 2769</a> An <dfn export>arbitrary substitution function</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2770" id="l2770"> 2770</a> is a [=functional notation=] that will, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2771" id="l2771"> 2771</a> when resolved, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2772" id="l2772"> 2772</a> substitute itself with other values </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2773" id="l2773"> 2773</a> that are potentially unknowable at parse time-- </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2774" id="l2774"> 2774</a> and must therefore be parsed while resolving its [=computed value=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2775" id="l2775"> 2775</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2776" id="l2776"> 2776</a> Note: Since [=arbitrary substitution functions=] resolve at [=computed value=] time, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2777" id="l2777"> 2777</a> if the resulting value after substitution is invalid, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2778" id="l2778"> 2778</a> the property falls back (essentially) to ''unset'' behavior, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2779" id="l2779"> 2779</a> rather than falling back to an earlier value in the [=cascade=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2780" id="l2780"> 2780</a> the way declarations invalid at parse time do. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2781" id="l2781"> 2781</a> See [[#invalid-substitution]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2782" id="l2782"> 2782</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2783" id="l2783"> 2783</a> Unless otherwise specified, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2784" id="l2784"> 2784</a> [=arbitrary substitution functions=] can be used </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2785" id="l2785"> 2785</a> in place of any part of any property's value </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2786" id="l2786"> 2786</a> (including within other [=functional notations=]); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2787" id="l2787"> 2787</a> and are not valid in any other context. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2788" id="l2788"> 2788</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2789" id="l2789"> 2789</a> ISSUE: Should any of these functions be valid in contexts outside of properties? </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2790" id="l2790"> 2790</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2791" id="l2791"> 2791</a> <wpt pathprefix="css/css-variables"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2792" id="l2792"> 2792</a> variable-external-font-face-01.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2793" id="l2793"> 2793</a> variable-font-face-01.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2794" id="l2794"> 2794</a> variable-font-face-02.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2795" id="l2795"> 2795</a> </wpt> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2796" id="l2796"> 2796</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2797" id="l2797"> 2797</a> <div class='example'> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2798" id="l2798"> 2798</a> For example, the following code incorrectly attempts to use a variable as a property name: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2799" id="l2799"> 2799</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2800" id="l2800"> 2800</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2801" id="l2801"> 2801</a> .foo { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2802" id="l2802"> 2802</a> --side: margin-top; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2803" id="l2803"> 2803</a> var(--side): 20px; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2804" id="l2804"> 2804</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2805" id="l2805"> 2805</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2806" id="l2806"> 2806</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2807" id="l2807"> 2807</a> This is <em>not</em> equivalent to setting ''margin-top: 20px;''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2808" id="l2808"> 2808</a> Instead, the second declaration is simply thrown away as a syntax error </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2809" id="l2809"> 2809</a> for having an invalid property name. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2810" id="l2810"> 2810</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2811" id="l2811"> 2811</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2812" id="l2812"> 2812</a> If a property value contains one or more [=arbitrary substitution functions=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2813" id="l2813"> 2813</a> and those functions are themselves syntactically valid, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2814" id="l2814"> 2814</a> the entire value's grammar must be assumed to be valid at parse time. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2815" id="l2815"> 2815</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2816" id="l2816"> 2816</a> <wpt pathprefix="css/css-variables"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2817" id="l2817"> 2817</a> variable-reference-18.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2818" id="l2818"> 2818</a> variable-reference-19.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2819" id="l2819"> 2819</a> variable-reference-30.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2820" id="l2820"> 2820</a> </wpt> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2821" id="l2821"> 2821</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2822" id="l2822"> 2822</a> [=Arbitrary substitution functions=] are [=substituted=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2823" id="l2823"> 2823</a> during style [=computed value|computation=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2824" id="l2824"> 2824</a> before any other value transformations or introspection can occur. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2825" id="l2825"> 2825</a> If a property, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2826" id="l2826"> 2826</a> after [=substitution=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2827" id="l2827"> 2827</a> does not match its declared grammar, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2828" id="l2828"> 2828</a> the declaration is [=invalid at computed-value time=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2829" id="l2829"> 2829</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2830" id="l2830"> 2830</a> <wpt pathprefix="css/css-variables"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2831" id="l2831"> 2831</a> variable-declaration-16.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2832" id="l2832"> 2832</a> variable-declaration-17.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2833" id="l2833"> 2833</a> variable-declaration-18.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2834" id="l2834"> 2834</a> variable-declaration-19.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2835" id="l2835"> 2835</a> variable-declaration-21.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2836" id="l2836"> 2836</a> variable-transitions-transition-property-all-before-value.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2837" id="l2837"> 2837</a> variable-transitions-value-before-transition-property-all.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2838" id="l2838"> 2838</a> </wpt> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2839" id="l2839"> 2839</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2840" id="l2840"> 2840</a> If a property value, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2841" id="l2841"> 2841</a> after [=substitution=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2842" id="l2842"> 2842</a> contains only a single [=CSS-wide keyword=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2843" id="l2843"> 2843</a> (and possibly whitespace/comments), </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2844" id="l2844"> 2844</a> its value is determined as if that keyword were its [=specified value=] all along. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2845" id="l2845"> 2845</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2846" id="l2846"> 2846</a> <wpt pathprefix="css/css-variables"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2847" id="l2847"> 2847</a> whitespace-in-fallback-crash.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2848" id="l2848"> 2848</a> wide-keyword-fallback-001.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2849" id="l2849"> 2849</a> wide-keyword-fallback-002.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2850" id="l2850"> 2850</a> </wpt> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2851" id="l2851"> 2851</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2852" id="l2852"> 2852</a> <div class='example'> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2853" id="l2853"> 2853</a> For example, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2854" id="l2854"> 2854</a> the following usage is fine from a syntax standpoint, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2855" id="l2855"> 2855</a> but results in nonsense when the variable is substituted in: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2856" id="l2856"> 2856</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2857" id="l2857"> 2857</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2858" id="l2858"> 2858</a> :root { --looks-valid: 20px; } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2859" id="l2859"> 2859</a> p { background-color: var(--looks-valid); } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2860" id="l2860"> 2860</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2861" id="l2861"> 2861</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2862" id="l2862"> 2862</a> Since ''20px'' is an invalid value for 'background-color', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2863" id="l2863"> 2863</a> the property becomes [=invalid at computed-value time=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2864" id="l2864"> 2864</a> and instead resolves to ''transparent'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2865" id="l2865"> 2865</a> (the [=initial value=] for 'background-color'). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2866" id="l2866"> 2866</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2867" id="l2867"> 2867</a> If the property was one that's inherited by default, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2868" id="l2868"> 2868</a> such as 'color!!property', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2869" id="l2869"> 2869</a> it would compute to the inherited value </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2870" id="l2870"> 2870</a> rather than the initial value. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2871" id="l2871"> 2871</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2872" id="l2872"> 2872</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2873" id="l2873"> 2873</a> <div class='example'> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2874" id="l2874"> 2874</a> While a ''var()'' function can't get a [=CSS-wide keyword=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2875" id="l2875"> 2875</a> from the [=custom property=] itself-- </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2876" id="l2876"> 2876</a> if you tried to specify that, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2877" id="l2877"> 2877</a> like ''--foo: initial;'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2878" id="l2878"> 2878</a> it would just trigger [[css-cascade-4#defaulting-keywords|explicit defaulting]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2879" id="l2879"> 2879</a> for the custom property-- </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2880" id="l2880"> 2880</a> it can have a [=CSS-wide keyword=] in its fallback: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2881" id="l2881"> 2881</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2882" id="l2882"> 2882</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2883" id="l2883"> 2883</a> p { color: var(--does-not-exist, initial); } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2884" id="l2884"> 2884</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2885" id="l2885"> 2885</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2886" id="l2886"> 2886</a> In the above code, if the ''--does-not-exist'' property didn't exist </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2887" id="l2887"> 2887</a> or is [=invalid at computed-value time=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2888" id="l2888"> 2888</a> the ''var()'' will instead substitute in the ''initial'' keyword, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2889" id="l2889"> 2889</a> making the property behave as if it was originally ''color: initial''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2890" id="l2890"> 2890</a> This will make it take on the document's initial 'color' value, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2891" id="l2891"> 2891</a> rather than defaulting to inheritance, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2892" id="l2892"> 2892</a> as it would if there were no fallback. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2893" id="l2893"> 2893</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2894" id="l2894"> 2894</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2895" id="l2895"> 2895</a> Each [=arbitrary substitution function=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2896" id="l2896"> 2896</a> must define how to <dfn export>resolve an arbitrary substitution function</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2897" id="l2897"> 2897</a> for itself, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2898" id="l2898"> 2898</a> returning optional |result| and |fallback| values. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2899" id="l2899"> 2899</a> The |result| is used to replace the function </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2900" id="l2900"> 2900</a> as long as it does not contain the [=guaranteed-invalid value=]; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2901" id="l2901"> 2901</a> the |fallback| is used otherwise. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2902" id="l2902"> 2902</a> (The |fallback| does not need to be resolved in any way; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2903" id="l2903"> 2903</a> [=substitution=] will handle that if it's actually used.) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2904" id="l2904"> 2904</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2905" id="l2905"> 2905</a> Note: See, for example, [=resolve a var() function=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2906" id="l2906"> 2906</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2907" id="l2907"> 2907</a> <div algorithm> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2908" id="l2908"> 2908</a> To <dfn export local-lt="substitute|substitution" lt="substitute arbitrary substitution function|arbitrary substitution">substitute arbitrary substitution functions</dfn> in a |value|: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2909" id="l2909"> 2909</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2910" id="l2910"> 2910</a> 1. [=list/For each=] [=arbitrary substitution function=] |func| </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2911" id="l2911"> 2911</a> in |value|: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2912" id="l2912"> 2912</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2913" id="l2913"> 2913</a> 1. [=Resolve=] |func|. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2914" id="l2914"> 2914</a> Let |result| be the returned result, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2915" id="l2915"> 2915</a> and |fallback| be the returned fallback. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2916" id="l2916"> 2916</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2917" id="l2917"> 2917</a> If no |result| was returned, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2918" id="l2918"> 2918</a> set |result| to the [=guaranteed-invalid value=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2919" id="l2919"> 2919</a> If no |fallback| was returned, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2920" id="l2920"> 2920</a> set |fallback| to the [=guaranteed-invalid value=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2921" id="l2921"> 2921</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2922" id="l2922"> 2922</a> 2. <dl class=switch> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2923" id="l2923"> 2923</a> : If |result| does not contain the [=guaranteed-invalid value=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2924" id="l2924"> 2924</a> :: Replace |func| in |value| with |result|. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2925" id="l2925"> 2925</a> : Otherwise, if |fallback| does not contain the [=guaranteed-invalid value=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2926" id="l2926"> 2926</a> :: Replace |func| in |value| with |fallback|. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2927" id="l2927"> 2927</a> : Otherwise </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2928" id="l2928"> 2928</a> :: Replace all of |value| with the [=guaranteed-invalid value=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2929" id="l2929"> 2929</a> Exit this algorithm. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2930" id="l2930"> 2930</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2931" id="l2931"> 2931</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2932" id="l2932"> 2932</a> 2. If there are still [=arbitrary substitution functions=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2933" id="l2933"> 2933</a> in |value| (due to substitution), </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2934" id="l2934"> 2934</a> repeat the previous step. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2935" id="l2935"> 2935</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2936" id="l2936"> 2936</a> 3. Grammar-check |value| according to its context as normal. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2937" id="l2937"> 2937</a> If it is not valid at this point, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2938" id="l2938"> 2938</a> replace |value| with the [=guaranteed-invalid value=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2939" id="l2939"> 2939</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2940" id="l2940"> 2940</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2941" id="l2941"> 2941</a> <wpt pathprefix="css/css-variables"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2942" id="l2942"> 2942</a> css-variable-change-style-001.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2943" id="l2943"> 2943</a> css-variable-change-style-002.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2944" id="l2944"> 2944</a> variable-declaration-01.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2945" id="l2945"> 2945</a> variable-declaration-02.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2946" id="l2946"> 2946</a> variable-declaration-03.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2947" id="l2947"> 2947</a> variable-declaration-04.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2948" id="l2948"> 2948</a> variable-declaration-05.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2949" id="l2949"> 2949</a> variable-generated-content-dynamic-001.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2950" id="l2950"> 2950</a> variable-presentation-attribute.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2951" id="l2951"> 2951</a> variable-reference-01.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2952" id="l2952"> 2952</a> variable-reference-02.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2953" id="l2953"> 2953</a> variable-reference-03.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2954" id="l2954"> 2954</a> variable-reference-04.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2955" id="l2955"> 2955</a> variable-reference-05.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2956" id="l2956"> 2956</a> variable-reference-12.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2957" id="l2957"> 2957</a> variable-reference-16.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2958" id="l2958"> 2958</a> variable-reference-40.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2959" id="l2959"> 2959</a> variable-reference-refresh.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2960" id="l2960"> 2960</a> variable-substitution-background-properties.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2961" id="l2961"> 2961</a> variable-substitution-basic.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2962" id="l2962"> 2962</a> variable-substitution-filters.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2963" id="l2963"> 2963</a> variable-substitution-replaced-size.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2964" id="l2964"> 2964</a> variable-substitution-shadow-properties.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2965" id="l2965"> 2965</a> variable-substitution-variable-declaration.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2966" id="l2966"> 2966</a> </wpt> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2967" id="l2967"> 2967</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2968" id="l2968"> 2968</a> <wpt pathprefix="css/css-variables" title="CSSOM"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2969" id="l2969"> 2969</a> variable-reference-cssom.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2970" id="l2970"> 2970</a> </wpt> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2971" id="l2971"> 2971</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2972" id="l2972"> 2972</a> <div class=note> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2973" id="l2973"> 2973</a> Note that [=substitution=] takes place at the level of CSS tokens [[css-syntax-3]], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2974" id="l2974"> 2974</a> not at a textual level; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2975" id="l2975"> 2975</a> you can't build up a single token where part of it is provided by a variable: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2976" id="l2976"> 2976</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2977" id="l2977"> 2977</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2978" id="l2978"> 2978</a> .foo { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2979" id="l2979"> 2979</a> --gap: 20; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2980" id="l2980"> 2980</a> margin-top: var(--gap)px; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2981" id="l2981"> 2981</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2982" id="l2982"> 2982</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2983" id="l2983"> 2983</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2984" id="l2984"> 2984</a> This is <em>not</em> equivalent to setting ''margin-top: 20px;'' (a length). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2985" id="l2985"> 2985</a> Instead, it's equivalent to ''margin-top: 20 px;'' (a number followed by an ident), </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2986" id="l2986"> 2986</a> which is simply an invalid value for the 'margin-top' property. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2987" id="l2987"> 2987</a> Note, though, that ''calc()'' can be used to validly achieve the same thing, like so: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2988" id="l2988"> 2988</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2989" id="l2989"> 2989</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2990" id="l2990"> 2990</a> .foo { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2991" id="l2991"> 2991</a> --gap: 20; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2992" id="l2992"> 2992</a> margin-top: calc(var(--gap) * 1px); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2993" id="l2993"> 2993</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2994" id="l2994"> 2994</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2995" id="l2995"> 2995</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2996" id="l2996"> 2996</a> This also implies that the post-substitution value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2997" id="l2997"> 2997</a> might not be directly serializable as-is. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2998" id="l2998"> 2998</a> Here's a similar example to the preceding: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2999" id="l2999"> 2999</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3000" id="l3000"> 3000</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3001" id="l3001"> 3001</a> .foo { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3002" id="l3002"> 3002</a> --gap: 20; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3003" id="l3003"> 3003</a> --not-px-length: var(--gap)px; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3004" id="l3004"> 3004</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3005" id="l3005"> 3005</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3006" id="l3006"> 3006</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3007" id="l3007"> 3007</a> The serialization of the computed (post-substitution) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3008" id="l3008"> 3008</a> value of ''--not-px-length'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3009" id="l3009"> 3009</a> is <strong>not</strong> ''20px'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3010" id="l3010"> 3010</a> because that would parse back as the single combined dimension; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3011" id="l3011"> 3011</a> instead, it will serialize with a comment between the two tokens, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3012" id="l3012"> 3012</a> like ''20/**/px'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3013" id="l3013"> 3013</a> to enforce that they are separate tokens even when re-parsing. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3014" id="l3014"> 3014</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3015" id="l3015"> 3015</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3016" id="l3016"> 3016</a> <wpt pathprefix="css/css-variables"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3017" id="l3017"> 3017</a> variable-declaration-14.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3018" id="l3018"> 3018</a> variable-declaration-53.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3019" id="l3019"> 3019</a> variable-declaration-54.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3020" id="l3020"> 3020</a> variable-declaration-55.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3021" id="l3021"> 3021</a> variable-reference-15.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3022" id="l3022"> 3022</a> variable-reference-without-whitespace.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3023" id="l3023"> 3023</a> </wpt> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3024" id="l3024"> 3024</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3025" id="l3025"> 3025</a>  </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3035" id="l3035"> 3035</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3036" id="l3036"> 3036</a> <h3 id=invalid-substitution oldids='invalid-variables'> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3037" id="l3037"> 3037</a> Invalid Substitution</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3038" id="l3038"> 3038</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3039" id="l3039"> 3039</a> When [=substitution=] results in a property's value </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3040" id="l3040"> 3040</a> containing the [=guaranteed-invalid value=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3041" id="l3041"> 3041</a> this makes the declaration <dfn export>invalid at computed-value time</dfn>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3042" id="l3042"> 3042</a> When this happens, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3043" id="l3043"> 3043</a> the computed value is one of the following </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3044" id="l3044"> 3044</a> depending on the property's type: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3045" id="l3045"> 3045</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3046" id="l3046"> 3046</a> <dl class="switch"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3047" id="l3047"> 3047</a> : The property is a non-registered [=custom property=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3048" id="l3048"> 3048</a> : The property is a [=registered custom property=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3049" id="l3049"> 3049</a> with [=universal syntax definition|universal syntax=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3050" id="l3050"> 3050</a> :: The computed value is the <a>guaranteed-invalid value</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3051" id="l3051"> 3051</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3052" id="l3052"> 3052</a> : Otherwise </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3053" id="l3053"> 3053</a> :: Either the property's inherited value </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3054" id="l3054"> 3054</a> or its initial value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3055" id="l3055"> 3055</a> depending on whether the property is inherited or not, respectively, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3056" id="l3056"> 3056</a> as if the property's value had been specified as the ''unset'' keyword. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3057" id="l3057"> 3057</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3058" id="l3058"> 3058</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3059" id="l3059"> 3059</a> <wpt pathprefix="css/css-variables"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3060" id="l3060"> 3060</a> variables-substitute-guaranteed-invalid.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3061" id="l3061"> 3061</a> </wpt> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3062" id="l3062"> 3062</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3063" id="l3063"> 3063</a> <div class='example'> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3064" id="l3064"> 3064</a> For example, in the following code: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3065" id="l3065"> 3065</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3066" id="l3066"> 3066</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3067" id="l3067"> 3067</a> :root { --not-a-color: 20px; } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3068" id="l3068"> 3068</a> p { background-color: red; } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3069" id="l3069"> 3069</a> p { background-color: var(--not-a-color); } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3070" id="l3070"> 3070</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3071" id="l3071"> 3071</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3072" id="l3072"> 3072</a> the &lt;p> elements will have transparent backgrounds </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3073" id="l3073"> 3073</a> (the initial value for 'background-color'), </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3074" id="l3074"> 3074</a> rather than red backgrounds. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3075" id="l3075"> 3075</a> The same would happen if the <a>custom property</a> itself was unset, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3076" id="l3076"> 3076</a> or contained an invalid ''var()'' function. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3077" id="l3077"> 3077</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3078" id="l3078"> 3078</a> Note the difference between this </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3079" id="l3079"> 3079</a> and what happens if the author had just written ''background-color: 20px'' directly in their stylesheet - </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3080" id="l3080"> 3080</a> that would be a normal syntax error, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3081" id="l3081"> 3081</a> which would cause the rule to be discarded, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3082" id="l3082"> 3082</a> so the ''background-color: red'' rule would be used instead. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3083" id="l3083"> 3083</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3084" id="l3084"> 3084</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3085" id="l3085"> 3085</a> Note: The <a>invalid at computed-value time</a> concept exists </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3086" id="l3086"> 3086</a> because [=arbitrary substitution functions=] can't "fail early" like other syntax errors can, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3087" id="l3087"> 3087</a> so by the time the user agent realizes a property value is invalid, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3088" id="l3088"> 3088</a> it's already thrown away the other cascaded values. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3089" id="l3089"> 3089</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3090" id="l3090"> 3090</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3091" id="l3091"> 3091</a>  </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3101" id="l3101"> 3101</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3102" id="l3102"> 3102</a> <h3 id=substitution-in-shorthands oldids=variables-in-shorthands> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3103" id="l3103"> 3103</a> Substitution in Shorthand Properties</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3104" id="l3104"> 3104</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3105" id="l3105"> 3105</a> [=Arbitrary substitution functions=] produce some complications </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3106" id="l3106"> 3106</a> when parsing [=shorthand properties=] into their component longhands, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3107" id="l3107"> 3107</a> and when serializing [=shorthand properties=] <em>from</em> their component longhands. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3108" id="l3108"> 3108</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3109" id="l3109"> 3109</a> If a [=shorthand property=] contains an [=arbitrary substitution function=] in its value, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3110" id="l3110"> 3110</a> the [=longhand properties=] it's associated with must instead be filled in </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3111" id="l3111"> 3111</a> with a special, unobservable-to-authors <dfn export>pending-substitution value</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3112" id="l3112"> 3112</a> that indicates the shorthand contains an [=arbitrary substitution function=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3113" id="l3113"> 3113</a> and thus the longhand's value can't be determined until after [=substituted=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3114" id="l3114"> 3114</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3115" id="l3115"> 3115</a> This value must then be cascaded as normal, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3116" id="l3116"> 3116</a> and at computed-value time, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3117" id="l3117"> 3117</a> after [=substitution=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3118" id="l3118"> 3118</a> the shorthand must be parsed </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3119" id="l3119"> 3119</a> and the longhands must be given their appropriate values at that point. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3120" id="l3120"> 3120</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3121" id="l3121"> 3121</a> <wpt pathprefix="css/css-variables"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3122" id="l3122"> 3122</a> variable-reference-36.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3123" id="l3123"> 3123</a> variable-reference-37.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3124" id="l3124"> 3124</a> variable-reference-38.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3125" id="l3125"> 3125</a> variable-substitution-shorthands.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3126" id="l3126"> 3126</a> vars-background-shorthand-001.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3127" id="l3127"> 3127</a> vars-font-shorthand-001.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3128" id="l3128"> 3128</a> </wpt> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3129" id="l3129"> 3129</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3130" id="l3130"> 3130</a> Note: When a shorthand is written without an [=arbitrary substitution function=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3131" id="l3131"> 3131</a> it is parsed and separated out into its component [=longhand properties=] at parse time; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3132" id="l3132"> 3132</a> the longhands then participate in the [=cascade=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3133" id="l3133"> 3133</a> with the [=shorthand property=] more or less discarded. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3134" id="l3134"> 3134</a> When the shorthand contains a ''var()'', however, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3135" id="l3135"> 3135</a> this can't be done, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3136" id="l3136"> 3136</a> as the ''var()'' could be substituted with anything. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3137" id="l3137"> 3137</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3138" id="l3138"> 3138</a> [=Pending-substitution values=] must be serialized as the empty string, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3139" id="l3139"> 3139</a> if an API allows them to be observed. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3140" id="l3140"> 3140</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3141" id="l3141"> 3141</a> <wpt pathprefix="css/css-variables"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3142" id="l3142"> 3142</a> variable-definition-border-shorthand-serialize.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3143" id="l3143"> 3143</a> vars-border-shorthand-serialize.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3144" id="l3144"> 3144</a> </wpt> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3145" id="l3145"> 3145</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3146" id="l3146"> 3146</a> ---- </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3147" id="l3147"> 3147</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3148" id="l3148"> 3148</a> [=Shorthand properties=] are serialized </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3149" id="l3149"> 3149</a> by gathering the values of their component [=longhand properties=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3150" id="l3150"> 3150</a> and synthesizing a value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3151" id="l3151"> 3151</a> that will parse into the same set of values. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3152" id="l3152"> 3152</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3153" id="l3153"> 3153</a> If all of the component [=longhand properties=] for a given [=shorthand=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3154" id="l3154"> 3154</a> are [=pending-substitution values=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3155" id="l3155"> 3155</a> from the same original shorthand value, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3156" id="l3156"> 3156</a> the [=shorthand property=] must serialize to that original </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3157" id="l3157"> 3157</a> ([=arbitrary substitution function=]-containing) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3158" id="l3158"> 3158</a> value. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3159" id="l3159"> 3159</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3160" id="l3160"> 3160</a> Otherwise, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3161" id="l3161"> 3161</a> if any of the component [=longhand properties=] for a given [=shorthand=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3162" id="l3162"> 3162</a> are [=pending-substitution values=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3163" id="l3163"> 3163</a> or contain [=arbitrary substitution functions=] of their own that have not yet been [=substituted=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3164" id="l3164"> 3164</a> the [=shorthand property=] must serialize to the empty string. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3165" id="l3165"> 3165</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3166" id="l3166"> 3166</a>  </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3176" id="l3176"> 3176</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3177" id="l3177"> 3177</a> <h3 id=long-substitution oldids=long-variables> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3178" id="l3178"> 3178</a> Safely Handling Overly-Long Substitution</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3179" id="l3179"> 3179</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3180" id="l3180"> 3180</a> Naively implemented, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3181" id="l3181"> 3181</a> some [=arbitrary substitution functions=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3182" id="l3182"> 3182</a> (such as ''var()'') </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3183" id="l3183"> 3183</a> can be used in a variation of the "billion laughs attack": </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3184" id="l3184"> 3184</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3185" id="l3185"> 3185</a> <div class=example> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3186" id="l3186"> 3186</a> <pre lang=css> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3187" id="l3187"> 3187</a> .foo { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3188" id="l3188"> 3188</a> --prop1: lol; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3189" id="l3189"> 3189</a> --prop2: var(--prop1) var(--prop1); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3190" id="l3190"> 3190</a> --prop3: var(--prop2) var(--prop2); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3191" id="l3191"> 3191</a> --prop4: var(--prop3) var(--prop3); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3192" id="l3192"> 3192</a> /* etc */ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3193" id="l3193"> 3193</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3194" id="l3194"> 3194</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3195" id="l3195"> 3195</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3196" id="l3196"> 3196</a> In this short example, ''--prop4''’s computed value is ''lol lol lol lol lol lol lol lol'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3197" id="l3197"> 3197</a> containing 8 copies of the original ''lol''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3198" id="l3198"> 3198</a> Every additional level added to this doubles the number of identifiers; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3199" id="l3199"> 3199</a> extending it to a mere 30 levels, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3200" id="l3200"> 3200</a> the work of a few minutes by hand, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3201" id="l3201"> 3201</a> would make ''--prop30'' contain <em>nearly a billion instances</em> of the identifier. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3202" id="l3202"> 3202</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3203" id="l3203"> 3203</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3204" id="l3204"> 3204</a> To avoid this sort of attack, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3205" id="l3205"> 3205</a> UAs must impose a UA-defined limit on the allowed length of the token stream </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3206" id="l3206"> 3206</a> that an [=arbitrary substitution function=] expands into. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3207" id="l3207"> 3207</a> If an [=arbitrary substitution function=] would expand into a longer token stream than this limit, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3208" id="l3208"> 3208</a> it instead is replaced with the [=guaranteed-invalid value=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3209" id="l3209"> 3209</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3210" id="l3210"> 3210</a> <wpt pathprefix="css/css-variables"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3211" id="l3211"> 3211</a> long-variable-reference-crash.html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3212" id="l3212"> 3212</a> variable-exponential-blowup.html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3213" id="l3213"> 3213</a> </wpt> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3214" id="l3214"> 3214</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3215" id="l3215"> 3215</a> This specification does not define what size limit should be imposed. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3216" id="l3216"> 3216</a> However, since there are valid use-cases for custom properties that contain a kilobyte or more of text, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3217" id="l3217"> 3217</a> it's recommended that the limit be set relatively high. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3218" id="l3218"> 3218</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3219" id="l3219"> 3219</a> Note: The general principle that UAs are allowed to violate standards due to resource constraints </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3220" id="l3220"> 3220</a> is still generally true here; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3221" id="l3221"> 3221</a> a UA might, separately, have limits on how long of a custom property they can support, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3222" id="l3222"> 3222</a> or how large of an identifier they can support. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3223" id="l3223"> 3223</a> This section calls out this attack specifically </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3224" id="l3224"> 3224</a> because of its long history, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3225" id="l3225"> 3225</a> and the fact that it can be done without any of the pieces </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3226" id="l3226"> 3226</a> <em>seeming</em> to be too large on first inspection. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3227" id="l3227"> 3227</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3228" id="l3228"> 3228</a> <h2 id="boolean-logic"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3229" id="l3229"> 3229</a> Appendix B: Boolean Logic</h2> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3230" id="l3230"> 3230</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3231" id="l3231"> 3231</a> In order to accommodate future extensions of CSS, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3232" id="l3232"> 3232</a> <<boolean-expr[]>> productions generally interpret their <<general-enclosed>> grammar branch as unknown, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3233" id="l3233"> 3233</a> and their boolean logic is resolved using 3-value Kleene logic. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3234" id="l3234"> 3234</a> In some cases (such as ''@supports''), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3235" id="l3235"> 3235</a> <<general-enclosed>> is instead defined as false; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3236" id="l3236"> 3236</a> in which case the logic devolves to standard boolean algebra. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3237" id="l3237"> 3237</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3238" id="l3238"> 3238</a> 3-value boolean logic is applied recursively </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3239" id="l3239"> 3239</a> to a boolean condition |test| as follows: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3240" id="l3240"> 3240</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3241" id="l3241"> 3241</a> * A leaf-level |test| resolves to </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3242" id="l3242"> 3242</a> true, false, or unknown, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3243" id="l3243"> 3243</a> as defined by the relevant specification. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3244" id="l3244"> 3244</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3245" id="l3245"> 3245</a> * ''not |test|'' evaluates to </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3246" id="l3246"> 3246</a> true if its contained |test| is false, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3247" id="l3247"> 3247</a> false if it's true, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3248" id="l3248"> 3248</a> and unknown if it's unknown. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3249" id="l3249"> 3249</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3250" id="l3250"> 3250</a> * Multiple |test|s connected with ''and'' evaluate to </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3251" id="l3251"> 3251</a> true if <em>all</em> of those |test|s are true, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3252" id="l3252"> 3252</a> false if <em>any</em> of them are false, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3253" id="l3253"> 3253</a> and unknown otherwise (i.e. if at least one unknown, but no false). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3254" id="l3254"> 3254</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3255" id="l3255"> 3255</a> * Multiple |test|s connected with ''or'' evaluate to </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3256" id="l3256"> 3256</a> true if <em>any</em> of those |test|s are true, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3257" id="l3257"> 3257</a> false if <em>all</em> of them are false, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3258" id="l3258"> 3258</a> and unknown otherwise (i.e. at least one unknown, but no true). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3259" id="l3259"> 3259</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3260" id="l3260"> 3260</a> If a “top-level” <<boolean-expr[]>> is unknown, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3261" id="l3261"> 3261</a> and the containing context doesn't otherwise define </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3262" id="l3262"> 3262</a> how to handle unknown conditions, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3263" id="l3263"> 3263</a> it evaluates to false. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3264" id="l3264"> 3264</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3265" id="l3265"> 3265</a> Note: That is, unknown doesn't “escape” a 3-value boolean expression </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3266" id="l3266"> 3266</a> unless explicitly handled, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3267" id="l3267"> 3267</a> similar to how <code>NaN</code> doesn't “escape” a [=top-level calculation=]). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3268" id="l3268"> 3268</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3269" id="l3269"> 3269</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3270" id="l3270"> 3270</a>  </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3280" id="l3280"> 3280</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3281" id="l3281"> 3281</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3282" id="l3282"> 3282</a> <h2 class="no-num" id="acknowledgments"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3283" id="l3283"> 3283</a> Acknowledgments</h2> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3284" id="l3284"> 3284</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3285" id="l3285"> 3285</a> Firstly, the editors would like to thank </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3286" id="l3286"> 3286</a> all of the contributors to the <a href="https://www.w3.org/TR/css-values-4/#acknowledgments">previous level</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3287" id="l3287"> 3287</a> of this module. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3288" id="l3288"> 3288</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3289" id="l3289"> 3289</a> Secondly, we would like to acknowledge </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3290" id="l3290"> 3290</a> Guillaume Lebas, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3291" id="l3291"> 3291</a> L. David Baron, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3292" id="l3292"> 3292</a> Mike Bremford, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3293" id="l3293"> 3293</a> Sebastian Zartner, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3294" id="l3294"> 3294</a> and <a href="https://github.com/w3c/csswg-drafts/issues/6245">especially Scott Kellum</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3295" id="l3295"> 3295</a> for their ideas, comments, and suggestions for Level 5; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3296" id="l3296"> 3296</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3297" id="l3297"> 3297</a> <h2 class="no-num" id="changes"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3298" id="l3298"> 3298</a> Changes</h2> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3299" id="l3299"> 3299</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3300" id="l3300"> 3300</a> Changes since the <a href="https://www.w3.org/TR/2024/WD-css-values-5-20240917/">17 September 2024 Working Draft</a>: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3301" id="l3301"> 3301</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3302" id="l3302"> 3302</a> * Changed the “comma-upgrading” behavior of allowing semicolons </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3303" id="l3303"> 3303</a> to “comma-wrapping” using braces. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3304" id="l3304"> 3304</a> (<a href="https://github.com/w3c/csswg-drafts/issues/9539">Issue 9539</a>) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3305" id="l3305"> 3305</a> * Added ''if()''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3306" id="l3306"> 3306</a> (<a href="https://github.com/w3c/csswg-drafts/issues/10064">Issue 10064</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3307" id="l3307"> 3307</a> <a href="https://github.com/w3c/csswg-drafts/issues/5009#issuecomment-2442787271">Issue 5009</a>) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3308" id="l3308"> 3308</a> * Added ''inherit()''. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3309" id="l3309"> 3309</a> (<a href="https://github.com/w3c/csswg-drafts/issues/2864">Issue 2864</a>) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3310" id="l3310"> 3310</a> * Redesigned ''attr()''. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3311" id="l3311"> 3311</a> (<a href="https://github.com/w3c/csswg-drafts/issues/10437">Issue 10437</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3312" id="l3312"> 3312</a> <a href="https://github.com/w3c/csswg-drafts/issues/5092">Issue 5092</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3313" id="l3313"> 3313</a> <a href="https://github.com/w3c/csswg-drafts/issues/5136">Issue 5136</a>) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3314" id="l3314"> 3314</a> * Changed ''*progress()'' functions to use commas for argument separation, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3315" id="l3315"> 3315</a> for consistency with ''*mix()'' and ''clamp()''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3316" id="l3316"> 3316</a> (<a href="https://github.com/w3c/csswg-drafts/issues/10489">Issue 10489</a>) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3317" id="l3317"> 3317</a> * Defined new <<boolean-expr[]>> multipler for the [=value definition syntax=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3318" id="l3318"> 3318</a> (<a href="https://github.com/w3c/csswg-drafts/issues/10457">Issue 10457</a>) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3319" id="l3319"> 3319</a> * Imported definition of [=arbitrary substitution function=] from [[CSS-VARIABLES-1]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3320" id="l3320"> 3320</a> (<a href="https://github.com/w3c/csswg-drafts/issues/10679">Issue 10679</a>) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3321" id="l3321"> 3321</a> * Imported the <<syntax>> production from [[css-properties-values-api-1]] (for use in ''attr()''). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3322" id="l3322"> 3322</a> * Corrected errors in the syntax of ''media-progress()'' and ''container-progress()''. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3323" id="l3323"> 3323</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3324" id="l3324"> 3324</a> Changes since the <a href="https://www.w3.org/TR/2024/WD-css-values-5-20240913/">First Public Working Draft</a> include: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3325" id="l3325"> 3325</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3326" id="l3326"> 3326</a> * Incorporated the definition of <<position>>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3327" id="l3327"> 3327</a> extending it to handle [=flow-relative=] positions. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3328" id="l3328"> 3328</a> (<a href="https://github.com/w3c/csswg-drafts/issues/549#issuecomment-1823607623">Issue 549</a>) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3329" id="l3329"> 3329</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3330" id="l3330"> 3330</a> <h3 class=no-num id="additions-L4"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3331" id="l3331"> 3331</a> Additions Since Level 4</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3332" id="l3332"> 3332</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3333" id="l3333"> 3333</a> Additions since <a href="http://www.w3.org/TR/css-values-4/">CSS Values and Units Level 4</a>: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3334" id="l3334"> 3334</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3335" id="l3335"> 3335</a> * Added the “comma-wrapping” ''{}'' notation for function arguments. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3336" id="l3336"> 3336</a> * Defined several <<url-modifier>>s for <<url>> functions. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3337" id="l3337"> 3337</a> * Extended <<position>> to handle [=flow-relative=] positions. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3338" id="l3338"> 3338</a> (<a href="https://github.com/w3c/csswg-drafts/issues/549#issuecomment-1823607623">Issue 549</a>) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3339" id="l3339"> 3339</a> * Added the [[#progress|*-progress()]] family of functions, to represent interpolation progress between two values. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3340" id="l3340"> 3340</a> * Added the [[#mixing|*-mix()]] family of functions, to represent actually interpolating between two values. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3341" id="l3341"> 3341</a> * 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. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3342" id="l3342"> 3342</a> * Added ''if()'' for inline conditionals. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3343" id="l3343"> 3343</a> * Added ''inherit()''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3344" id="l3344"> 3344</a> * Added the ''toggle()'' and ''attr()'' functions. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3345" id="l3345"> 3345</a> * Added the ''random()'' and ''random-item()'' functions. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3346" id="l3346"> 3346</a> * Added the ''sibling-count()'' and ''sibling-index()'' functions. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3347" id="l3347"> 3347</a> * Added the ''calc-size()'' function, and the related 'interpolate-size' property. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3348" id="l3348"> 3348</a> * Added the <<boolean-expr[]>> syntax notation to the [=value definition syntax=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3349" id="l3349"> 3349</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3350" id="l3350"> 3350</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3351" id="l3351"> 3351</a> <h2 class="no-num" id="security"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3352" id="l3352"> 3352</a> Security Considerations</h2> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3353" id="l3353"> 3353</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3354" id="l3354"> 3354</a> This specification allows CSS <<url>> values to have various aspects of their request modified. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3355" id="l3355"> 3355</a> Although this is new to CSS, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3356" id="l3356"> 3356</a> every ability is already present in <{img}> or <{link}>, as well as via JavaScript. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3357" id="l3357"> 3357</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3358" id="l3358"> 3358</a> The ''attr()'' function allows HTML attribute values </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3359" id="l3359"> 3359</a> to be used in CSS values, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3360" id="l3360"> 3360</a> potentially exposing sensitive information </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3361" id="l3361"> 3361</a> that was previously not accessible via CSS. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3362" id="l3362"> 3362</a> See [[#attr-security]]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3363" id="l3363"> 3363</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3364" id="l3364"> 3364</a> <h2 class="no-num" id="privacy"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3365" id="l3365"> 3365</a> Privacy Considerations</h2> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3366" id="l3366"> 3366</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3367" id="l3367"> 3367</a> This specification defines units that expose the user's screen size </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3368" id="l3368"> 3368</a> and default font size, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3369" id="l3369"> 3369</a> but both are trivially observable from JS, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3370" id="l3370"> 3370</a> so they do not constitute a new privacy risk. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3371" id="l3371"> 3371</a> Similarly the ''media-progress()'' notation exposes </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3372" id="l3372"> 3372</a> information about the user's environment and preferences </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3373" id="l3373"> 3373</a> that are already observiable via [=media queries=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3374" id="l3374"> 3374</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3375" id="l3375"> 3375</a> The ''attr()'' function allows HTML attribute values </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3376" id="l3376"> 3376</a> to be used in CSS values, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3377" id="l3377"> 3377</a> potentially exposing sensitive information </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l3378" id="l3378"> 3378</a> that was previously not accessible via CSS. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3379" id="l3379"> 3379</a> See [[#attr-security]]. </pre> </div> </div> <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>