linear-gradient is ignored as a border-image

RESOLVED FIXED in mozilla29

Status

()

Core
CSS Parsing and Computation
RESOLVED FIXED
6 years ago
3 years ago

People

(Reporter: nemo, Assigned: nrc)

Tracking

(Depends on: 1 bug, {dev-doc-complete})

Trunk
mozilla29
dev-doc-complete
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

913 bytes, application/xhtml+xml
Details
(Reporter)

Description

6 years ago
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.
(Reporter)

Comment 1

6 years ago
Created attachment 580746 [details]
Example of problem

Updated

6 years ago
Component: DOM: Core & HTML → Style System (CSS)
QA Contact: general → style-system
Depends on: 700926

Comment 2

5 years ago
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;
    }
FWIW, MS added this to their Tests: http://samples.msdn.microsoft.com/ietestcenter/css3/bordersbackgrounds/border-image-image-type-003.htm (using border-image-source).
Blocks: 554013

Comment 4

3 years ago
This was recently fixed.
Fixed by bug 700926 comment 59 :)
Assignee: nobody → ncameron
Status: NEW → RESOLVED
Last Resolved: 3 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

Comment 10

3 years ago
(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
(Reporter)

Comment 12

3 years ago
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.
(Reporter)

Comment 14

3 years ago
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

Comment 15

3 years ago
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.
(Reporter)

Comment 16

3 years ago
Now if only he'd fix the line that says:
"Only actually works in webkit"

P'raps you could poke him about that ☺

Comment 17

3 years ago
(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.
Doc updated:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Browser_compatibility
https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient#Browser_compatibility
https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient#Browser_Compatibility
https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-radial-gradient#Browser_compatibility
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image#Browser_compatibility
and
https://developer.mozilla.org/en-US/Firefox/Releases/29#CSS
Keywords: dev-doc-needed → dev-doc-complete
(Reporter)

Comment 19

3 years ago
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.