Closed
Bug 709587
Opened 13 years ago
Closed 10 years ago
linear-gradient is ignored as a border-image
Categories
(Core :: CSS Parsing and Computation, defect)
Core
CSS Parsing and Computation
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.
Updated•13 years ago
|
Component: DOM: Core & HTML → Style System (CSS)
QA Contact: general → style-system
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; }
Comment 3•11 years ago
|
||
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: ietestcenter
Comment 4•10 years ago
|
||
This was recently fixed.
Comment 5•10 years ago
|
||
Fixed by bug 700926 comment 59 :)
Assignee: nobody → ncameron
Status: NEW → RESOLVED
Closed: 10 years ago
Keywords: dev-doc-needed
Resolution: --- → FIXED
Target Milestone: --- → mozilla29
Comment 6•10 years ago
|
||
Though the border-radius is not recognized. Should I create a new issue for that? Sebastian
Comment 7•10 years ago
|
||
(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.
Comment 8•10 years ago
|
||
(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
Comment 10•10 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.
Reporter | ||
Comment 12•10 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.
Comment 13•10 years ago
|
||
> 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•10 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•10 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•10 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•10 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.
Comment 18•9 years ago
|
||
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•9 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?
Comment 20•9 years ago
|
||
(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.
Description
•