feat: support repeating-linear-gradient

[Jackie1210]

• Rewrite algorithm of calculate x1, x2, y1, y2 for linear-gradient and passed all original tests
• Support repeating-linear-gradient

This PR can only be merged after #562

have fun! 🤣

Close #554

Note about the algorithm:

---

Option 1: 0 < deg < 90

define

$$r=(h/w)^2$$

then, calculate the intersection point of the last two lines

$$y = - r / tan(angle) ·x + w / 2 + h/2+r·w/ (2·tan(angle))$$ $$y=tan(angle) ·x + h$$

Finally, we can get (x1, y1), (x2, y2)

about length:

$$y = - 1 / tan(angle) ·x + w / 2 + h/2+r·w/ (2·tan(angle))$$ $$y=tan(angle) ·x + h$$

then, we can get a point: (a, b), so length is $2 ·\sqrt{(a - w/2)^2 + (b - h/2)^2}$

---

Option 2: 90 < deg < 180

define

$$r=(h/w)^2$$

then, calculate the intersection point of the last two lines

$$y = - r / tan(angle) ·x + w / 2 + h/2+r·w/ (2·tan(angle))$$ $$y=tan(angle) ·x$$

Finally, we can get (x1, y1), (x2, y2)

about length:

$$y = - 1 / tan(angle) ·x + w / 2 + h/2+r·w/ (2·tan(angle))$$ $$y=tan(angle) ·x$$

then, we can get a point: (a, b), so length is $2 ·\sqrt{(a - w/2)^2 + (b - h/2)^2}$

Actually, I didn't find any spec of the algorithm on calculating the points. I just came across the algorithm accidentally. It turns out it shows the same result just like chrome renders. Lucky!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
satori-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 21, 2023 2:39am

[Jackie1210]

My loooooooooooooooongest PR description above. 🤣 (mark)