From d35d97b75ce0b3da22384088794ed0d59aea83a1 Mon Sep 17 00:00:00 2001 From: Tab Atkins-Bittner Date: Fri, 13 Sep 2024 16:06:45 -0700 Subject: [PATCH] [css-easing-2][editorial] Line up steps() serializing/output with the structure of linear() too. --- css-easing-2/Overview.bs | 153 +++++++++------------------------------ 1 file changed, 34 insertions(+), 119 deletions(-) diff --git a/css-easing-2/Overview.bs b/css-easing-2/Overview.bs index 67915f0e142..098010f2cd7 100644 --- a/css-easing-2/Overview.bs +++ b/css-easing-2/Overview.bs @@ -859,7 +859,37 @@ The ''jump-*'' keywords values are illustrated below: - + + + +

+Serializing

+ +Unlike the other [=easing function=] keywords, +''step-start'' and ''step-end'' do not serialize as themselves. +Instead, they serialize as "steps(1, start)" and "steps(1)", respectively. + +
+ To serialize a steps() functions: + + 1. Let |s| be the string "steps(". + + 2. Serialize the function's [=steps()/steps=], + and append it to |s|. + + 3. If the function's [=steps()/step position=] is ''end'' or ''jump-end'', + append ")" to |s| and return |s|. + + 4. Otherwise, append ", " to |s|. + Serialize the [=steps()/step position=] as a keyword, + and append the result to |s|. + Append ")" to |s|. + Return |s|. +
+ + + timing-functions-syntax-computed.html +

Output

@@ -881,9 +911,9 @@ Output each with an associated value, as follows: - 1. [-∞, 0] has the value 0. - 2. (1, ∞] has the value 1. - 3. [0, 1] is divided into |steps| intervals, + 1. [-∞, 0) has the value 0. + 2. [1, ∞] has the value 1. + 3. [0, 1) is divided into |steps| half-open intervals, [0, ...) to [..., 1) with their values assigned as defined for the |position| (see <>). @@ -896,125 +926,10 @@ Output for the interval that |inputProgress| is in. -
- - As an example of how the [=before flag=] affects the behavior of this function, - consider an animation with a [=step easing function=] whose [=step - position=] is start and which has a positive - delay and backwards fill. - - For example, using CSS animation: - - 
-  animation: moveRight 5s 1s steps(5, start);
-
- - During the delay phase, the [=input progress value=] will be zero but if the - [=before flag=] is set to indicate that the animation has yet to reach its - animation interval, the easing function will produce zero as its [=output - progress value=], i.e. the bottom of the first step. - - At the exact moment when the animation interval begins, the [=input progress - value=] will still be zero, but the [=before flag=] will not be set and hence - the result of the easing function will correspond to the top of the first step. -
- -For the purposes of calculating the [=output progress value=], the -[=step position=] start is considered equivalent to -jump-start. -Likewise end is considered equivalent to jump-end. -As a result, the following algorithm does not make explicit reference to -start or end. - -Note: User agents must still differentiate between -jump-start and start for -the purpose of serialization (see [[#serialization]]). - -The [=output progress value=] is calculated from the [=input progress value=] -and [=before flag=] as follows: - -1. Calculate the current step as - floor([=input progress value=] × [=steps=]). - -1. If the [=step position=] property is one of: - - * jump-start, - * jump-both, - - increment current step by one. - -1. If both of the following conditions are true: - - * the [=before flag=] is set, and - * [=input progress value=] × [=steps=] mod 1 equals zero - (that is, if [=input progress value=] × [=steps=] is - integral), then - - decrement current step by one. - -1. If [=input progress value=] ≥ 0 and current step < 0, - let current step be zero. - -1. Calculate |jumps| based on the [=step position=] as follows: - - : jump-start or - jump-end - :: [=steps=] - : jump-none - :: [=steps=] - 1 - : jump-both - :: [=steps=] + 1 - -1. If [=input progress value=] ≤ 1 and current step > - |jumps|, let current step be |jumps|. - -
- - Steps 4 and 6 in this procedure ensure that given an [=input progress - value=] in the range [0, 1], a step easing function does not produce an - [=output progress value=] outside that range. - - For example, although mathematically we might expect that a step easing - function with a [=step position=] of jump-start - would step up (i.e. beyond 1) when the [=input progress value=] is 1, - intuitively, - when we apply such an easing function to a forwards-filling animation, - we expect it to produce an [=output progress value=] of 1 - as the animation fills forwards. - - A similar situation arises for a step easing function with - a [=step position=] of jump-end - when applied to an animation during its delay phase. - -
- -1. The [=output progress value=] is current step / - |jumps|. - step-timing-functions-output.html -

Serialization

- -Easing functions are serialized using the common serialization patterns -defined in [[CSSOM]] with the following additional requirements: - -* Step easing functions, whether they are specified using the - ''steps()'' function or either of the ''step-start'' or ''step-end'' - keywords, are serialized as follows: - - 1. If the [=step position=] is ''jump-end'' or ''end'', serialize - as steps(<integer>). - - 2. Otherwise, serialize as steps(<integer>, <step-position>). - - - timing-functions-syntax-computed.html - -

Privacy Considerations