[css-values-4] mix() can not represent composition

For example, this requires a mix between three values:

  @keyframes anim {
    from {
      offset-distance: min(10px, 10%);
    }
    to {
      animation-composition: add;
      offset-distance: min(20px, 20%);
    }
  }
  div {
    offset-distance: min(30px, 30%);
    animation: anim 10s -1s linear paused;
  }

The computed value should be something like calc(min(30px, 30%) * 0.1 + min(10px, 10%) * 0.9 + min(20px, 20%) * 0.1), which mix() isn't able to represent.

See also https://github.com/w3c/csswg-drafts/issues/9341.

Start with the CSS Values 4 context in this issue and read the related issue 9341. Use the three-value animation-composition example to determine how the value representation should work; done means the specification can represent the shown composition and produce the described computed value.