1179078 - Border image doesn't work with CSS variables

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[Brian Grinstead [:bgrins]]

Attachment: 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)

Comment 1

[Cameron McCormack (:heycam)]

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".

Comment 2

[Cameron McCormack (:heycam)]

Attachment: a.patch

https://treeherder.mozilla.org/#/jobs?repo=try&revision=b05233e1cd1e

Comment 3

[Daniel Holbert [: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.

Comment 4

[Cameron McCormack (:heycam)]

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

[Daniel Holbert [:dholbert]]

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!

Comment 6

[Pulsebot]

https://hg.mozilla.org/integration/mozilla-inbound/rev/76df0d12c09a

Comment 7

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/76df0d12c09a

Comment 8

[Saheda Reza [:Antora]]

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

Comment 9

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Filed bug 1213076 as followup on ParseVariant.