|
5 | 5 | }, |
6 | 6 | "algorithms": [ |
7 | 7 | { |
8 | | - "html": "Percentages are required to be in the range 0% to 100%. Negative percentages are specifically disallowed. The percentages are normalized as follows:", |
9 | | - "rationale": "let", |
| 8 | + "name": "calculate a color-mix()", |
| 9 | + "href": "https://drafts.csswg.org/css-color-5/#calculate-a-color-mix", |
| 10 | + "html": "To <dfn class=\"dfn-paneled has-dfn-panel\" data-dfn-type=\"dfn\" data-export=\"\" id=\"calculate-a-color-mix\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\">calculate a color-mix()</dfn>:", |
| 11 | + "rationale": ".algorithm", |
10 | 12 | "steps": [ |
11 | 13 | { |
12 | | - "html": "<p>Let <var>p1</var> be the first percentage and <var>p2</var> the second one.</p>" |
| 14 | + "html": "<p><a data-link-type=\"dfn\">Normalize mix percentages</a> from the list of <span>mix items</span> passed to the function,\nwith the \"forced normalization\" flag set to true,\nletting <var>items</var> and <var>leftover</var> be the result.</p>" |
13 | 15 | }, |
14 | 16 | { |
15 | | - "html": "<p>If both percentages are omitted, they each default to 50%\n(an equal mix of the two colors).</p>" |
| 17 | + "html": "<p>If <var>leftover</var> is 100%,\nreturn <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-color-4/#transparent-black\" id=\"ref-for-transparent-black\">transparent black</a>,\nconverted to the specified interpolation <a class=\"production css\" data-link-type=\"type\" href=\"https://drafts.csswg.org/css-color-5/#typedef-color-space\" id=\"ref-for-typedef-color-space①\"><color-space></a>.</p>" |
16 | 18 | }, |
17 | 19 | { |
18 | | - "html": "<p>Otherwise, if <var>p2</var> is omitted, it becomes 100% - <var>p1</var></p>" |
| 20 | + "html": "<p>Let <var>alpha mult</var> be <code>1 - <var>leftover</var></code>,\ninterpreting <var>leftover</var> as a number between 0 and 1.</p>" |
19 | 21 | }, |
20 | 22 | { |
21 | | - "html": "<p>Otherwise, if <var>p1</var> is omitted, it becomes 100% - <var>p2</var></p>" |
| 23 | + "html": "Otherwise:", |
| 24 | + "rationale": "let", |
| 25 | + "steps": [ |
| 26 | + { |
| 27 | + "html": "<p>Let <var>item stack</var> be a <a data-link-type=\"dfn\" href=\"https://infra.spec.whatwg.org/#stack\" id=\"ref-for-stack\">stack</a> made by reversing <var>items</var>.\n(Thus, with the first item at the top of the stack.)</p>" |
| 28 | + }, |
| 29 | + { |
| 30 | + "html": "While <var>item stack</var> has length 2 or greater:", |
| 31 | + "rationale": "pop", |
| 32 | + "steps": [ |
| 33 | + { |
| 34 | + "html": "<p><a data-link-type=\"dfn\" href=\"https://infra.spec.whatwg.org/#stack-pop\" id=\"ref-for-stack-pop\">Pop</a> from <var>item stack</var> twice,\nletting <var>a</var> and <var>b</var> be the two results in order.\nLet <var>combined percentage</var> be the sum of <var>a</var> and <var>b</var>’s percentages.</p>" |
| 35 | + }, |
| 36 | + { |
| 37 | + "html": "<p>Interpolate <var>a</var> and <var>b</var>’s colors\nas described in <a href=\"https://drafts.csswg.org/css-color-4/#interpolation\"><cite>CSS Color 4</cite> § 12. Color Interpolation</a>,\nwith a progress percentage equal to <code>(<var>b</var>’s percentage) / <var>combined percentage</var>)</code>.\nIf the specified color space is a <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-color-4/#cylindrical-polar-color\" id=\"ref-for-cylindrical-polar-color①\">cylindrical polar color</a> space,\nthen the <a class=\"production css\" data-link-type=\"type\" href=\"https://drafts.csswg.org/css-color-5/#typedef-hue-interpolation-method\" id=\"ref-for-typedef-hue-interpolation-method\"><hue-interpolation-method></a> controls the\ninterpolation of hue, as described in <a href=\"https://drafts.csswg.org/css-color-4/#hue-interpolation\"><cite>CSS Color 4</cite> § 12.4 Hue Interpolation</a>.\nIf no <span class=\"production\" id=\"ref-for-typedef-hue-interpolation-method①\"><hue-interpolation-method></span> is specified,\nassume <span class=\"css\">shorter</span>.</p>" |
| 38 | + }, |
| 39 | + { |
| 40 | + "html": "<p>Create a new <a data-link-type=\"dfn\">mix item</a> with the resulting color\nand a percentage of <var>combined percentage</var>,\nand <a data-link-type=\"dfn\" href=\"https://infra.spec.whatwg.org/#stack-push\" id=\"ref-for-stack-push\">push</a> it onto <var>item stack</var>.</p>" |
| 41 | + } |
| 42 | + ] |
| 43 | + }, |
| 44 | + { |
| 45 | + "html": "<p>Set <var>color</var> to the color of the sole remaining item in <var>item stack</var>.</p>" |
| 46 | + } |
| 47 | + ] |
22 | 48 | }, |
23 | 49 | { |
24 | | - "html": "<p>Otherwise, if both are provided and add up to greater than 100%,\nthey are scaled accordingly so that they add up to 100%.</p>" |
| 50 | + "html": "<p>Multiply the alpha component of <var>color</var> by <var>alpha mult</var>.</p>" |
25 | 51 | }, |
26 | 52 | { |
27 | | - "html": "<p>Otherwise, if both are provided and add up to less than 100%,\nthe sum is saved as an alpha multiplier.\nIf the sum is greater than zero,\nthey are then scaled accordingly so that they add up to 100%.</p>" |
28 | | - } |
29 | | - ] |
30 | | - }, |
31 | | - { |
32 | | - "html": "After normalizing both percentages, the result is produced via the following algorithm:", |
33 | | - "rationale": "if", |
34 | | - "steps": [ |
35 | | - { |
36 | | - "html": "<p>If the alpha multiplier is zero, the result is <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-color-4/#valdef-color-transparent\" id=\"ref-for-valdef-color-transparent\">transparent</a>, converted to the specified interpolation <a class=\"production css\" data-link-type=\"type\" href=\"https://drafts.csswg.org/css-color-5/#typedef-color-space\" id=\"ref-for-typedef-color-space①\"><color-space></a></p>" |
37 | | - }, |
38 | | - { |
39 | | - "html": "<p>Otherwise, as described in <a href=\"https://drafts.csswg.org/css-color-4/#interpolation\"><cite>CSS Color 4</cite> § 12. Color Interpolation</a>,\nboth colors are converted to the specified interpolation <a class=\"production css\" data-link-type=\"type\" href=\"https://drafts.csswg.org/css-color-5/#typedef-color-space\" id=\"ref-for-typedef-color-space②\"><color-space></a>,\ntaking into account any <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-color-4/#analogous-components\" id=\"ref-for-analogous-components\">analogous components</a>.</p>" |
40 | | - }, |
41 | | - { |
42 | | - "html": "<p>Colors are then interpolated in the \tspecified color space,\nas described in <a href=\"https://drafts.csswg.org/css-color-4/#interpolation\"><cite>CSS Color 4</cite> § 12. Color Interpolation</a>.\nIf the specified color space is a <span class=\"css\">cylindrical-polar-color</span> space,\nthen the <a class=\"production css\" data-link-type=\"type\" href=\"https://drafts.csswg.org/css-color-5/#typedef-hue-interpolation-method\" id=\"ref-for-typedef-hue-interpolation-method\"><hue-interpolation-method></a> controls the\ninterpolation of hue, as described in <a href=\"https://drafts.csswg.org/css-color-4/#hue-interpolation\"><cite>CSS Color 4</cite> § 12.4 Hue Interpolation</a>.\nIf no <span class=\"production\" id=\"ref-for-typedef-hue-interpolation-method①\"><hue-interpolation-method></span> is specified, it is as if <span class=\"css\">shorter</span> had been specified.</p>" |
43 | | - }, |
44 | | - { |
45 | | - "html": "<p>If an alpha multiplier was produced during percentage normalization,\nthe alpha component of the interpolated result is multiplied\nby the alpha multiplier.</p>" |
| 53 | + "html": "<p>Return <var>color</var>.</p>" |
46 | 54 | } |
47 | 55 | ] |
48 | 56 | }, |
|
0 commit comments