1345204 - stylo: Implement parsing support for legacy webkit gradients

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement, P3)

Description

[Bobby Holley (:bholley)]

Manish raised this in a meeting. Apparently there's an old gradient syntax for webkit that needs special parse handling. Manish, can you fill in the details?

Comment 1

[Manish Goregaokar [:manishearth]]

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#History_of_the_syntax

Basically, Gecko supports -webkit-linear-gradient, -webkit-radial-gradient, and -webkit-gradient.

The first two parse to almost the same thing as a regular gradient, however, instead of `to top` you specify `top` (for all the direction keywords). These direction keywords work differently, too.

|linear-gradient(to top, red, blue)| is the same as  |-webkit-linear-gradient(top, blue, red)| (or |-webkit-linear-gradient(bottom, red, blue)|); i.e. specced gradients go towards a the corner/direction, legacy ones originate from it.

However, the diagonals are trickier. |linear-gradient(to top left, red, blue);| is NOT the same as |-webkit-linear-gradient(top left, blue, red)| or |-webkit-linear-gradient(bottom right, red, blue)|. With `linear-gradient(to top left, ..)`, the contour lines (i.e. lines along which the color is constant) is parallel to the opposite diagonal (the topright-bottomleft diagonal), whereas with `-webkit-linear-gradient(bottom right, ...)` the contour lines are perpendicular to the specified diagonal (topleft-bottomright).

As far as stylo is concerned, this just means that we have to consider these to be different kinds of gradients, with slightly different syntax, perhaps storing them as regular gradients with a legacy flag set (which matches Gecko's storage of these -- it parses these without performing any flipping on the direction, and then just stores it with an mLegacySyntax set in the style struct).

-webkit-gradient is trickier. It has a completely different syntax, and lets you specify points instead of corners. It will probably have to be a different variant. https://webkit.org/blog/175/introducing-css-gradients/

Comment 2

[Bobby Holley (:bholley)]

Ok. I think this is something that could probably be an E-less-easy on Servo. Manish, WDYT? If so, could you file?

Comment 3

[Manish Goregaokar [:manishearth]]

https://github.com/servo/servo/issues/15895

Comment 4

[Xidorn Quan [:xidorn] UTC+10]

-webkit-{linear,radical}-gradient has been implemented. I guess we can close this bug. I'll open a new bug for -webkit-gradient.