Closed Bug 1179078 Opened 8 years ago Closed 8 years ago

Border image doesn't work with CSS variables


(Core :: CSS Parsing and Computation, defect)

Not set



Tracking Status
firefox42 --- fixed


(Reporter: bgrins, Assigned: heycam)





(2 files)

As reported in and, it doesn't work to use a CSS variable inside of a border-image value.  For example:

<div id="var" />
#var {
  --red: #f00;
  border: 15px solid transparent;
  border-image: linear-gradient(transparent 15%, var(--red) 15%, var(--red) 85%, transparent 85%) 1 1;

(see attached testcase)
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".
Attached patch a.patchSplinter Review
Assignee: nobody → cam
Attachment #8628082 - Flags: review?(dholbert)
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.
Yeah, it could move there.  Although note that other parse errors, like garbage inside the linear-gradient(), will also trigger this same problem.
Comment on attachment 8628082 [details] [diff] [review]

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+
Blocks: 1049012
See Also: 1049012
Closed: 8 years ago
Flags: in-testsuite+
Resolution: --- → FIXED
Target Milestone: --- → mozilla42
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]
Filed bug 1213076 as followup on ParseVariant.
You need to log in before you can comment on or make changes to this bug.