Ensure hidden absolutely-positioned elements are sized correctly when…

… they have no explicit width set. [#1084 state:resolved] (Viktor Kojouharov, Andrew Dupont)

CHANGELOG

@@ -1,3 +1,5 @@
+* Ensure hidden absolutely-positioned elements are sized correctly when they have no explicit width set. [#1084 state:resolved] (Viktor Kojouharov, Andrew Dupont)
+
 * Change custom events implementation to use the `onlosecapture` event instead of the `onfilterchange` event for non-bubbling custom events in Internet Explorer. (John-David Dalton, Andrew Dupont)
 
 * Revert `Element.getHeight` and `Element.getWidth` to their previous behavior in order to ensure backward-compatibility. (Sam Stephenson, Andrew Dupont)

src/dom/layout.js

@@ -328,11 +328,13 @@
         // Either way, it means the element is the width it needs to be
         // in order to report an accurate height.
         newWidth = getPixelValue(element, 'width', context);
-      } else if (width && (position === 'absolute' || position === 'fixed')) {
+      } else if (position === 'absolute' || position === 'fixed') {
+        // Absolute- and fixed-position elements' dimensions don't depend
+        // upon those of their parents.
         newWidth = getPixelValue(element, 'width', context);
       } else {
-        // If not, that means the element's width depends upon the width of
-        // its parent.
+        // Otherwise, the element's width depends upon the width of its
+        // parent.
         var parent = element.parentNode, pLayout = $(parent).getLayout();
 
         newWidth = pLayout.get('width') -
@@ -1081,4 +1083,4 @@
       }
     });    
   }  
-})();
+})();

test/unit/fixtures/layout.html

@@ -188,3 +188,24 @@
     width: 25%;
   }
 </style>
+
+<!-- Absolutely-positioned, hidden element with BODY as offset parent, and a child to wrap around -->
+<div id="box10">  
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
+</div> <!-- #box10 -->
+
+<style type="text/css" media="screen">
+  #box10 {
+    position: absolute;    
+    display: none;
+  }
+  #box10 p {
+    width: 242px;
+    height: 555px;
+    padding: 10px;
+    margin: 5px;
+    border: 3px solid #000;
+  }
+</style>
+
+

test/unit/layout_test.js

@@ -154,5 +154,12 @@ new Test.Unit.Runner({
     var obj = layout.toObject('top');
     this.assert('top' in obj,
      "object should have 'top' property");
+  },
+
+  'test dimensions on absolutely-positioned, hidden elements': function() {
+    var layout = $('box10').getLayout();
+
+    this.assertEqual(278, layout.get('width'),  'width' );
+    this.assertEqual(591, layout.get('height'), 'height');
   }
-});
+});