Border image doesn't work with CSS variables

RESOLVED FIXED in Firefox 42

Status

()

RESOLVED FIXED
3 years ago
3 years ago

People

(Reporter: bgrins, Assigned: heycam)

Tracking

unspecified
mozilla42
Points:
---
Bug Flags:
in-testsuite +

Firefox Tracking Flags

(firefox42 fixed)

Details

(URL)

Attachments

(2 attachments)

(Reporter)

Description

3 years ago
Created attachment 8628052 [details]
border-image-variable.html

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)
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".
Created attachment 8628082 [details] [diff] [review]
a.patch

https://treeherder.mozilla.org/#/jobs?repo=try&revision=b05233e1cd1e
Assignee: nobody → cam
Status: NEW → ASSIGNED
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]
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

3 years ago
Blocks: 1049012
See Also: bug 1049012
https://hg.mozilla.org/mozilla-central/rev/76df0d12c09a
Status: ASSIGNED → RESOLVED
Last Resolved: 3 years ago
status-firefox42: --- → fixed
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]
You need to log in before you can comment on or make changes to this bug.