@@ -780,31 +780,23 @@ Combination of <<position>></h4>
780
780
████ █▌ ▐▌ █▌ █████▌ █▌ █▌ █▌
781
781
-->
782
782
783
- <h2 id="progress">
784
- Interpolation Progress Functional Notations </h2>
783
+ <h2 id="progress" oldids="progress-func" >
784
+ Interpolation Progress Calculations: the ''progress()'' notation </h2>
785
785
786
- The '' progress()'' , ''media-progress()'' , and ''container-progress()'' [=functional notations =]
787
- represent the proportional distance
786
+ The <dfn> progress()</dfn> [=functional notation =]
787
+ represents the proportional distance
788
788
of a given value (the <dfn noexport>progress value</dfn> )
789
789
from one value (the <dfn noexport>progress start value</dfn> )
790
- to another value (the <dfn noexport>progress end value</dfn> ).
791
- They allow drawing a progress ratio from
792
- [=math functions=] , [=media features=] , and [=container features=] ,
793
- respectively,
794
- following a common syntactic pattern:
795
-
796
- <pre class=prod>
797
- <var ignore>progress-function</var>() = <var ignore>progress-function</var>( <var ignore>progress value</var>, <var ignore>start value</var>, <var ignore>end value</var> )
798
- </pre>
799
-
800
- Each resolves to a <<number>>
801
- by [=calculating a progress function=] .
790
+ to another value (the <dfn noexport>progress end value</dfn> ),
791
+ each represented as a [=calculation=] .
792
+ It is a [=math function=] ,
793
+ and can be input into other calculations
794
+ such as a [=math function=]
795
+ or a [=mix notation=] .
802
796
803
797
<div algorithm>
804
- To <dfn export>calculate a progress function</dfn> ,
805
- given a [=progress value=] ,
806
- [=progress start value=] ,
807
- and [=progress end value=] :
798
+ The ''progress()'' notation resolves to a <<number>>
799
+ by <dfn noexport lt="calculate a progress function">calculating a progress function</dfn> as follows:
808
800
809
801
: If the [=progress start value=] and [=progress end value=] are different values
810
802
:: <code> ([=progress value=] - [=progress start value=] ) / ([=progress end value=] - [=progress start value=] )</code> .
@@ -813,27 +805,8 @@ Interpolation Progress Functional Notations</h2>
813
805
depending on whether [=progress value=]
814
806
is equal to, less than, or greater than
815
807
the shared value.
816
-
817
- Note: The return value is a plain <<number>> ,
818
- not [=made consistent=] with its arguments by default.
819
808
</div>
820
809
821
- The resulting number can then be input into other calculations,
822
- such as a [=math function=]
823
- or a [=mix notation=] .
824
-
825
- <h3 id="progress-func">
826
- Calculated Progress Values: the ''progress()'' notation</h3>
827
-
828
- The <dfn>progress()</dfn> functional notation
829
- returns a <<number>> value
830
- representing the position of one [=calculation=]
831
- (the [=progress value=] )
832
- between two other [=calculations=]
833
- (the [=progress start value=]
834
- and [=progress end value=] ).
835
- ''progress()'' is a [=math function=] .
836
-
837
810
The syntax of ''progress()'' is defined as follows:
838
811
839
812
<pre class=prod>
@@ -848,101 +821,11 @@ Calculated Progress Values: the ''progress()'' notation</h3>
848
821
but must have a [=consistent type=]
849
822
or else the function is invalid.
850
823
851
- The value of ''progress()'' is a <<number>> ,
852
- determined by [=calculating a progress function=] ,
853
- then [=made consistent=] with the [=consistent type=] of its arguments.
854
-
855
824
ISSUE: Do we need a ''percent-progress()'' notation,
856
825
or do enough places auto-convert that it's not necessary?
857
826
858
827
Note: The ''progress()'' function is essentially syntactic sugar
859
- for a particular pattern of ''calc()'' notations,
860
- so it's a [=math function=] .
861
-
862
- <h3 id="media-progress-func">
863
- Media Query Progress Values: the ''media-progress()'' notation</h3>
864
-
865
- Similar to the ''progress()'' notation,
866
- the <dfn>media-progress()</dfn> functional notation
867
- returns a <<number>> value
868
- representing current value of the specified [=media query=]
869
- [[!MEDIAQUERIES-4]]
870
- as a [=progress value=]
871
- between two explicit values of the [=media query=]
872
- (as the [=progress start value=] and [=progress end value=] ).
873
-
874
- The syntax of ''media-progress()'' is defined as follows:
875
-
876
- <pre class=prod>
877
- <<media-progress()>> = media-progress(<<mf-name>> , <<calc-sum>> , <<calc-sum>> )
878
- </pre>
879
-
880
- where the value of the [=media feature=] corresponding to <<mf-name>>
881
- represents the [=progress value=] ,
882
- and the two <<calc-sum>> values represent
883
- the [=progress start value=] and [=progress end value=] ,
884
- respectively.
885
-
886
- The specified [=media feature=] must be a valid “range” type feature,
887
- the specified [=progress start value=] and [=progress end value=]
888
- must be valid values for the specified [=media query=] ,
889
- and both [=calculation=] values must have a [=consistent type=] ,
890
- or else the function is invalid.
891
-
892
- The [=progress start value=] and [=progress end value=] [=calculations=]
893
- are interpreted as specified for the [=media feature=]
894
- (rather than as specified by the context the function is used in).
895
-
896
- The value of ''media-progress()'' is a <<number>> ,
897
- determined by [=calculating a progress function=] .
898
-
899
- Note: ''media-progress()'' is <em> not</em> a [=math function=] ;
900
- it's just a function that evaluates to a <<number>> .
901
-
902
- <h3 id="container-progress-func">
903
- Container Query Progress Values: the ''container-progress()'' notation</h3>
904
-
905
- The <dfn>container-progress()</dfn> functional notation
906
- is identical to the ''media-progress()'' functional notation,
907
- except that it accepts [=container features=] [[!CSS-CONTAIN-3]]
908
- in place of [=media features=] .
909
-
910
- The syntax of ''container-progress()'' is defined as follows:
911
-
912
- <pre class=prod>
913
- <<container-progress()>> = container-progress(<<mf-name>> [ of <<container-name>> ]?, <<calc-sum>> , <<calc-sum>> )
914
- </pre>
915
-
916
- where <<mf-name>> represents a [=size feature=]
917
- and the optional <<container-name>> component specifies
918
- the named containers to consider when selecting a container
919
- to resolve them against.
920
- The value of the [=size feature=] is the [=progress value=] ,
921
- and the two <<calc-sum>> values represent
922
- the [=progress start value=] and [=progress end value=] ,
923
- respectively.
924
-
925
- The specified <<mf-name>> must be a valid [=size feature=] ,
926
- the specified [=progress start value=] and [=progress end value=]
927
- must be valid values for that [=size feature=] ,
928
- and both [=calculation=] values must have a [=consistent type=] ,
929
- or else the function is invalid.
930
- ''container-progress()'' is only valid in a property value context;
931
- it cannot be used in, for example, a [=media query=] .
932
-
933
- The [=progress start value=] and [=progress end value=] [=calculations=]
934
- are interpreted as specified for the [=size feature=]
935
- (rather than as specified by the context the function is used in).
936
- If no appropriate containers are found,
937
- ''container-progress()'' resolves its <<size-feature>> query
938
- against the [=small viewport size=] .
939
-
940
- The value of ''media-progress()'' is a <<number>> ,
941
- determined by [=calculating a progress function=] .
942
-
943
- Note: ''container-progress()'' is <em> not</em> a [=math function=] ;
944
- it's just a function that evaluates to a <<number>> .
945
-
828
+ for a particular pattern of ''calc()'' notations.
946
829
947
830
<!-- Big Text: *-mix()
948
831
@@ -4176,35 +4059,14 @@ Acknowledgments</h2>
4176
4059
<h2 class="no-num" id="changes">
4177
4060
Changes</h2>
4178
4061
4179
- Changes since the <a href="https://www.w3.org/TR/2024/WD-css-values-5-20240917/">17 September 2024 Working Draft</a> :
4062
+ <h3 class=no-num id="changes-recent">
4063
+ Recent Changes</h3>
4180
4064
4181
- * Changed the “comma-upgrading” behavior of allowing semicolons
4182
- to “comma-wrapping” using braces.
4183
- (<a href="https://github.com/w3c/csswg-drafts/issues/9539">Issue 9539</a> )
4184
- * Added ''if()'' .
4185
- (<a href="https://github.com/w3c/csswg-drafts/issues/10064">Issue 10064</a> ,
4186
- <a href="https://github.com/w3c/csswg-drafts/issues/5009#issuecomment-2442787271">Issue 5009</a> )
4187
- * Added ''inherit()'' .
4188
- (<a href="https://github.com/w3c/csswg-drafts/issues/2864">Issue 2864</a> )
4189
- * Redesigned ''attr()'' .
4190
- (<a href="https://github.com/w3c/csswg-drafts/issues/10437">Issue 10437</a> ,
4191
- <a href="https://github.com/w3c/csswg-drafts/issues/5092">Issue 5092</a> ,
4192
- <a href="https://github.com/w3c/csswg-drafts/issues/5136">Issue 5136</a> )
4193
- * Changed ''*progress()'' functions to use commas for argument separation,
4194
- for consistency with ''*mix()'' and ''clamp()'' .
4195
- (<a href="https://github.com/w3c/csswg-drafts/issues/10489">Issue 10489</a> )
4196
- * Defined new <<boolean-expr[]>> multipler for the [=value definition syntax=] .
4197
- (<a href="https://github.com/w3c/csswg-drafts/issues/10457">Issue 10457</a> )
4198
- * Imported definition of [=arbitrary substitution function=] from [[CSS-VARIABLES-1]] .
4199
- (<a href="https://github.com/w3c/csswg-drafts/issues/10679">Issue 10679</a> )
4200
- * Imported the <<syntax>> production from [[css-properties-values-api-1]] (for use in ''attr()'' ).
4201
- * Corrected errors in the syntax of ''media-progress()'' and ''container-progress()'' .
4202
-
4203
- Changes since the <a href="https://www.w3.org/TR/2024/WD-css-values-5-20240913/">First Public Working Draft</a> include:
4204
-
4205
- * Incorporated the definition of <<position>> ,
4206
- extending it to handle [=flow-relative=] positions.
4207
- (<a href="https://github.com/w3c/csswg-drafts/issues/549#issuecomment-1823607623">Issue 549</a> )
4065
+ Changes since the <a href="https://www.w3.org/TR/2024/WD-css-values-5-20241111/">11 November 2024 Working Draft</a> :
4066
+ * Dropped ''media-progess()'' and ''container-progress()'' in favor of using relevant units in ''progress()'' .
4067
+ (<a href="https://github.com/w3c/csswg-drafts/issues/11826">Issue 11826</a> )
4068
+
4069
+ See also <a href="https://www.w3.org/TR/2024/WD-css-values-5-20241111/#changes">earlier changes</a> .
4208
4070
4209
4071
<h3 class=no-num id="additions-L4">
4210
4072
Additions Since Level 4</h3>
0 commit comments