http://www.strictly-software.com/CSSStyleObject.asp

Re: the property name has to be passed as an ecmascript binding value

That is true if you use .getPropertyValue, but I have found that using [styleProperty] has worked well for me in most cases, and all browsers use the property name in camelCase (without the dash), I believe.

Here:

getComputedStyle table margin bug

table{margin:100px;}
.wrapper {
margin: 5px;
padding: 10px 10px 10px 10px;
background-color:#dfe8f6;/*#c3daf9*/
border: 1px solid magenta; /*TODO*/
display: block;
width: 1920px;width: 1920px !important;
height: 1022px;height: 1022px !important;
}

function getStyle(oElm, strCssRule){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}

Back to square one!

The one thing that I would just add that seems not too clear in your code is that in fireFox, the property name has to be passed as an ecmascript binding value ie. border-bottom, whereas in IE you have to pass the property name without the dash ie. borderBottom. So I found some code somewhere for removing the dash and making the letter after it uppercase.

getComputedStyle table margin bug

table{margin:100px;}
.wrapper {
margin: 5px;
padding: 10px 10px 10px 10px;
background-color:#dfe8f6;/*#c3daf9*/
border: 1px solid magenta; /*TODO*/
display: block;
width: 1920px;width: 1920px !important;
height: 1022px;height: 1022px !important;
}

function getStyle(oElm, strCssRule){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}

YYYYYYYYYYYYYYYY

Actual margin is set to 100px

var foo = document.getElementById('wrapper');
alert('Padding-Right: '+ getStyle(foo, 'padding-right'));
alert('Margin-Right: '+ getStyle(foo, 'margin-right'));

I'm not that familiar with GWT (not at all really), but I wonder if, as you pointed out, the -moz specific CSS could be having an effect.

Have you tried just created a plain HTML page with some similar CSS and tried using my getComputedStyle function in that context? I'd be interested to see if this is somehow related to GWT, or if this is truly a bug in my code (if it's the latter, it definitely needs ot be fixed, but so far it has worked for me).

The Gimme version comes packaged with the Gimme library: http://codeplex.com/gimme/

However, you could probably rip out that function by pulling it from the source: http://www.codeplex.com/gimme/SourceControl/FileView.aspx?itemId=168513&changeSetId=18894

You will also need to grab the function, convertToPixels, as getStyle uses it.

I would suggest doing some troubleshooting in a plain HTML page first though, before going any further.

My code is not pure JavaScript (its GWT JSNI) but here its is.

The JSNI code

public static native String JSNIGetStyleProperty(Element _elem, String _style) /*-{
if (_style=='width') {
return _elem.offsetWidth;
}
if (_style=='height') {
return _elem.offsetHeight ;
}
var computedStyle;
if (typeof _elem.currentStyle != 'undefined')
{
computedStyle = _elem.currentStyle;
return computedStyle[_style];
}
else
{
computedStyle = document.defaultView.getComputedStyle(_elem, null);
return computedStyle[_style];
}
}-*/;


The client code that calls the JSNI code. This is Java (GWT)code

public static int getElementMarginAndBorderAndPaddingHorz(Element e) {
int tp = JSNIUtils.getIntStyleProperty(e, "paddingLeft");
int bp= JSNIUtils.getIntStyleProperty(e, "paddingRight");
int tbw = JSNIUtils.getIntStyleProperty(e, "borderLeftWidth");
int bbw = JSNIUtils.getIntStyleProperty(e, "borderRightWidth");
tp += JSNIUtils.getIntStyleProperty(e, "marginLeft");
bp += JSNIUtils.getIntStyleProperty(e, "marginRight");
int w = (tp + bp) + (tbw + bbw);
return w;
}


And the CSS style for the element for which I am trying to determine the element's edges


.wrapper {
margin: 5px;
padding: 5px 5px 5px 5px;
background-color:#dfe8f6;
border: 1px solid magenta;
}


Also the top of the CSS file says has some magic that may be relevant. The CSS file itself is huge so I will just show snippets of the area that applies.


@charset "utf-8";
*{
-moz-box-sizing:border-box;box-sizing:border-box;margin:0px;padding:0px;
}
body {
color: #000000;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 76%;
margin: 0px 0px 0px 0px;
}


Where can I find the version you are referring to?

Thanks,

Melody