Closed Bug 709587 Opened 9 years ago Closed 7 years ago

linear-gradient is ignored as a border-image

Categories

(Core :: CSS Parsing and Computation, defect)

defect
Not set
normal

Tracking

()

RESOLVED FIXED
mozilla29

People

(Reporter: bugs, Assigned: nrc)

References

Details

(Keywords: dev-doc-complete)

Attachments

(1 file)

913 bytes, application/xhtml+xml
Details
Tested in FF8 and FF11.

According to the reporter from #css,  Safari and Chrome do in fact render it, but they do so in an odd fashion:

"I now remember my problem in trying to use a linear gradient as a border-image.  Firefox doesn't do gradients as border image values, Safari and Opera both do it, but ignore the border radius and don't discard the center by default."

I'll attach his testcase next.
Attached file Example of problem
Component: DOM: Core & HTML → Style System (CSS)
QA Contact: general → style-system
Depends on: 700926
It seems that we should handle VARIANT_GRADIENT somewhere in 

http://dxr.mozilla.org/mozilla-central/layout/style/nsCSSParser.cpp.html#l7454

>  if (ParseVariant(value, VARIANT_INHERIT, nullptr)) {
    AppendValue(eCSSProperty_border_image_source, value);
    AppendValue(eCSSProperty_border_image_slice, value);
    AppendValue(eCSSProperty_border_image_width, value);
    AppendValue(eCSSProperty_border_image_outset, value);
    AppendValue(eCSSProperty_border_image_repeat, value);
    // Keyword "inherit" (and "initial") can't be mixed, so we are done.
    return true;
  }


http://dxr.mozilla.org/mozilla-central/layout/style/nsCSSParser.cpp.html#l7481

  // This loop is used to handle the parsing of border-image properties which
  // can appear in any order.
  nsCSSValue imageSourceValue;
  while (!CheckEndProperty()) {
    // <border-image-source>
>    if (!foundSource && ParseVariant(imageSourceValue, VARIANT_UO, nullptr)) {
      AppendValue(eCSSProperty_border_image_source, imageSourceValue);
      foundSource = true;
      continue;
    }
This was recently fixed.
Fixed by bug 700926 comment 59 :)
Assignee: nobody → ncameron
Status: NEW → RESOLVED
Closed: 7 years ago
Keywords: dev-doc-needed
Resolution: --- → FIXED
Target Milestone: --- → mozilla29
Though the border-radius is not recognized. Should I create a new issue for that?

Sebastian
(In reply to Sebastian Zartner from comment #6)
> Though the border-radius is not recognized. Should I create a new issue for
> that?

Yes please, and CC :nrc.
(In reply to Matthew N. [:MattN] from comment #7)
> (In reply to Sebastian Zartner from comment #6)
> > Though the border-radius is not recognized. Should I create a new issue for
> > that?
> 
> Yes please, and CC :nrc.

Created bug 969263 for that.

Sebastian
Duplicate of this bug: 988460
(In reply to Matthew N. [:MattN] (away May 9 - 12) from comment #5)
> Fixed by bug 700926 comment 59 :)

Unfortunately, in Firefox 29, this is still not fixed. I'm running 29.01 and can't get any gradients to work in border-image (in FireFox). Here's an example page: http://css-tricks.com/examples/GradientBorder/ Works great in Safari & Chrome.
Duplicate of this bug: 988460
joshrenaud, the demo page you link to has a number of issues, as far as I can tell.
1) It only uses the prefixed forms, instead of finishing the style blocks with the unprefixed version.  This screws up IE on gradients too...

2) It doesn't specify border-style - adding border-style solid makes it display in Firefox, but only when combined with...

3) It needs to set the width a bit wider (ONLY Firefox on Linux).  This seems like it is probably a Firefox bug, and it was not required for Firefox on OSX.  When I tried .top-to-bottom, it didn't display until I set border-width: 5px;  border-width: 4px; only rendered on one side.
> adding border-style solid makes it display in Firefox

Note that this is correct per spec: "border-style:none" means no border, period.  Chrome and Safari have old implementations that are not updated to the current spec text.
It appears comment #12 percolated down to the page creator.  Points (1) and (2) are now fixed, although the page still misleadingly claims it only works in Chrome and Safari.

As for (3) - I encountered the same 3px/4px/5px issue on a separate linux machine, but setting azure backend to skia fixed.

So, probably a cairo bug.

That is:
gfx.content.azure.backends;skia
I emailed the editor of CSS Tricks about the website that was linked here in comment 10, and border-style:solid has now been added, so it's working for Firefox.
Now if only he'd fix the line that says:
"Only actually works in webkit"

P'raps you could poke him about that ☺
(In reply to nemo from comment #16)
> Now if only he'd fix the line that says:
> "Only actually works in webkit"
> 
> P'raps you could poke him about that ☺

Done.
BTW, point #3 from comment #12 still broken in Firefox for Linux using Cairo and not Skia on http://css-tricks.com/examples/GradientBorder/

Gonna guess this probably should be filed as a separate bug though?
(In reply to nemo from comment #19)
> BTW, point #3 from comment #12 still broken in Firefox for Linux using Cairo
> and not Skia on http://css-tricks.com/examples/GradientBorder/
> 
> Gonna guess this probably should be filed as a separate bug though?

Yes, sounds to be a very specific issue.
FWIW it's working fine on Windows 7.

Sebastian
You need to log in before you can comment on or make changes to this bug.