Skip to content


Subversion checkout URL

You can clone with
Download ZIP


only try to normalize the units to px on IE if it's not set on style attribute #2417

wants to merge 1 commit into from

4 participants


After reading this StackOverflow question I noticed the IE normalization code on getStyle was also overriding a style that was directly set on the element, so if for example you set a style on a non-px based unit, a later getStyle would mangle that unit back into px.
This patch simply avoids running the normalization if the return value was directly set on the element, so that IE can behave just like any other browser.

I know @ibolmo is running a drive to refactor this on #2414 but this is just another thing he will need to take into account when refactoring (adds 2 tests) and improves our robustness right now.


Right, but this issue is what was brought up in: #2337 (comment)

To reiterate.. should getStyle return the css definition?

Here's a thought:

var CSSStyle = function(element, value){
  this.element = element;
  this.value = value;

CSSStyle.prototype.toString = CSSStyle.prototype.valueOf = function(){
  return this.value;

CSSStyle.prototype.toInt = function(){
  // if not in px form, then some how compute the value

Trying to keep compat with this toValue and toString magic, but I'm sure it's not 100%.


The CSS definition as in what the CSS stylesheet has instead of the manually set style attribute? If that's the question, the answer is a plain no, as we need to return what is currently applied to the element, and you can't always query the CSS stylesheet to check a definition (stylesheets loaded cross-domain can't be read by js for example).

That being said, if you inspect this patch it is to actually do less mangling on IE as we were doing too much. The code in that block normalizes cases where IE returns the value on the stylesheet on a getComputedStyle call whereas other browsers return the applied pixel value.


+1 for doing less -> see #2328


Scratch that...

@arian arian closed this in cc5e5ed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Aug 27, 2012
  1. @gonchuki
This page is out of date. Refresh to see the latest.
2  Source/Element/Element.Style.js
@@ -142,7 +142,7 @@ Element.implement({
if (color) result = result.replace(color[0], color[0].rgbToHex());
if (Browser.opera ||{
- if ((/^(height|width)$/).test(property) && !(/px$/.test(result))){
+ if ((/^(height|width)$/).test(property) && !(/px$/.test(result)) && ![property]){
var values = (property == 'width') ? ['left', 'right'] : ['top', 'bottom'], size = 0;
size += this.getStyle('border-' + value + '-width').toInt() + this.getStyle('padding-' + value).toInt();
8 Specs/1.4client/Element/Element.Style.js
@@ -96,6 +96,14 @@ describe('Element.Style', function(){
it('should get the width from the CSS', function(){
+ it('should not mangle the units from inline width in %', function(){
+ expect(new Element('div').setStyle('width', '40%').getStyle('width')).toEqual('40%');
+ });
+ it('should not mangle the units from inline auto width', function(){
+ expect(new Element('div').setStyle('width', 'auto').getStyle('width')).toEqual('auto');
+ });
it('should get the left margin from the CSS', function(){
// FireFox returns px (and maybe even as floats)
Something went wrong with that request. Please try again.