8000 [css-color-5] Defined that in color-mix(), if the percentages sum to … · w3c/csswg-drafts@8195d37 · GitHub
[go: up one dir, main page]

Skip to content

Commit 8195d37

Browse files
committed
[css-color-5] Defined that in color-mix(), if the percentages sum to zero, return transparent #11678
1 parent e4390b9 commit 8195d37

File tree

1 file changed

+19
-8
lines changed

1 file changed

+19
-8
lines changed

css-color-5/Overview.bs

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -223,17 +223,14 @@ Mixing Colors: the ''color-mix()'' Function {#color-mix}
223223
they are scaled accordingly so that they add up to 100%.
224224
6. Otherwise, if both are provided and add up to less than 100%,
225225
the sum is saved as an alpha multiplier.
226-
They are then scaled accordingly so that they add up to 100%.
226+
If the sum is greater than zero,
227+
they are then scaled accordingly so that they add up to 100%.
227228

228229
This means that
229230
<var>p1</var> becomes <var>p1</var> / (<var>p1</var> + <var>p2</var>)
230231
and
231232
<var>p2</var> becomes <var>p2</var> / (<var>p1</var> + <var>p2</var>).
232233

233-
<!-- @@ Need to handle the sum to zero case to generate transparent black
234-
https://github.com/w3c/csswg-drafts/issues/11678#issuecomment-2686226875
235-
-->
236-
237234
<wpt>
238235
color-mix-percents-01.html
239236
color-mix-percents-02.html
@@ -270,18 +267,19 @@ Mixing Colors: the ''color-mix()'' Function {#color-mix}
270267

271268
After normalizing both percentages, the result is produced via the following algorithm:
272269

273-
1. As described in [[css-color-4#interpolation]],
270+
1. If the alpha multiplier is zero, the result is ''transparent'', converted to the specified interpolation <<color-space>>
271+
2. Otherwise, as described in [[css-color-4#interpolation]],
274272
both colors are converted to the specified interpolation <<color-space>>,
275273
taking into account any [=analogous components=].
276-
2. Colors are then interpolated in the specified color space,
274+
3. Colors are then interpolated in the specified color space,
277275
as described in [[css-color-4#interpolation]].
278276
If the specified color space is a ''cylindrical-polar-color'' space,
279277
then the <<hue-interpolation-method>> controls the
280278
interpolation of hue, as described in
281279
[[css-color-4#hue-interpolation]].
282280
If no <<hue-interpolation-method>> is specified, it is as if
283281
''shorter'' had been specified.
284-
3. If an alpha multiplier was produced during percentage normalization,
282+
4. If an alpha multiplier was produced during percentage normalization,
285283
the alpha component of the interpolated result is multiplied
286284
by the alpha multiplier.
287285

@@ -298,6 +296,10 @@ After normalizing both percentages, the result is produced via the following alg
298296
/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.colormix.html
299297
</wpt>
300298

299+
<!-- @@ Need WPT to test the sum to zero case, to generate transparent black
300+
https://github.com/w3c/csswg-drafts/issues/11678#issuecomment-2686226875
301+
-->
302+
301303
The result of mixing is the color at the specified percentage along the progression
302304
of the second color to the first color.
303305

@@ -387,6 +389,15 @@ and a percentage of 100% returns the same color converted to the specified color
387389
* which is a slightly-blueish green: <span class="swatch" style="--color: rgb(7.7377% 52.5730% 37.3213%)"></span> rgb(7.7377% 52.5730% 37.3213%)
388390
</div>
389391

392+
<div class="example" id="ex-mix-zero-sum">
393+
In this example, both percentages are zero, so their sum is also zero:
394+
395+
<pre class="lang-css">color-mix(in oklch, teal 0%, olive 0%);</pre>
396+
397+
Thus, the result is transparent black, in the ''oklch'' color space:<br>
398+
<span class="swatch" style="--color: transparent"></span> oklch(0% 0 none / 0)
399+
</div>
400+
390401
<h3 id="color-mix-color-space-effect">
391402
Effect of Mixing Color Space on color-mix
392403
</h3>

0 commit comments

Comments
 (0)
0