Bug 192922 – CSS variables don't work for colors in "border" property

• Component: CSS
• Status: RESOLVED FIXED

[Nikita Vasilyev]

Created attachment 357798 [details]
[HTML] Reduction

See the reduction. In Chrome both rectangles have a green border. In STP 72, only the first one.

[Radar WebKit Bug Importer]

<rdar://problem/46878323>

[Joseph Pecoraro]

Actually this appears to just be the order of properties in the `border` shorthand:

Note that this works:

    border: hsl(100, 100%, var(--foreground-lightness)) 4px solid;

But not this:

    border: 4px solid hsl(100, 100%, var(--foreground-lightness));

[Justin Michaud]

This works:
.fail {
    --foreground: 100;
    border: 4px rgb(100, 0, var(--foreground)) dashed;
}
This does not:
.fail {
    --foreground: 100;
    border: 4px dashed rgb(100, 0, var(--foreground));
}

The reason is that in the first case, in CSSPropertyParser::consumeBorder, we do not consume the entire value and so consuming the border fails. In the second case, consuming the border does not fail. In CSSPropertyParser::parseValueStart, we expect the parsing to fail in order to fall through to the variable reference parser.

[Justin Michaud]

Created attachment 357962 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 357962 [details]
Patch

Clearing flags on attachment: 357962

Committed r239516: <https://trac.webkit.org/changeset/239516>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.