Merge pull request #150 from Galooshi/dont-assume-top-left

Don't assume elements start at top left corner

lib/happo/public/happo-runner.js

@@ -182,6 +182,16 @@ window.happo = {
     }
   },
 
+  /**
+   * Wrapper around Math.min to handle undefined values.
+   */
+  min: function min(a, b) {
+    if (a === undefined) {
+      return b;
+    }
+    return Math.min(a, b);
+  },
+
   // This function takes a node and a box object that we will mutate.
   getFullRectRecursive: function getFullRectRecursive(node, box) {
     // Since we are already traversing through every node, let's piggyback on
@@ -192,9 +202,9 @@ window.happo = {
 
     /* eslint-disable no-param-reassign */
     box.bottom = Math.max(box.bottom, rect.bottom);
-    box.left = Math.min(box.left, rect.left);
+    box.left = this.min(box.left, rect.left);
     box.right = Math.max(box.right, rect.right);
-    box.top = Math.min(box.top, rect.top);
+    box.top = this.min(box.top, rect.top);
     /* eslint-enable no-param-reassign */
 
     for (var i = 0; i < node.children.length; i++) {
@@ -221,9 +231,9 @@ window.happo = {
     // Set up the initial object that we will mutate in our recursive function.
     var box = {
       bottom: 0,
-      left: 0,
+      left: undefined,
       right: 0,
-      top: 0,
+      top: undefined,
     };
 
     var rootNodes = this.getRootNodes();

spec/happo_spec.rb

@@ -147,6 +147,28 @@ def snapshot_file_exists?(description, size, file_name)
     end
   end
 
+  describe 'with an element rendering at the bottom right' do
+    let(:examples_js) { <<-EOS }
+      happo.define('#{description}', function() {
+        var elem = document.createElement('div');
+        elem.style.position = 'fixed';
+        elem.style.height = '40px';
+        elem.style.width = '40px';
+        elem.style.bottom = '0px';
+        elem.style.right = '0px';
+        document.body.appendChild(elem);
+      }, #{example_config});
+    EOS
+
+    it 'includes the component in the snapshot' do
+      run_happo
+      path = snapshot_file_name(description, '@large', 'current.png')
+      image = ChunkyPNG::Image.from_file(path)
+      expect(image.width).to eq(40)
+      expect(image.height).to eq(40)
+    end
+  end
+
   describe 'with an overflowing element' do
     let(:examples_js) { <<-EOS }
       happo.define('#{description}', function() {