> becomes
+[=invalid at computed-value time=].
+
+Evaluating Custom Functions {#evaluating-custom-functions}
+----------------------------------------------------------
+
+
+ To evaluate a custom function,
+ with |function| being a [=custom function=],
+ |dashed function| being the <> invoking that |function|,
+ and |dependency values| being a [=list=] of values.
+
+ 1. If the number of values in |dashed function|'s argument list
+ is greater than the number of values in |function|'s [=function parameter|parameters=],
+ return failure.
+ 2. For each value |parameter| in |function|'s [=function parameter|parameters=],
+ let |argument| be the corresponding value in |dashed function|'s argument list
+ at the same index:
+ * If |argument| does not exist,
+ set |argument| to the [=guaranteed-invalid value=].
+ * Replace the value in |dashed function|'s argument list
+ with the result of [=resolving an argument=],
+ using |argument| as value,
+ and |parameter| as parameter.
+ 3. Let |result| be the [=resolved local value=]
+ of the '@function/result' descriptor,
+ using |function|, |dashed function|, and |dependency values|.
+ 4. If |function| has a [=return type=],
+ set |result| to the result of [=resolve a typed value|resolving a typed value=],
+ using |result| as the value,
+ and the [=syntax definition=] associated with the [=return type=] as the syntax.
+ 5. If |result| is the [=guaranteed-invalid value=],
+ return failure.
+ 6. Otherwise,
+ return |result|.
+
+
+
+ To
resolve an argument,
+ with value |value|,
+ and [=function parameter|parameter=] |parameter|:
+
+ 1. If |value| is not the [=guaranteed-invalid value=],
+ and |parameter| has a [=parameter type|type=],
+ set |value| to the result of [=resolve a typed value|resolving a typed value=]
+ using |value| as the value,
+ and the [=syntax definition=] associated with |parameter|'s type as the syntax.
+
This step may cause |value| to become [=guaranteed-invalid value|guaranteed-invalid=].
+ 2. If |value| is the [=guaranteed-invalid value=],
+ and |parameter| has a [=default value=],
+ set |value| to one of the following:
+
+ : If |parameter| has a [=parameter type|type=]
+ :: The result of [=resolve a typed value|resolving a typed value=]
+ using the |parameter|'s [=default value=] as the value,
+ and the [=syntax definition=] associated with |parameter|'s type as the syntax.
+
+ : Otherwise
+ :: The |parameter|'s [=default value=].
+
+ 3. Return |value|.
+
+
+ To
resolve a typed value,
+ with value |value|,
+ and [=syntax definition=] |syntax|:
+
+ 1. If |value| is the [=guaranteed-invalid value=],
+ return |value|.
+ 2.
Compute
+ |value| as if it were the value associated with a [=registered custom property=]
+ whose [=syntax definition=] is |syntax|.
+ 3. If this would lead to a declaration being [=invalid at computed-value time=],
+ return the [=guaranteed-invalid value=].
+ 4. Otherwise, return that value.
+
+ To
locally substitute a var() within a value,
+ with |function| being a [=custom function=],
+ |dashed function| being the <
> invoking that |function|,
+ and |dependency values| being a [=list=] of values:
+
+ 1. Let |substitution value| be one of the following options,
+ depending on the [=custom property=] named in the first argument of the ''var()'' function:
+
+
+ : If the [=custom property=] name matches a [=local variable=] within |function|
+ :: The [=resolved local value=] of that [=local variable=].
+
+ : Otherwise, if the [=custom property=] name matches a [=function parameter|parameter=] within |function|
+ :: The corresponding argument value within the |dashed function|.
+
+ : Otherwise, if the [=custom property=] name matches a [=function dependency|dependency=] within |function|
+ :: The corresponding value of that [=function dependency|dependency=]
+ within |dependency values|.
+
+ : Otherwise
+ :: The [=guaranteed-invalid value=].
+
+
+ 2. If |substitution value| is not the [=guaranteed-invalid value=],
+ replace the ''var()'' function by that value.
+
+ 3. Otherwise, if the ''var()'' function has a fallback value as its second argument,
+ replace the ''var()'' function by the [=resolved local value|locally resolved=] fallback value.
+
+ 4. Otherwise, return failure.
+
+
+ @function --mypi() {
+ result: 3;
+ result: 3.14;
+ }
+
+ The value of the '@function/result' descriptor of
--mypi
+ is
3.14.
+
+
+
+ @function --circle-area(--r) {
+ result: calc(pi * var(--r2));
+ --r2: var(--r) * var(--r);
+ }
+
+ [=Local variable=] descriptors may appear before or after
+ they are referenced.
+
+
+
+ @function --suitable-font-size() {
+ result: 16px;
+ @media (width > 1000px) {
+ result: 20px;
+ }
+ }
+
+ The value of the '@function/result' descriptor
+ is
20px if the media query's condition is true,
+ and
16px otherwise.
+
+
+ Note that due to the execution model,
+ "early return" is not possible within a ''@function'':
+
+ @function --suitable-font-size() {
+ @media (width > 1000px) {
+ result: 20px;
+ }
+ result: 16px;
+ }
+
+ The value of the '@function/result' descriptor
+ is always
16px in the above example.
+
+
+ [=Local variables=] are also valid within conditional rules:
+
+ @function --suitable-font-size() {
+ --size: 16px;
+ @media (width > 1000px) {
+ --size: 20px;
+ }
+ result: var(--size);
+ }
+
+
+[Exposed=Window]
+interface CSSFunctionRule : CSSGroupingRule { };
+
+
+While declarations may be specified directly within a ''@function'' rule,
+they are not represented as such in the CSSOM.
+Instead, consecutive segments of declarations
+appear as if wrapped in ''@nest'' rules.
+
+Note: This also applies to the "leading" declarations in the ''@function'' rule,
+ i.e those that do not follow another nested rule.
+
+
+
+ @function --bar() {
+ --x: 42;
+ result: var(--y);
+ @media (width > 1000px) {
+ /* ... */
+ }
+ --y: var(--x);
+ }
+
+
+ The above will appear in the CSSOM as:
+
+
+ @function --bar() {
+ @nest {
+ --x: 42;
+ result: var(--y);
+ }
+ @media (width > 1000px) {
+ /* ... */
+ }
+ @nest {
+ --y: var(--x);
+ }
+ }
+
+
style attribute of the ''@nest'' rule
+ should probably not be a regular {{CSSStyleDeclaration}},
+ since only custom properties
+ and the '@function/result' descriptor
+ are relevant.