Skip to content

Commit c5cd052

Browse files
tabatkinstabatkins
committed
[css-values-4] Replace the math serialization section with tree-aware algos.
1 parent 5254300 commit c5cd052

File tree

1 file changed

+144
-68
lines changed

1 file changed

+144
-68
lines changed

‎css-values-4/Overview.bs‎

Lines changed: 144 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -3577,93 +3577,169 @@ Serialization</h3>
35773577

35783578
Issue: This section is still <a href="https://lists.w3.org/Archives/Member/w3c-css-wg/2016AprJun/0239.html">under discussion</a>.
35793579

3580-
<div algorithm="serialize a calc() value">
3581-
To <dfn export>serialize a ''calc()'' value</dfn>
3582-
3583-
1. [=Simplify the calculation=] inside of it.
3584-
3585-
2. If this simplification process results in only a single value
3586-
(one <<number>>, one <<dimension>>, or one <<percentage>>),
3587-
and the value being serialized is a <a>computed value</a> or later,
3588-
serialize it just as that one value,
3589-
without the ''calc()'' wrapper.
3590-
If this value is outside the allowed range for the context,
3591-
it must be clamped to the nearest allowed value.
3592-
3593-
3. Otherwise,
3594-
[=serialize the summation=],
3595-
prefix the result with "calc("
3596-
and suffix it with ")",
3597-
then return it.
3580+
<div algorithm>
3581+
To <dfn export>serialize a math function</dfn> |fn|:
3582+
3583+
1. If |fn| is a ''calc()'' function,
3584+
and the root of the [=calculation tree=] it represents
3585+
is a numeric value
3586+
(number, percentage, or dimension),
3587+
and the serialization being produced is of a [=computed value=] or later,
3588+
then clamp the value to the range allowed for its context
3589+
(if necessary),
3590+
then serialize the value as normal
3591+
and return the result.
3592+
3593+
2. Let |s| be a [=string=] that initially contains
3594+
the |fn|'s name
3595+
(such as "calc", "sin", etc)
3596+
followed by a "(" (open parenthesis).
3597+
3598+
3. For each comma-separated [=calculation=] argument of |fn|,
3599+
[=serialize the calculation tree=].
3600+
If a result of this starts with a "(" (open parenthesis)
3601+
and ends with a ")" (close parenthesis),
3602+
remove those characters from the result.
3603+
[=string/Concatenate=] all of the results
3604+
using ", " (comma followed by space),
3605+
then append the result to |s|.
3606+
3607+
4. Append ")" (close parenthesis) to |s|.
3608+
3609+
5. Return |s|.
35983610
</div>
35993611

3600-
<wpt>
3601-
css/css-values/calc-rgb-percent-001.html
3602-
css/css-values/calc-serialization.html
3603-
css/css-values/calc-serialization-002.html
3604-
css/css-values/getComputedStyle-border-radius-001.html
3605-
css/css-values/getComputedStyle-border-radius-003.html
3606-
css/css-values/calc-background-position-003.html
3607-
</wpt>
3612+
<div algorithm>
3613+
To <dfn export lt="serialize a calculation tree|serialize the calculation tree|serializing a calculation tree|serializing the calculation tree">serialize a calculation tree</dfn>:
3614+
3615+
1. Let |root| be the root node
3616+
of the [=calculation tree=].
3617+
3618+
2. If |root| is a numeric value,
3619+
or a non-[=math function=],
3620+
serialize |root| per the normal rules for it
3621+
and return the result.
3622+
3623+
3. If |root| is anything but
3624+
a Sum,
3625+
Negate,
3626+
Product,
3627+
or Invert node,
3628+
[=serialize a math function=]
3629+
for the function corresponding to the node type,
3630+
treating the node's children as the function's comma-separated [=calculation=] arguments,
3631+
and return the result.
3632+
3633+
4. If |root| is a Negate node,
3634+
let |s| be a [=string=]
3635+
initially containing "(-1 * ".
3636+
3637+
[=serialize a calculation tree|Serialize=] |root|'s child,
3638+
and append it to |s|.
3639+
3640+
Append ")" to |s|,
3641+
then return it.
36083642

3609-
<div algorithm="serialize a min()/max() value">
3610-
To <dfn export lt="serialize a non-calc() math function">serialize a non-''calc()'' [=math function=]</dfn>:
3643+
5. If |root| is an Invert node,
3644+
let |s| be a [=string=]
3645+
initially containing "(1 / ".
36113646

3612-
1. For each comma-separated [=calculation=] inside of the [=math function=],
3613-
[=simplify the calculation=].
3647+
[=serialize a calculation tree|Serialize=] |root|'s child,
3648+
and append it to |s|.
36143649

3615-
2. Let |s| initially be the name of the [=math function=],
3616-
followed by "(".
3617-
(E.g. "min(", "sin(", etc.)
3650+
Append ")" to |s|,
3651+
then return it.
36183652

3619-
3. [=serialize the summation|Serialize each summation=],
3620-
then join them into a single string,
3621-
with ", " between each term.
3622-
Append the result to |s|.
3653+
6. If |root| is a Sum node,
3654+
let |s| be a [=string=]
3655+
initially containing "(".
36233656

