Skip to content

Commit 1409e18

Browse files
committed
[css-color-5] Exclude negative percentages, with @LeaVerou fix w3c#6047
1 parent dd82638 commit 1409e18

1 file changed

Lines changed: 14 additions & 8 deletions

File tree

css-color-5/Overview.bs

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -121,33 +121,39 @@ Mixing colors: the ''color-mix()'' function {#color-mix}
121121

122122

123123
<pre class='prod'>
124-
<dfn>color-mix()</dfn> = color-mix( in <<color-space>> , [ <<color>> && <<percentage>>? ]#{2})
124+
<dfn>color-mix()</dfn> = color-mix( in <<color-space>> , [ <<color>> && <<percentage [0,100]>>? ]#{2})
125125
</pre>
126126

127-
The percentages are normalized as follows:
127+
Percentages are required to be in the range 0% to 100%. Negative percentages are specifically disallowed. The percentages are normalized as follows:
128128

129129
1. Let <var>p1</var> be the first percentage and <var>p2</var> the second one.
130-
2. If both percentages are omitted, they each default to 50% (an equal mix of the two colors).
130+
2. If both percentages are omitted, they each default to 50%
131+
(an equal mix of the two colors).
131132
3. Otherwise, if <var>p2</var> is omitted, it becomes 100% - <var>p1</var>
132133
4. Otherwise, if <var>p1</var> is omitted, it becomes 100% - <var>p2</var>
133-
5. If the percentages sum to zero <em>do something, tbd</em>
134-
6. Otherwise, if both are provided but do not add up to 100%,
135-
they are scaled accordingly so that they add up to 100%.
134+
5. If the percentages sum to zero, the function is invalid.
135+
6. Otherwise, if both are provided and add up to greater than 100%,
136+
they are scaled accordingly so that they add up to 100%.
137+
7. Otherwise, if both are provided and add up to less than 100%,
138+
the sum is saved as an alpha multiplier.
139+
They are then scaled accordingly so that they add up to 100%.
136140

137141
This means that
138142
<var>p1</var> becomes <var>p1</var> / (<var>p1</var> + <var>p2</var>)
139143
and
140144
<var>p2</var> becomes <var>p2</var> / (<var>p1</var> + <var>p2</var>).
141145

142-
Issue: Should we handle p1 + p2 &lt; 100% differently? E.g. a mix with `transparent`?
143-
144146
After normalizing both percentages, the result is produced via the following algorithm:
145147

146148
1. Both colors are converted to the specified <<color-space>>.
147149
If the specified color space has a smaller gamut
148150
than the one in which the color to be adjusted is specified,
149151
gamut mapping will occur.
150152
2. Colors are then <a href="../css-color-4/#interpolation">interpolated in the specified color space</a>.
153+
3. If an alpha multiplier was produced during percentage normalization,
154+
the alpha component of the interpolated result is multiplied
155+
by the alpha multiplier.
156+
151157

152158
The result of mixing is the color at the specified percentage along the progression
153159
of the second color to the first color.

0 commit comments

Comments
 (0)