| Summary: | CSS variables don't work for colors in "border" property | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Nikita Vasilyev <nvasilyev> | ||||||
| Component: | CSS | Assignee: | Justin Michaud <justin_michaud> | ||||||
| Status: | RESOLVED FIXED | ||||||||
| Severity: | Normal | CC: | commit-queue, dino, joepeck, justin_michaud, simon.fraser, webkit-bug-importer, zalan | ||||||
| Priority: | P2 | Keywords: | HasReduction, InRadar | ||||||
| Version: | WebKit Nightly Build | ||||||||
| Hardware: | All | ||||||||
| OS: | All | ||||||||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=192916 | ||||||||
| Attachments: |
|
||||||||
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));
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.
Created attachment 357962 [details]
Patch
Comment on attachment 357962 [details] Patch Clearing flags on attachment: 357962 Committed r239516: <https://trac.webkit.org/changeset/239516> All reviewed patches have been landed. Closing bug. |
Created attachment 357798 [details] [HTML] Reduction See the reduction. In Chrome both rectangles have a green border. In STP 72, only the first one.