1 files changed, 201 insertions, 0 deletions
diff --git a/vaadin-grid/test/grid-redrawer.html b/vaadin-grid/test/grid-redrawer.html
new file mode 100644
index 0000000..81c5f49
--- /dev/null
+++ b/vaadin-grid/test/grid-redrawer.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+  <title></title>
+  <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+
+  <script src="common.js"></script>
+
+  <link rel="import" href="../vaadin-grid.html">
+</head>
+
+<body>
+
+<div id="gridwrapper"></div>
+
+<script>
+  describe.feature('redrawer', function() {
+    function width(e) {
+      return pxval(e, 'width');
+    }
+
+    function height(e) {
+      return pxval(e, 'height');
+    }
+
+    function pxval(e, prop) {
+      return parseInt(e.ownerDocument.defaultView.getComputedStyle(e).getPropertyValue(prop).replace('px', ''));
+    }
+
+    describe('redraw', function() {
+      function assertHeightByRows(rows) {
+        var headersHeight = headers * thHeight;
+        var footersHeight = footers * tfHeight;
+
+        h1 = headersHeight + footersHeight + rows * tdHeight;
+        // IE and FF add an aditional pixel to each row
+        h2 = h1 + rows + headers + footers;
+
+        expect([h1, h2]).to.include(height(inner));
+      }
+
+      function assertSameDimensions() {
+        expect(width(grid)).to.equal(width(inner));
+        expect(height(grid)).to.equal(height(inner));
+      }
+
+      var inner,
+          tbody,
+          headers,
+          footers,
+          tfHeight,
+          thHeight,
+          tdHeight
+
+      beforeEach(function() {
+        inner = qaLocal("div.v-grid")[1];
+        tbody = qLight('table tbody');
+
+        headers = qaLocal('thead tr').length;
+        footers = qaLocal('tfoot tr').length;
+
+        tfHeight = height(qLocal('tfoot tr td'));
+        thHeight = height(qLocal('thead tr th'));
+        tdHeight = height(qLocal('tbody tr td'));
+
+        grid.style.height = "";
+        grid.style.width = "";
+        grid.removeAttribute('rows');
+
+        // need to return thenable object for FF sake.
+        return grid;
+      });
+
+      // currently disabled because the grid.then call jams the test on IE.
+      it.skip('should draw correct dimensions and row heights by default', function() {
+        return grid.then(function() {
+          assertSameDimensions();
+          assertHeightByRows(2);
+        });
+      });
+
+      it('should redraw correctly after modifying body', function() {
+        tbody.innerHTML += tbody.innerHTML;
+
+        return grid.then(function() {
+          assertSameDimensions();
+          assertHeightByRows(4);
+        });
+      });
+
+      describe('using limited row visibility', function() {
+        before(function() {
+          // Increase the number of rows
+          tbody.innerHTML += tbody.innerHTML; //4
+          tbody.innerHTML += tbody.innerHTML; //8
+          tbody.innerHTML += tbody.innerHTML; //16
+
+          return grid;
+        });
+
+        it('should redraw only visible rows', function() {
+          return grid.then(function() {
+            assertSameDimensions();
+
+            // grid has a limit of 10 data rows by default
+            assertHeightByRows(10);
+          });
+        });
+
+        it('should redraw visible rows after limit is decreased', function() {
+          grid.rows = 3;
+
+          return grid.then(function() {
+            assertSameDimensions();
+
+            assertHeightByRows(3);
+          });
+        });
+
+        it('should redraw visible rows limit is removed', function() {
+          grid.rows = 0;
+
+          return grid.then(function() {
+            assertSameDimensions();
+
+            assertHeightByRows(10); // default
+          });
+        });
+      });
+
+      it('should redraw with fixed dimensions', function() {
+        grid.style.width = '300px';
+        grid.style.height = '100px';
+
+        return grid.then(function() {
+          return grid.then(function() {
+            assertSameDimensions();
+          });
+        });
+      });
+
+      describe('grid with a fixed height (issue #8)', function() {
+        it('should keep the correct height after sorting', function() {
+          grid.columns[0].sortable = true;
+          grid.style.height = "500px";
+
+          var firstNonFrozenHeaderCell = qLocal.bind(this, ".v-grid-header .v-grid-cell:not(.frozen)");
+          firstNonFrozenHeaderCell().click();
+
+          return grid.then(function() {
+            expect(qaLocal('.v-grid')[3].style.height).to.equal('100%');
+          });
+        });
+      });
+
+      describe('using scaled dimensions', function() {
+        beforeEach(function() {
+          grid.style.position = 'absolute';
+          grid.style.width = '100%';
+          grid.style.height = '100%';
+
+          return grid;
+        });
+
+        it('should redraw with scaled dimensions', function() {
+            assertSameDimensions();
+        });
+
+        it('should match dimensions with the surrounding div', function() {
+          expect(height(grid)).to.equal(document.body.clientHeight);
+
+          // For some reason in IE sometimes there is a slight difference of 1 pixels
+          expect(Math.abs(document.body.clientWidth - width(grid))).to.be.at.most(1);
+        })
+
+        it('should allow different dimensions for v-grid and inner div', function() {
+          // We can have different height for v-grid and the inner grid.
+          // Also we can define more than 10 rows.
+          tbody.innerHTML += tbody.innerHTML; //4
+          tbody.innerHTML += tbody.innerHTML; //8
+          tbody.innerHTML += tbody.innerHTML; //16
+
+          grid.rows = 12;
+          grid.style.width = '50%';
+
+          return grid.then(function() {
+            expect(height(grid)).to.not.equal(height(inner));
+            assert.equal(width(grid), width(inner));
+            assertHeightByRows(12);
+          });
+        });
+      });
+    });
+  });
+</script>
+
+</body>
+</html>