- From: Sam Weinig via GitHub <sysbot+gh@w3.org>
- Date: Fri, 23 Aug 2024 17:36:06 +0000
- To: public-css-archive@w3.org
weinig has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-color-5] Edge cases for color-mix() percentage serialization questions == The current text for [serializing `color-mix()`](https://drafts.csswg.org/css-color-5/#serial-color-mix) states: > The serialization of the declared value of a [color-mix()](https://drafts.csswg.org/css-color-5/#funcdef-color-mix) function is the string "color-mix(in ", followed by the specified [<color-space>](https://drafts.csswg.org/css-color-5/#typedef-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](https://drafts.csswg.org/css-color-5/#color-mix-percent-norm))). 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()](https://drafts.csswg.org/css-color-5/#funcdef-color-mix) function is the string "color-mix(in ", followed by the specified [<color-space>](https://drafts.csswg.org/css-color-5/#typedef-color-space) 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()](https://drafts.csswg.org/css-color-5/#funcdef-color-mix) function is defined to: > - If BOTH the first percentage `p1` and second percentages `p2` are specified: > - if both `p1` equals 50% and `p2` 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 not `calc()`, the value of `100% - 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()](https://drafts.csswg.org/css-color-5/#funcdef-color-mix) function is defined to: > - If BOTH the first percentage `p1` and second percentages `p2` are specified: > - if neither `p1` nor `p2` is `calc()`, and `p1 + 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 not `calc()`, nothing is serialized. (m) > - else, `p2` is serialized as is. (n) > - else if NEITHER is specified: > - nothing is serialized. (o) ```css 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(50%), blue calc(50%)) // [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 ``` Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10772 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 23 August 2024 17:36:08 UTC