Update layout code. Roughly compatible with IE 6-8... so far.

src/dom/layout.js

@@ -30,7 +30,7 @@
     
     // When IE gives us something other than a pixel value, this technique
     // (invented by Dean Edwards) will convert it to pixels.
-    if (element.runtimeStyle) {
+    if (/\d/.test(value) && element.runtimeStyle) {
       var style = element.style.left, rStyle = element.runtimeStyle.left; 
       element.runtimeStyle.left = element.currentStyle.left;
       element.style.left = value || 0;  
@@ -38,7 +38,7 @@
       element.style.left = style;
       element.runtimeStyle.left = rStyle;
       
-      return value;    
+      return value;
     }
     
     // For other browsers, we have to do a bit of work.
@@ -57,7 +57,7 @@
     }
     
     // If we get this far, we should probably give up.
-    return null;
+    return 0;
   }
   
   function toCSSPixels(number) {
@@ -154,10 +154,9 @@
       var position = element.getStyle('position'),
        width = element.getStyle('width');
        
-      var layout = element.getLayout();
       element.setStyle({
         position:   'absolute',
-        visibility: 'visible',
+        visibility: 'hidden',
         display:    'block'
       });
       
@@ -177,15 +176,16 @@
       } else {
         // If not, that means the element's width depends upon the width of
         // its parent.
-        var parent = element.up(), pLayout = parent.getLayout();
+        var parent = element.parentNode, pLayout = $(parent).getLayout();
+        
         
         newWidth = pLayout.get('width') -
-         layout.get('margin-left') -
-         layout.get('border-left') -
-         layout.get('padding-left') -
-         layout.get('padding-right') -
-         layout.get('border-right') -
-         layout.get('margin-right');
+         this.get('margin-left') -
+         this.get('border-left') -
+         this.get('padding-left') -
+         this.get('padding-right') -
+         this.get('border-right') -
+         this.get('margin-right');
       }
       
       element.setStyle({ width: newWidth + 'px' });
@@ -333,22 +333,22 @@
       },
       
       'border-top': function(element) {
-        return element.clientTop ||
+        return Object.isNumber(element.clientTop) ? element.clientTop : 
          getPixelValue(element, 'borderTopWidth');
       },
       
       'border-bottom': function(element) {
-        return element.clientBottom ||
+        return Object.isNumber(element.clientBottom) ? element.clientBottom : 
          getPixelValue(element, 'borderBottomWidth');
       },
       
       'border-left': function(element) {
-        return element.clientLeft ||
+        return Object.isNumber(element.clientLeft) ? element.clientLeft : 
          getPixelValue(element, 'borderLeftWidth');
       },
       
       'border-right': function(element) {
-        return element.clientRight ||
+        return Object.isNumber(element.clientRight) ? element.clientRight : 
          getPixelValue(element, 'borderRightWidth');
       },
       

test/unit/layout_test.js

@@ -31,29 +31,34 @@ new Test.Unit.Runner({
   'test layout on elements with display: none and exact width': function() {
     var layout = $('box2').getLayout();
     
+    this.assert(!isDisplayed($('box3')), 'box should be hidden');
+
     this.assertEqual(500, layout.get('width'), 'width');
     this.assertEqual(3, layout.get('border-right'), 'border-right');
     this.assertEqual(10, layout.get('padding-bottom'), 'padding-bottom');
+
+    this.assert(!isDisplayed($('box3')), 'box should still be hidden');
   },
   
   'test layout on elements with display: none and width: auto': function() {
     var layout = $('box3').getLayout();
     
-    // Ensure that we cleaned up after ourselves.
-    this.assert(!isDisplayed($('box3')), 'box should still be hidden');
+    this.assert(!isDisplayed($('box3')), 'box should be hidden');
     
-
     this.assertEqual(364, layout.get('width'), 'width');
     this.assertEqual(400, layout.get('margin-box-width'), 'margin-box-width');
     this.assertEqual(3, layout.get('border-right'), 'border-top');
     this.assertEqual(10, layout.get('padding-bottom'), 'padding-right');
+
+    // Ensure that we cleaned up after ourselves.
+    this.assert(!isDisplayed($('box3')), 'box should still be hidden');
   },
   
   'test layout on elements with display: none ancestors': function() {
     var layout = $('box4').getLayout();
     
     // Ensure that we cleaned up after ourselves.
-    this.assert(!isDisplayed($('box4')), 'box should still be hidden');
+    this.assert(!isDisplayed($('box4')), 'box should be hidden');
     
     // Width and height values are nonsensical for deeply-hidden elements.
     this.assertEqual(0, layout.get('width'), 'width of a deeply-hidden element should be 0');