3624-
4. Append ")" to |s|,
3625-
then return it.
3626-
</div>
3657+
[=sort a calculation's children|Sort root's children=].
3658+
3659+
[=serialize a calculation tree|Serialize=] |root|'s first child,
3660+
and append it to |s|.
3661+
3662+
[=list/For each=] |child| of |root| beyond the first:
3663+
3664+
1. If |child| is a Negate node,
3665+
append " - " to |s|,
3666+
then [=serialize a calculation tree|serialize=] the Negate's child
3667+
and append the result to |s|.
3668+
3669+
3. If |child| is a negative numeric value,
3670+
append " - " to |s|,
3671+
then serialize the negation of |child| as normal
3672+
and append the result to |s|.
3673+
3674+
2. Otherwise,
3675+
append " + " to |s|,
3676+
then [=serialize a calculation tree|serialize=] |child|
3677+
and append the result to |s|.
3678+
3679+
Finally, append ")" to |s|
3680+
and return it.
3681+
3682+
7. If |root| is a Product node,
3683+
let |s| be a [=string=]
3684+
initially containing "(".
36273685

3628-
<div algorithm="simplify a calculation">
3629-
To <dfn export lt="simplify a calculation | simplify the calculation" for="math function">simplify a calculation</dfn>:
3686+
[=sort a calculation's children|Sort root's children=].
36303687

3631-
1. Replace any ''calc()'' values with parentheses containing their contents.
3632-
2. Resolve all multiplications and divisions.
3633-
3. Combine identical units.
3634-
4. Recurse into remaining [=math functions=].
3635-
5. Return the result.
3688+
[=serialize a calculation tree|Serialize=] |root|'s first child,
3689+
and append it to |s|.
36363690

3637-
Note: The value-computation process can transform disparate units into identical ones.
3638-
For example, ''em'' and ''px'' are obviously different at specified-value time,
3639-
but at computed-value time they're both absolutized to ''px''.
3691+
[=list/For each=] |child| of |root| beyond the first:
36403692

3641-
The result must be a summation of unique units and/or [=math functions=].
3642-
(Terms with a value of zero <strong>must</strong> be preserved in this summation.)
3693+
1. If |child| is an Invert node,
3694+
append " / " to |s|,
3695+
then [=serialize a calculation tree|serialize=] the Invert's child
3696+
and append the result to |s|.
3697+
3698+
2. Otherwise,
3699+
append " * " to |s|,
3700+
then [=serialize a calculation tree|serialize=] |child|
3701+
and append the result to |s|.
3702+
3703+
Finally, append ")" to |s|
3704+
and return it.
36433705
</div>
36443706

3645-
<wpt>
3646-
css/css-values/calc-nesting-002.html
3647-
</wpt>
3707+
<div algorithm>
3708+
To <dfn>sort a calculation's children</dfn> |nodes|:
36483709

3649-
<div algorithm="serialize a summation">
3650-
To <dfn export lt="serialize a summation|serialize the summation" for="math function">serialize a summation</dfn>:
3710+
1. Let |ret| be an empty list.
36513711

3652-
1. Sort the terms in the following order:
3712+
2. If |nodes| contains a number,
3713+
remove it from |nodes| and append it to |ret|.
36533714

3654-
1. The number, if present
3655-
2. The percentage, if present
3656-
3. The dimensions, ordered by their units <a>ASCII case-insensitive</a> alphabetically
3657-
4. <a href="#comp-func">Comparison</a>, <a href="#trig-funcs">trigonometric</a>
3658-
and <a href="#exponent-funcs">exponential</a> functions,
3659-
in the order they appeared in the original expression.
3715+
3. If |nodes| contains a percentage,
3716+
remove it from |nodes| and append it to |ret|.
36603717

3661-
2. Serialize all the terms,
3662-
then join them into a single string,
3663-
with " + " between each term.
3664-
Return the result.
3718+
4. If |nodes| contains any dimensions,
3719+
remove them from |nodes|,
3720+
sort them by their units,
3721+
ordered [=ASCII case-insensitively=],
3722+
and append them to |ret|.
3723+
3724+
5. If |nodes| still contains any items,
3725+
append them to |ret| in the same order.
3726+
3727+
6. Return |ret|.
36653728
</div>
36663729

3730+
<wpt>
3731+
css/css-values/calc-rgb-percent-001.html
3732+
css/css-values/calc-serialization.html
3733+
css/css-values/calc-serialization-002.html
3734+
css/css-values/getComputedStyle-border-radius-001.html
3735+
css/css-values/getComputedStyle-border-radius-003.html
3736+
css/css-values/calc-background-position-003.html
3737+
</wpt>
3738+
3739+
<wpt>
3740+
css/css-values/calc-nesting-002.html
3741+
</wpt>
3742+
36673743
<div class="example">
36683744
For example, ''calc(20px + 30px)'' would serialize as ''calc(50px)'' as a specified value,
36693745
or as ''50px'' as a computed value.

0 commit comments

Comments
 (0)