@@ -317,13 +317,21 @@ Representing Interpolation Progress: the <<progress>> type</h2>
317
317
where:
318
318
319
319
<dl dfn-type=value dfn-for="<progress> ">
320
- <dt> <dfn><<percentage>></dfn>
320
+ <dt> <dfn><<percentage-token >></dfn>
321
321
<dd>
322
322
Computes to the equivalent <<number>> :
323
323
''0%'' becomes ''0'' ,
324
324
''100%'' becomes ''1'' ,
325
325
etc.
326
326
327
+ Note: This only allows literal percentages,
328
+ like ''15%'' ;
329
+ calculations like ''calc(100% / 7)'' will not work,
330
+ as they will instead attempt to use the normal rules
331
+ for resolving a percentage against another type
332
+ (such as <<length>> , in 'width' ).
333
+ Use expressions like ''calc(1 / 7)'' instead.
334
+
327
335
<dt> <dfn><<number>></dfn>
328
336
<dd>
329
337
Represents the [=mix progress value=] .
@@ -332,15 +340,6 @@ Representing Interpolation Progress: the <<progress>> type</h2>
332
340
''media-progress()'' ,
333
341
and ''container-progress()'' notations.
334
342
335
- For this purpose,
336
- a value is allowed to match <<number>>
337
- regardless of its [=CSSNumericValue/type=] ’s [=percent hint=] .
338
-
339
- Note: This means that a value like ''progress(50% from 100px to 200px)''
340
- will match,
341
- despite its type having a [=percent hint=] of "length".
342
-
343
-
344
343
<dt> <dfn><<'animation-timeline'>></dfn>
345
344
<dd>
346
345
Represents the [=mix progress value=]
@@ -361,6 +360,13 @@ Representing Interpolation Progress: the <<progress>> type</h2>
361
360
they allow representing interpolation beyond the range
362
361
defined by the start and end values.
363
362
363
+ Note: While <<progress>> itself can be a <<percentage>> ,
364
+ mapping directly to the equivalent <<number>> ,
365
+ a function that <em> resolves</em> to a <<number>> ,
366
+ like ''progress()'' ,
367
+ resolves <<percentage>> s using the normal rules for the context;
368
+ for example, in 'width' , they would be resolved against a length.
369
+
364
370
The [=computed value=] of a <<progress>> value specified with <<percentage>> or <<number>>
365
371
is the computed <<number>> converted through the <<easing-function>> (if any).
366
372
The [=computed value=] of a <<progress>> value specified with <<'animation-timeline'>>
0 commit comments