Closed
Bug 1179078
Opened 8 years ago
Closed 8 years ago
Border image doesn't work with CSS variables
Categories
(Core :: CSS Parsing and Computation, defect)
Core
CSS Parsing and Computation
Tracking
()
RESOLVED
FIXED
mozilla42
Tracking | Status | |
---|---|---|
firefox42 | --- | fixed |
People
(Reporter: bgrins, Assigned: heycam)
References
()
Details
Attachments
(2 files)
409 bytes,
text/html
|
Details | |
3.13 KB,
patch
|
dholbert
:
review+
|
Details | Diff | Splinter Review |
As reported in https://bugzilla.mozilla.org/show_bug.cgi?id=1099448#c14 and https://bugzilla.mozilla.org/show_bug.cgi?id=1049012#c10, it doesn't work to use a CSS variable inside of a border-image value. For example: <div id="var" /> <style> #var { --red: #f00; border: 15px solid transparent; border-image: linear-gradient(transparent 15%, var(--red) 15%, var(--red) 85%, transparent 85%) 1 1; } </style> (see attached testcase)
Reporter | ||
Updated•8 years ago
|
Assignee | ||
Comment 1•8 years ago
|
||
I believe the issue is to do with how we parse the border-image shorthand: we first try to parse an <image> value, and if that fails, we continue on to try parsing the <slice> and <repeat> values. When parsing the <image> fails in the middle of the linear-gradient(), due to the var(--red), we skip until the closing ")", and return false from ParseVariant. ParseBorderImage assumes that the input is left at "linear-gradient(" token, though, so we end up skipping it altogether and parsing the property as if it were just "1 1".
Assignee | ||
Comment 2•8 years ago
|
||
https://treeherder.mozilla.org/#/jobs?repo=try&revision=b05233e1cd1e
Comment 3•8 years ago
|
||
Perhaps worth putting the reftest in layout/reftests/w3c-css/submitted/variables/, instead of layout/reftests/bugs? This seems like a "special" usage of a color CSS variable that's worth testing in the main testsuite, and I wouldn't be surprised if other implementations end up independently having this same bug.
Assignee | ||
Comment 4•8 years ago
|
||
Yeah, it could move there. Although note that other parse errors, like garbage inside the linear-gradient(), will also trigger this same problem.
Comment 5•8 years ago
|
||
Comment on attachment 8628082 [details] [diff] [review] a.patch Per IRC: please also include a testcase in layout/reftests/bugs that doesn't involve CSS variables (since it sounds like this bug can make us incorrectly accept the tail end of bogus border-image values). Also, for the testcase that *does* use CSS variables (which should move to the w3c directory), I'd suggest using a different start vs. end color, to make it easier to see that the gradient is actually rendering correctly. (either with 2 different variables, or with a variable to some non-variable color) r=me with that. Thanks!
Attachment #8628082 -
Flags: review?(dholbert) → review+
Reporter | ||
Updated•8 years ago
|
Comment 7•8 years ago
|
||
https://hg.mozilla.org/mozilla-central/rev/76df0d12c09a
Status: ASSIGNED → RESOLVED
Closed: 8 years ago
status-firefox42:
--- → fixed
Flags: in-testsuite+
Resolution: --- → FIXED
Target Milestone: --- → mozilla42
Comment 8•8 years ago
|
||
I have reproduced this bug on Firefox Version 42.0a1 It's fixed and verified on Latest Firefox Beta Build ID 20151005144425 User Agent Mozilla/5.0 (Windows NT 6.3; rv:42.0) Gecko/20100101 Firefox/42.0 Tested OS- Windows8.1 32bit
QA Whiteboard: [bugday-20151008]
Comment 9•8 years ago
|
||
Filed bug 1213076 as followup on ParseVariant.
You need to log in
before you can comment on or make changes to this bug.
Description
•