@@ -124,7 +124,6 @@ follow.
124
124
The syntax for specifying an [=easing function=] is as follows:
125
125
126
126
<div class="prod"> <dfn type><easing-function></dfn> =
127
- ''linear'' |
128
127
<<linear-easing-function>> |
129
128
<<cubic-bezier-easing-function>> |
130
129
<<step-easing-function>> </div>
@@ -135,7 +134,7 @@ The syntax for specifying an [=easing function=] is as follows:
135
134
timing-functions-syntax-valid.html
136
135
</wpt>
137
136
138
- ## The linear easing function: ''linear()'' ## {#the-linear-easing-function}
137
+ ## Linear Easing Functions: ''linear'' , ''linear()'' ## {#the-linear-easing-function}
139
138
140
139
A <dfn export>linear easing function</dfn>
141
140
is an [=easing function=]
@@ -152,24 +151,32 @@ to an [=output progress value=].
152
151
A [=linear easing function=] has the following syntax:
153
152
154
153
<pre class="prod">
154
+ <dfn><linear-easing-function></dfn> = linear | <<linear()>>
155
155
<dfn>linear()</dfn> = linear( [ <<number>> && <<percentage>> {0,2} ]# )
156
156
</pre>
157
157
158
158
<wpt>
159
159
linear-timing-functions-syntax.html
160
160
</wpt>
161
161
162
- Each comma-separated argument defines one or two [=control points=] ,
163
- with an [=input progress value=] equal to the specified <<percentage>>
164
- (converted to a <<number>> between 0 and 1),
165
- and an [=output progress value=] equal to the specified <<number>> .
166
- When the argument has two <<percentages>> ,
167
- it defines two [=control points=] in the specified order,
168
- one per <<percentage>> .
162
+ : ''linear''
163
+ :: Equivalent to ''linear(0, 1)''
169
164
170
- If an argument lacks a <<percentage>> ,
171
- its [=input progress value=] is initially empty,
172
- but that is immediately corrected by [=linear() canonicalization=] after parsing.
165
+ : ''linear()''
166
+ ::
167
+ Specifies a [=linear easing function=] .
168
+
169
+ Each comma-separated argument specifies one or two [=control points=] ,
170
+ with an [=input progress value=] equal to the specified <<percentage>>
171
+ (converted to a <<number>> between 0 and 1),
172
+ and an [=output progress value=] equal to the specified <<number>> .
173
+ When the argument has two <<percentage>> s,
174
+ it defines two [=control points=] in the specified order,
175
+ one per <<percentage>> .
176
+
177
+ If an argument lacks a <<percentage>> ,
178
+ its [=input progress value=] is initially empty,
179
+ but that is immediately corrected by [=linear() canonicalization=] after parsing.
173
180
174
181
<div algorithm>
175
182
To <dfn export lt="linear() canonicalization|canonicalize a linear()">canonicalize a linear()</dfn> function's [=control points=] ,
@@ -197,50 +204,60 @@ but that is immediately corrected by [=linear() canonicalization=] after parsing
197
204
every [=control point=] has an [=input progress value=] ,
198
205
and the [=input progress values=] are monotonically non-decreasing
199
206
along the list.
207
+
208
+ Note: Serialization relies on whether or not an [=input progress value=]
209
+ was originally supplied,
210
+ so that information should be retained
211
+ in the [=CSS/internal representation=] .
212
+ It does not rely on whether a pair of [=control points=]
213
+ were specified as two percentages on a single argument
214
+ or as separate arguments.
200
215
</div>
201
216
202
217
203
218
### Serializing ### {#linear-easing-function-serializing}
204
219
205
- <div class=note >
206
- The serialization of '' linear()'' includes input values for each point,
207
- and input values are never less than the input of the previous point.
208
-
209
- For example:
210
-
211
- - ''linear(0, 0.25, 1)'' serializes as ''linear(0 0%, 0.25 50%, 1 100%)''
212
- - ''linear(0 20%, 0.5 10%, 1)'' serializes as ''linear(0 20%, 0.5 20%, 1 100%)''
213
- - ''linear(0, 0.25 25% 75%, 1)'' serializes as ''linear(0 0%, 0.25 25%, 0.25 75%, 1 100%)''
220
+ <div algorithm >
221
+ To <dfn export>serialize a linear() function</dfn> :
222
+
223
+ 1. Let |s| be the string "linear(".
224
+ 2. [=serialize a linear() control point|Serialize each control point=] of the function,
225
+ [=string/concatenate=] the results using the separator ", ",
226
+ and append the result to |s|.
227
+ 3. Append ")" to |s|,
228
+ and return it.
214
229
</div>
215
230
216
- <section algorithm="linear easing function">
217
-
218
- To get a [=linear easing function=] 's (|linearEasingFunction|) <dfn for="linear easing function" export>serialized computed value</dfn> ,
219
- perform the following.
220
- It returns a [=string=] .
221
-
222
- 1. Let |output| be "`linear(`".
223
-
224
- 1. [=list/For each=] |point| in |linearEasingFunction|'s [=linear easing function/points=] :
231
+ <div algorithm>
232
+ To <dfn export>serialize a linear() control point</dfn> :
225
233
226
- 1. If |point| is not the first [=list/item=] of |linearEasingFunction|'s [=linear easing function/points=] ,
227
- append "<code> , </code> " to |output|.
234
+ 1. Let |s| be the serialization,
235
+ as a <<number>> ,
236
+ of the [=control point's=] [=output progress value=] .
228
237
229
- 1. Append the computed value of |point|'s [=linear easing point/output=] ,
230
- as a <<number>> ,
231
- to |output|.
238
+ 2. If the [=control point=] originally lacked an [=input progress value=] ,
239
+ return |s|.
232
240
233
- 1. Append "<code> </code> " to |output|.
241
+ 3. Otherwise, append " " (U+0020 SPACE) to |s|,
242
+ then serialize the [=control point's=] [=output progress value=]
243
+ as a <<percentage>>
244
+ and append it to |s|.
234
245
235
- 1. Append the computed value of |point|'s [=linear easing point/input=] ,
236
- as a <<percentage>> ,
237
- to |output|.
246
+ 4. Return |s|.
247
+ </div>
238
248
239
- 1. Append "`)`" to |output|.
249
+ <div class=example>
250
+ When serialized,
251
+ [=control points=] originally specified with two [=input progress values=]
252
+ are turned into two separate [=control points=] ,
253
+ and the [=input progress values=] are in strictly ascending order.
254
+ For example:
240
255
241
- 1. Return |output|.
256
+ - ''linear(0, 0.25, 1)'' serializes as ''linear(0, 0.25, 1)''
257
+ - ''linear(0 20%, 0.5 10%, 1)'' serializes as ''linear(0 20%, 0.5 20%, 1)''
258
+ - ''linear(0, 0.25 25% 75%, 1)'' serializes as ''linear(0, 0.25 25%, 0.25 75%, 1)''
259
+ </div>
242
260
243
- </section>
244
261
245
262
### Output of a linear easing function ### {#linear-easing-function-output}
246
263
0 commit comments