Description
The current text for serializing color-mix()
states:
The serialization of the declared value of a color-mix() function is the string "color-mix(in ", followed by the specified
<color-space>
in all-lowercase, followed by ", ", followed by the first specified color, followed by a space, followed by the specified (un-normalized) first percentage (unless both percentages are 50%), followed by ", ", followed by the second specified color, followed by the specified (un-normalized) second percentage (unless the two specified percentages add to 100%), followed by ")".Following the principle of shortest serialization, the second percentage is typically omitted, even if explicitly specified.
Directly after that, in example 43, the first example seems to contradict this:
For example, the serialized declared value of
color-mix(in oklab, teal, peru 40%)
would be the string "color-mix(in oklab, teal 60%, peru)".
The text states it should use the "un-normalized" values. The value of 60% would only be discovered during the normalization (specifically, step 4)).
So it seems like we need a slightly more complicated serialization rule. The following wording needs work, but I think mostly gets to the intent:
The serialization of the declared value of a color-mix() function is the string "color-mix(in ", followed by the specified in all-lowercase, followed by ", ", followed by the first specified color, followed by a space, followed by the serialization of the first percentage (see below), followed by ", ", followed by the second specified color, followed by the serialization of the second percentage (see below), followed by ")".
(note for below,
calc()
values are consider to be unknown, so are NEVER equal 50% and never sum with something else to equal 100%.)The serialization of the first percentage of a declared value of a color-mix() function is defined to:
- If BOTH the first percentage
p1
and second percentagesp2
are specified:
- if both
p1
equals 50% andp2
equals 50%, nothing is serialized. (a)- else,
p1
is serialized as is. (b)- else if ONLY the first percentage
p1
is specified:
- if
p1
is equal 50%, nothing is serialized. (c)- else,
p1
is serialized as is. (d)- else if ONLY the second percentage
p2
is specified:
- if
p2
equals 50%, nothing is serialized. (e)- if
p2
is notcalc()
, the value of100% - p2
is serialized. (f)- else, nothing is serialized. (g)
- else if NEITHER is specified:
- nothing is serialized. (h)
The serialization of the second percentage of a declared value of a color-mix() function is defined to:
- If BOTH the first percentage
p1
and second percentagesp2
are specified:
- if neither
p1
norp2
iscalc()
, andp1 + p2
equals 100%, nothing is serialized. (i)- else,
p2
is serialized as is. (j)- else if ONLY the first percentage
p1
is specified:
- nothing is serialized. (k)
- else if ONLY the second percentage
p2
is specified:
- if
p2
equals 50%, nothing is serialized. (l)- if
p2
is notcalc()
, nothing is serialized. (m)- else,
p2
is serialized as is. (n)- else if NEITHER is specified:
- nothing is serialized. (o)
(to make this somewhat easier to grok, below is a pretty comprehensive list of specified value serializations with a comment to the right explaining which rules it is used for each percentage).
color-mix(in srgb, red 50%, blue 50%) -serializes to- color-mix(in srgb, red, blue) // [a & i] both 50%
color-mix(in srgb, red 10%, blue 90%) -serializes to- color-mix(in srgb, red 10%, blue) // [b & i] sum to 100%
color-mix(in srgb, red 50%, blue 40%) -serializes to- color-mix(in srgb, red 50%, blue 40%) // [b & j] only one is 50% (p1)
color-mix(in srgb, red 40%, blue 50%) -serializes to- color-mix(in srgb, red 40%, blue 50%) // [b & j] only one is 50% (p2)
color-mix(in srgb, red 30%, blue 40%) -serializes to- color-mix(in srgb, red 30%, blue 40%) // [b & j] sum to less than 100
color-mix(in srgb, red 75%, blue 75%) -serializes to- color-mix(in srgb, red 75%, blue 75%) // [b & j] sum to more than 100
color-mix(in srgb, red calc(10%), blue 50%) -serializes to- color-mix(in srgb, red calc(10%), blue 50%) // [b & j] one is `calc()` (p1)
color-mix(in srgb, red 50%, blue calc(10%)) -serializes to- color-mix(in srgb, red 50%, blue calc(10%)) // [b & j] one is `calc()` (p2)
color-mix(in srgb, red calc(10%), blue calc(90%)) -serializes to- color-mix(in srgb, red calc(10%), blue calc(90%)) // [b & j] both are `calc()`
color-mix(in srgb, red 50%, blue) -serializes to- color-mix(in srgb, red, blue) // [c & k] only p1 specified, is 50%
color-mix(in srgb, red 10%, blue) -serializes to- color-mix(in srgb, red 10%, blue) // [d & k] only p1 specified
color-mix(in srgb, red calc(50%), blue) -serializes to- color-mix(in srgb, red calc(50%), blue) // [d & k] only p1 specified, is `calc()`
color-mix(in srgb, red, blue 50%) -serializes to- color-mix(in srgb, red, blue) // [e & l] only p2 specified, is 50%
color-mix(in srgb, red, blue 90%) -serializes to- color-mix(in srgb, red 10%, blue) // [f & m] only p2 specified
color-mix(in srgb, red, blue calc(50%)) -serializes to- color-mix(in srgb, red, blue calc(50%)) // [g & n] only p2 specified, is `calc()`
color-mix(in srgb, red, blue) -serializes to- color-mix(in srgb, red, blue) // [g & o] neither is specified
Metadata
Metadata
Assignees
Labels
Type
Projects
Status