How many times a repeating-linear-gradient repeats itself ?

Question

Check the code : https://code.sololearn.com/WvQSJdLo6S1i/?ref=app

As you can see i have set { repeating-linear-gradient(to bottom, orange 10%, yellow 20%); }. I think that each segment will take 20% length. There should be only 5 repetitions, but there are 10. Where am I wrong ?

Answer 1

Put orange 0%

Answer 2

Conclusion : the width of each segment is equal to difference of position of first and last color stop of the gradient.

For horizontal : 20% - 10% = 10%
For Vertical: 20% - 0% = 20%