Finally we found it: Since Firefox 15 in order to use "border-image" is mandatory to set "border-style: solid;" so we modified qx/ui/decoration/css3/BorderImage.js:
diff --git
a/qooxdoo-1.5.1-sdk/framework/source/class/qx/ui/decoration/css3/BorderImage.js
b/qooxdoo-1.5.1-sdk/framework/source/class/qx/ui/decoration/css3/BorderImage.js
index 94b2d8f..6003814 100755
---
a/qooxdoo-1.5.1-sdk/framework/source/class/qx/ui/decoration/css3/BorderImage.js
+++
b/qooxdoo-1.5.1-sdk/framework/source/class/qx/ui/decoration/css3/BorderImage.js
@@ -189,6 +189,16 @@ qx.Class.define("qx.ui.decoration.css3.BorderImage",
{
group : ["repeatX", "repeatY"],
mode : "shorthand"
+ },
+
+ /**
+ * If set to <code>false</code>, the center image will be omitted and
only
+ * the border will be drawn.
+ */
+ fill :
+ {
+ check : "Boolean",
+ init : true
}
},
@@ -240,12 +250,17 @@ qx.Class.define("qx.ui.decoration.css3.BorderImage",
var repeat = [
this.getRepeatX(),
this.getRepeatY()
- ].join(" ")
+ ].join(" ");
+
+ var fill = this.getFill() &&
+ this.__getBorderImageSyntax() ? " fill" : "";
this.__markup = [
"<div style='",
qx.bom.element.Style.compile({
- "borderImage" : 'url("' + source + '") ' + slice.join(" ") + " "
+ repeat,
+ "borderImage" : 'url("' + source + '") ' + slice.join(" ") +
fill + " " + repeat,
+ borderStyle: "solid",
+ borderColor: 'transparent',
position: "absolute",
lineHeight: 0,
fontSize: 0,
@@ -261,6 +276,78 @@ qx.Class.define("qx.ui.decoration.css3.BorderImage",
},
+ /**
+ * Returns the type of syntax this client supports for its CSS
border-image
+ * implementation. Some browsers do not support the "fill" keyword
defined
+ * in the W3C draft (http://www.w3.org/TR/css3-background/) and will
not
+ * show the border image if it's set. Others follow the standard
closely and
+ * will omit the center image if "fill" is not set.
+ *
+ * @return {Boolean|null} <code>true</code> if the standard syntax is
supported.
+ * <code>null</code> if the supported syntax could not be detected.
+ * @internal
+ */
+ __getBorderImageSyntax : function() {
+ var styleName = this.__getPropertyName("borderImage");
+ if (!styleName) {
+ return null;
+ }
+
+ var el = document.createElement("div");
+
+ if (styleName === "borderImage") {
+ // unprefixed implementation: check individual properties
+ el.style[styleName] = 'url("foo.png") 4 4 4 4 fill stretch';
+ if (el.style.borderImageSource.indexOf("foo.png") >= 0 &&
+ el.style.borderImageSlice.indexOf("4 fill") >= 0 &&
+ el.style.borderImageRepeat.indexOf("stretch") >= 0)
+ {
+ return true;
+ }
+ }
+ else {
+ // prefixed implementation, assume no support for "fill"
+ el.style[styleName] = 'url("foo.png") 4 4 4 4 stretch';
+ // serialized value is unreliable, so just a simple check
+ if (el.style[styleName].indexOf("foo.png") >= 0) {
+ return false;
+ }
+ }
+
+ // unable to determine syntax
+ return null;
+ },
+
+ /** Vendor-specific style property prefixes **/
+ __VENDOR_PREFIXES : ["Webkit", "Moz", "O", "ms", "Khtml"],
+
+ /**
+ * Takes the name of a style property and returns the name the browser
uses
+ * for its implementation, which might include a vendor prefix.
+ *
+ * @param propertyName {String} Style property name to check
+ * @return {String|null} The supported property name or
<code>null</code> if
+ * not supported
+ */
+ __getPropertyName : function(propertyName)
+ {
+ var style = document.documentElement.style;
+
+ if (style[propertyName] !== undefined) {
+ return propertyName;
+ }
+
+ for (var i=0, l=this.__VENDOR_PREFIXES.length; i<l; i++) {
+ var prefixedProp = this.__VENDOR_PREFIXES[i] +
+ qx.lang.String.firstUp(propertyName);
+ if (style[prefixedProp] !== undefined) {
+ return prefixedProp;
+ }
+ }
+
+ return null;
+ },
+
// interface implementation
resize : function(element, width, height)
{
We added the " fill" string to the "border-image" style, and added
"border-style: solid" and "border-color: transparent". The rest of the
added code is to retrieve if the browser supports standard "border-image"
I attach the diff file.
TL;DR
Add "border-style: solid"
---
A. Matías Quezada
2012/9/3 A Matías Quezada <[email protected]>
> Hi,
>
> We are stuck on the 1.5.1 version and we found this problem too, wer'e
> trying to fix it but can't find exactly what we need to do to fix the
> problem, what styles we need to apply to the elements in order to fix it.
> We merged the 2.0 qx.bom.client.Css.getBorderImageSyntax() and add the
> 'ccs.borderImageSyntax' environment key and use it on
> qx.ui.decoration.css3.BorderImage and add 'fill' to the css but it brokes
> the border-radius.
>
> Thanks
>
> ---
> A. Matías Quezada
>
>
>
> 2012/9/3 Martin Wittemann <[email protected]>
>
>> Hey,
>>
>> Do you know when the 2.1 will be released ?
>>
>> It is planed in mid November. But this issue might be worth a 2.0.2
>> release which could be release earlier.
>>
>> Extra question for the gurus : what are the major changes when someone
>> switches from 1.6 to 2.0.1, regarding a "Desktop" app ?
>>
>> The basic stuff can be found in the release notes of 2.0:
>> http://qooxdoo.org/project/release_notes/2.0
>>
>> As this is not a huge step, deprecation warnings should be in place for
>> most of the stuff so the update should not be that big problem.
>>
>> Regards,
>> Martin
>>
>> ------------------------------------------------------------------------------
>> Live Security Virtual Conference
>> Exclusive live event will cover all the ways today's security and
>> threat landscape has changed and how IT managers can respond. Discussions
>> will include endpoint security, mobile security and the latest in malware
>> threats. http://www.accelacomm.com/jaw/sfrnl04242012/114/50122263/
>> _______________________________________________
>> qooxdoo-devel mailing list
>> [email protected]
>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>
>>
>
firefox15-patch.diff
Description: Binary data
------------------------------------------------------------------------------ Live Security Virtual Conference Exclusive live event will cover all the ways today's security and threat landscape has changed and how IT managers can respond. Discussions will include endpoint security, mobile security and the latest in malware threats. http://www.accelacomm.com/jaw/sfrnl04242012/114/50122263/
_______________________________________________ qooxdoo-devel mailing list [email protected] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
