diff --git a/tr/algorithms/css-values-5.json b/tr/algorithms/css-values-5.json index 2917fadad61b..c478a57d9d7b 100644 --- a/tr/algorithms/css-values-5.json +++ b/tr/algorithms/css-values-5.json @@ -4,6 +4,32 @@ "url": "https://www.w3.org/TR/css-values-5/" }, "algorithms": [ + { + "name": "parse with a ", + "href": "https://www.w3.org/TR/css-values-5/#parse-with-a-syntax", + "html": "To parse with a <syntax> given a string or list or component values values,\n\ta <syntax> value syntax,\n\tand optionally an element el for context,\n\tperform the following steps.\n\tIt returns either CSS values,\n\tor the guaranteed-invalid value.", + "rationale": ".algorithm", + "steps": [ + { + "html": "

Parse a list of component values from values,\nand let raw parse be the result.

" + }, + { + "html": "

If el was given, substitute arbitrary substitution functions in raw parse,\nand set raw parse to that result.

" + }, + { + "html": "

parse values according to syntax,\nwith a * value treated as <declaration-value>?,\nand let parsed result be the result.\nIf syntax used a | combinator,\nlet parsed result be the parse result from the first matching clause.

" + }, + { + "html": "

If parsed result is failure,\nreturn the guaranteed-invalid value.

" + }, + { + "html": "

Assert: parsed result is now a well-defined list of one or more CSS values,\nsince each branch of a <syntax> defines an unambiguous parse result\n(or the * syntax is unambiguous on its own).

" + }, + { + "html": "

Return parsed result.

" + } + ] + }, { "name": "/", "href": "https://www.w3.org/TR/css-values-5/#typedef-request-url-modifier-crossorigin-modifier", @@ -42,19 +68,34 @@ ] }, { - "name": "substitute an attr()", - "href": "https://www.w3.org/TR/css-values-5/#substitute-an-attr", - "html": "To substitute an attr():", - "rationale": "if", + "name": "resolve an if() function", + "href": "https://www.w3.org/TR/css-values-5/#resolve-an-if-function", + "html": "To resolve an if() function,\n\treturn the <declaration-value>?\n\tassociated with the first <if-condition> that is true;\n\tif none are true,\n\treturn nothing (an empty token stream).", + "rationale": "To " + }, + { + "name": "resolve an inherit() function", + "href": "https://www.w3.org/TR/css-values-5/#resolve-an-inherit-function", + "html": "To resolve an inherit() function,\n\treturn the inherited value of the custom property specified by the first argument,\n\tand (if specified) the fallback specified by the second argument.", + "rationale": "To " + }, + { + "name": "resolve an attr() function", + "href": "https://www.w3.org/TR/css-values-5/#resolve-an-attr-function", + "html": "To resolve an attr() function:", + "rationale": ".algorithm", "steps": [ { - "html": "

If the attr() function has a substitution value,\nreplace the attr() function by the substitution value.

" + "html": "

Let el be the element that the style containing the attr() function\nis being applied to.\nLet attr name be the attribute name specified in the function.\nLet syntax be the <syntax> specified in the function,\nor null if it was omitted.\nLet fallback be the <declaration-value>? argument specified in the function,\nor the guaranteed-invalid value if it was omitted.

" + }, + { + "html": "

If there is no attribute named attr name on el,\nreturn the guaranteed-invalid value and fallback.\nOtherwise, let attr value be that attribute’s value.

" }, { - "html": "

Otherwise, if the attr() function has a fallback value as its last argument,\nreplace the attr() function by the fallback value.\nIf there are any var() or attr() references in the fallback, substitute them as well.

" + "html": "

If syntax is null,\nreturn a CSS <string> whose value is attr value.

" }, { - "html": "

Otherwise, the property containing the attr() function\nis invalid at computed-value time.

" + "html": "

Parse with a <syntax> attr value, with syntax and el.\nReturn the result and fallback.

" } ] }, @@ -63,13 +104,13 @@ "rationale": "if", "steps": [ { - "html": "

The used value of the minimum calculation.

" + "html": "

The used value of the minimum calculation.

" }, { - "html": "

The used value of the maximum calculation.

" + "html": "

The used value of the maximum calculation.

" }, { - "html": "

The used value of the step calculation, if present,\nor null otherwise.

" + "html": "

The used value of the step calculation, if present,\nor null otherwise.

" }, { "html": "

The <dashed-ident> part of the <random-caching-options>, if present,\nor null otherwise.

" @@ -97,7 +138,7 @@ { "name": "calc-size()/canonicalize for interpolation", "href": "https://www.w3.org/TR/css-values-5/#calc-size-canonicalize-for-interpolation", - "html": "To canonicalize for interpolation a calc-size() function: \n
\n
If the calc-size basis is a calc-size() function itself\n
\n

The calc-size basis of the outer function\nis replaced with that of the inner function,\nand the inner function’s calc-size calculation is substituted into the outer function’s calc-size calculation.

\n
Otherwise, if the calc-size basis is a <calc-sum> whose type matches <length> (no percentage present)\n
\n

Replace the basis with any,\nand the original basis is substituted into the calc-size calculation.

\n
Otherwise, if the calc-size basis is any other <calc-sum> (contains a percentage)\n
\n

Replace the basis with 100% and the original basis is de-percentified,\nthen substituted into the calc-size calculation.

\n
\n

(The above is performed recursively, if necessary.)

\n

If any substitute into a calc-size calculation returns failure,\n\t\tthe entire operation immediately returns failure.

", + "html": "To canonicalize for interpolation a calc-size() function: \n
\n
If the calc-size basis is a calc-size() function itself\n
\n

The calc-size basis of the outer function\nis replaced with that of the inner function,\nand the inner function’s calc-size calculation is substituted into the outer function’s calc-size calculation.

\n
Otherwise, if the calc-size basis is a <calc-sum> whose type matches <length> (no percentage present)\n
\n

Replace the basis with any,\nand the original basis is substituted into the calc-size calculation.

\n
Otherwise, if the calc-size basis is any other <calc-sum> (contains a percentage)\n
\n

Replace the basis with 100% and the original basis is de-percentified,\nthen substituted into the calc-size calculation.

\n
\n

(The above is performed recursively, if necessary.)

\n

If any substitute into a calc-size calculation returns failure,\n\t\tthe entire operation immediately returns failure.

", "rationale": ".switch", "steps": [ { @@ -126,7 +167,7 @@ "rationale": ".algorithm", "steps": [ { - "html": "

Replace every instance of a <percentage-token> in calc with (size * N),\nwhere N is the percentage’s value divided by 100.\nReturn calc.

" + "html": "

Replace every instance of a <percentage-token> in calc with (size * N),\nwhere N is the percentage’s value divided by 100.\nReturn calc.

" } ] }, @@ -169,6 +210,77 @@ ] } ] + }, + { + "name": "substitute arbitrary substitution function", + "href": "https://www.w3.org/TR/css-values-5/#substitute-arbitrary-substitution-function", + "html": "To substitute arbitrary substitution functions in a value:", + "rationale": ".algorithm", + "steps": [ + { + "html": "For each arbitrary substitution function func in value:", + "rationale": "resolve", + "steps": [ + { + "html": "

Resolve func.\nLet result be the returned result,\nand fallback be the returned fallback.

\n

If no result was returned,\nset result to the guaranteed-invalid value.\nIf no fallback was returned,\nset fallback to the guaranteed-invalid value.

" + }, + { + "html": "
\n
If result does not contain the guaranteed-invalid value\n
\n

Replace func in value with result.

\n
Otherwise, if fallback does not contain the guaranteed-invalid value\n
\n

Replace func in value with fallback.

\n
Otherwise\n
\n

Replace all of value with the guaranteed-invalid value.\nExit this algorithm.

\n
", + "rationale": ".switch", + "steps": [ + { + "operation": "switch", + "steps": [ + { + "case": "If result does not contain the guaranteed-invalid value", + "html": "

Replace func in value with result.

" + }, + { + "case": "Otherwise, if fallback does not contain the guaranteed-invalid value", + "html": "

Replace func in value with fallback.

" + }, + { + "case": "Otherwise", + "html": "

Replace all of value with the guaranteed-invalid value.\nExit this algorithm.

" + } + ] + } + ] + } + ] + }, + { + "html": "

If there are still arbitrary substitution functions in value (due to substitution),\nrepeat the previous step.

" + }, + { + "html": "

Grammar-check value according to its context as normal.\nIf it is not valid at this point,\nreplace value with the guaranteed-invalid value.

" + } + ] + }, + { + "name": "invalid at computed-value time", + "href": "https://www.w3.org/TR/css-values-5/#invalid-at-computed-value-time", + "html": "When substitution results in a property’s value\n\tcontaining the guaranteed-invalid value,\n\tthis makes the declaration invalid at computed-value time.\n\tWhen this happens,\n\tthe computed value is one of the following\n\tdepending on the property’s type:", + "rationale": ".switch", + "steps": [ + { + "operation": "switch", + "steps": [ + { + "case": "The property is a non-registered custom property", + "html": "

The computed value is the guaranteed-invalid value.

" + }, + { + "case": "The property is a registered custom property with universal syntax", + "html": "

The computed value is the guaranteed-invalid value.

" + }, + { + "case": "Otherwise", + "html": "

Either the property’s inherited value\nor its initial value\ndepending on whether the property is inherited or not, respectively,\nas if the property’s value had been specified as the unset keyword.

" + } + ] + } + ] } ] } \ No newline at end of file diff --git a/tr/algorithms/paint-timing.json b/tr/algorithms/paint-timing.json index 289a2e741cf8..9a83e2b48a17 100644 --- a/tr/algorithms/paint-timing.json +++ b/tr/algorithms/paint-timing.json @@ -40,10 +40,7 @@ "html": "

Let record be a pending image record with element element, request imageRequest and loadTime now.

" }, { - "html": "

If imageRequest is a data URL [RFC2397], or the timing allow check succeeds for imageRequest’s resource, add record to root’s images pending rendering.

" - }, - { - "html": "

Otherwise, report element timing given root, now, «record» and «».

" + "html": "

Add record to root’s images pending rendering.

" } ] }, @@ -136,7 +133,7 @@ "html": "

Report largest contentful paint given document, paintTimestamp, paintedImages and paintedTextNodes.

" }, { - "html": "

Report element timing given document, paintTimestamp, paintedImages and paintedTextNodes.

" + "html": "

Report element timing given document, paintTimestamp, paintedImages and paintedTextNodes.

" } ] }, diff --git a/tr/css/css-values-5.json b/tr/css/css-values-5.json index cb65633f4be4..34475fe2e4c3 100644 --- a/tr/css/css-values-5.json +++ b/tr/css/css-values-5.json @@ -40,6 +40,54 @@ "atrules": [], "selectors": [], "values": [ + { + "name": "", + "prose": "Several contexts (such as @media, @supports, if(), ...) specify conditions, and allow combining those conditions with boolean logic (and/or/not/grouping). Because they use the same non-trivial recursive syntax structure, the special production represents this pattern generically.", + "href": "https://www.w3.org/TR/css-values-5/#typedef-boolean-expr", + "type": "type" + }, + { + "name": "", + "href": "https://www.w3.org/TR/css-values-5/#typedef-syntax", + "type": "type", + "value": "'*' | [ ]* | " + }, + { + "name": "", + "href": "https://www.w3.org/TR/css-values-5/#typedef-syntax-component", + "type": "type", + "value": " ? | '<' transform-list '>'" + }, + { + "name": "", + "href": "https://www.w3.org/TR/css-values-5/#typedef-syntax-single-component", + "type": "type", + "value": "'<' '>' | " + }, + { + "name": "", + "href": "https://www.w3.org/TR/css-values-5/#typedef-syntax-type-name", + "type": "type", + "value": "angle | color | custom-ident | image | integer | length | length-percentage | number | percentage | resolution | string | time | url | transform-function" + }, + { + "name": "", + "href": "https://www.w3.org/TR/css-values-5/#typedef-syntax-combinator", + "type": "type", + "value": "'|'" + }, + { + "name": "", + "href": "https://www.w3.org/TR/css-values-5/#typedef-syntax-multiplier", + "type": "type", + "value": "[ '#' | '+' ]" + }, + { + "name": "", + "href": "https://www.w3.org/TR/css-values-5/#typedef-syntax-string", + "type": "type", + "value": "" + }, { "name": "", "prose": "s are s that affect the ’s resource request by applying associated URL request modifier steps. See CSS Values 4 § 4.5.4 URL Processing Model.", @@ -282,7 +330,7 @@ }, { "name": "progress()", - "prose": "The progress() functional notation returns a value representing the position of one calculation (the progress value) between two other calculations (the progress start value and progress end value). The argument calculations can resolve to any , , or , but must have a consistent type or else the function is invalid. The result will be a , made consistent with the consistent type of the arguments.", + "prose": "The progress() functional notation returns a value representing the position of one calculation (the progress value) between two other calculations (the progress start value and progress end value). progress() is a math function.", "href": "https://www.w3.org/TR/css-values-5/#funcdef-progress", "type": "function" }, @@ -290,7 +338,7 @@ "name": "", "href": "https://www.w3.org/TR/css-values-5/#typedef-progress-fn", "type": "type", - "value": "progress( from to )" + "value": "progress(, , )" }, { "name": "media-progress()", @@ -302,7 +350,7 @@ "name": "", "href": "https://www.w3.org/TR/css-values-5/#typedef-media-progress", "type": "type", - "value": "media-progress( from to )" + "value": "media-progress(, , )" }, { "name": "container-progress()", @@ -314,7 +362,7 @@ "name": "", "href": "https://www.w3.org/TR/css-values-5/#typedef-container-progress", "type": "type", - "value": "container-progress( [ of ]? from to )" + "value": "container-progress( [ of ]?, , )" }, { "name": "", @@ -387,7 +435,7 @@ "name": "", "href": "https://www.w3.org/TR/css-values-5/#typedef-mix", "type": "type", - "value": "mix( , , ) | mix( && of <'animation-name'> )" + "value": "mix( , , ) | mix( && of )" }, { "name": "first-valid()", @@ -401,6 +449,39 @@ "type": "type", "value": "first-valid( # )" }, + { + "name": "if()", + "prose": "The if() notation is an arbitrary substitution function that represents conditional values. Its argument consists of an ordered semi-colon–separated list of statements, each consisting of a condition followed by a colon followed by a value. An if() notation represents the value corresponding to the first condition in its argument list to be true; if no condition matches, then the if() notation represents an empty token stream.", + "href": "https://www.w3.org/TR/css-values-5/#funcdef-if", + "type": "function", + "values": [ + { + "name": "else", + "prose": "The else keyword represents a condition that is always true.", + "href": "https://www.w3.org/TR/css-values-5/#valdef-if-else", + "type": "value", + "value": "else" + } + ] + }, + { + "name": "", + "href": "https://www.w3.org/TR/css-values-5/#typedef-if", + "type": "type", + "value": "if( [ : ? ; ]* : ? ;? )" + }, + { + "name": "", + "href": "https://www.w3.org/TR/css-values-5/#typedef-if-condition", + "type": "type", + "value": " ]> | else" + }, + { + "name": "", + "href": "https://www.w3.org/TR/css-values-5/#typedef-if-test", + "type": "type", + "value": "supports( [ | : ] ) | media( ) | style( )" + }, { "name": "toggle()", "prose": "The toggle() expression allows descendant elements to cycle over a list of values instead of inheriting the same value.", @@ -413,91 +494,24 @@ "type": "type", "value": "toggle( # )" }, + { + "name": "inherit()", + "prose": "Like the inherit keyword, the inherit() functional notation resolves to the computed value of a property on the parent. Rather than resolving to the value of the same property, however, it resolves to the tokenized computed value of the property specified as its first argument. Its second argument, if present, is used as a fallback in case the first argument resolves to the guaranteed-invalid value.", + "href": "https://www.w3.org/TR/css-values-5/#funcdef-inherit", + "type": "function" + }, + { + "name": "", + "href": "https://www.w3.org/TR/css-values-5/#typedef-inherit", + "type": "type", + "value": "inherit( , ? )" + }, { "name": "attr()", "prose": "The attr() function substitutes the value of an attribute on an element into a property, similar to how the var() function substitutes a custom property value into a function.", "href": "https://www.w3.org/TR/css-values-5/#funcdef-attr", "type": "function", - "value": "attr( ? , ?)", - "values": [ - { - "name": "string", - "prose": "The substitution value is a CSS string, whose value is the literal value of the attribute. (No CSS parsing or \"cleanup\" of the value is performed.) No value triggers fallback.", - "href": "https://www.w3.org/TR/css-values-5/#valdef-attr-string", - "type": "value", - "value": "string" - }, - { - "name": "ident", - "prose": "The substitution value is a CSS , whose value is the literal value of the attribute, with leading and trailing ASCII whitespace stripped. (No CSS parsing of the value is performed.) If the attribute value, after trimming, is the empty string, there is instead no substitution value. If the ’s value is a CSS-wide keyword or default, there is instead no substitution value.", - "href": "https://www.w3.org/TR/css-values-5/#valdef-attr-ident", - "type": "value", - "value": "ident" - }, - { - "name": "color", - "prose": "Parse a component value from the attribute’s value. If the result is a or a named color ident, the substitution value is that result as a . Otherwise there is no substitution value.", - "href": "https://www.w3.org/TR/css-values-5/#valdef-attr-color", - "type": "value", - "value": "color" - }, - { - "name": "number", - "prose": "Parse a component value from the attribute’s value. If the result is a , the result is the substitution value. Otherwise, there is no substitution value.", - "href": "https://www.w3.org/TR/css-values-5/#valdef-attr-number", - "type": "value", - "value": "number" - }, - { - "name": "percentage", - "prose": "Parse a component value from the attribute’s value. If the result is a , the result is the substitution value. Otherwise, there is no substitution value.", - "href": "https://www.w3.org/TR/css-values-5/#valdef-attr-percentage", - "type": "value", - "value": "percentage" - }, - { - "name": "length", - "prose": "Parse a component value from the attribute’s value. If the result is a whose unit matches the given type, the result is the substitution value. Otherwise, there is no substitution value.", - "href": "https://www.w3.org/TR/css-values-5/#valdef-attr-length", - "type": "value", - "value": "length" - }, - { - "name": "angle", - "prose": "Parse a component value from the attribute’s value. If the result is a whose unit matches the given type, the result is the substitution value. Otherwise, there is no substitution value.", - "href": "https://www.w3.org/TR/css-values-5/#valdef-attr-angle", - "type": "value", - "value": "angle" - }, - { - "name": "time", - "prose": "Parse a component value from the attribute’s value. If the result is a whose unit matches the given type, the result is the substitution value. Otherwise, there is no substitution value.", - "href": "https://www.w3.org/TR/css-values-5/#valdef-attr-time", - "type": "value", - "value": "time" - }, - { - "name": "frequency", - "prose": "Parse a component value from the attribute’s value. If the result is a whose unit matches the given type, the result is the substitution value. Otherwise, there is no substitution value.", - "href": "https://www.w3.org/TR/css-values-5/#valdef-attr-frequency", - "type": "value", - "value": "frequency" - }, - { - "name": "flex", - "prose": "Parse a component value from the attribute’s value. If the result is a whose unit matches the given type, the result is the substitution value. Otherwise, there is no substitution value.", - "href": "https://www.w3.org/TR/css-values-5/#valdef-attr-flex", - "type": "value", - "value": "flex" - }, - { - "name": "", - "prose": "Parse a component value from the attribute’s value. If the result is a , the substitution value is a dimension with the result’s value, and the given unit. Otherwise, there is no substitution value.", - "href": "https://www.w3.org/TR/css-values-5/#valdef-attr-dimension-unit", - "type": "value", - "value": "" - } - ] + "value": "attr( ? , ?)" }, { "name": "", @@ -505,18 +519,6 @@ "type": "type", "value": "[ '|' ]? " }, - { - "name": "", - "href": "https://www.w3.org/TR/css-values-5/#typedef-attr-type", - "type": "type", - "value": "string | ident | color | number | percentage | length | angle | time | frequency | flex | " - }, - { - "name": "", - "prose": "The production matches a literal \"%\" character (that is, a with a value of \"%\") or an ident whose value is any of the CSS units for , ,