Fix bug with slots (#61)

vaadin · Jun 29, 2017 · 4ed4797 · 4ed4797
1 parent 0960ffd
commit 4ed4797
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 2 deletions.
diff --git a/test/board-element.html b/test/board-element.html
@@ -0,0 +1,23 @@
+<link rel="import" href="../../polymer/polymer-element.html">
+<link rel="import" href="../vaadin-board.html">
+<link rel="import" href="../vaadin-board-row.html">
+
+<dom-module id="board-element">
+    <template>
+        <vaadin-board style="width:1200px">
+            <vaadin-board-row>
+                <slot>
+                </slot>
+            </vaadin-board-row>
+        </vaadin-board>
+    </template>
+
+    <script>
+        class BoardElement extends Polymer.Element {
+            static get is() {
+                return 'board-element';
+            }
+        }
+        customElements.define(BoardElement.is, BoardElement);
+    </script>
+</dom-module>
diff --git a/test/index.html b/test/index.html
@@ -20,7 +20,8 @@
         'vaadin-board_media-queries.html',
         'vaadin-board_redraw_test.html',
         'vaadin-board_style.html',
-        'vaadin-board_test.html'
+        'vaadin-board_test.html',
+        'vaadin-board_slot_test.html'
     ];
 
     /**

diff --git a/test/outer.html b/test/outer.html
@@ -0,0 +1,25 @@
+<link rel="import" href="../../polymer/polymer-element.html">
+
+<dom-module id="outer-element">
+    <template>
+        <style>
+            :host {
+                border-width: 3px;
+                border-style: solid;
+                border-color: red;
+            }
+        </style>
+        <div>Header</div>
+        <slot>
+        </slot>
+    </template>
+
+    <script>
+        class OuterElement extends Polymer.Element {
+            static get is() {
+                return 'outer-element';
+            }
+        }
+        customElements.define(OuterElement.is, OuterElement);
+    </script>
+</dom-module>
diff --git a/test/vaadin-board_slot_test.html b/test/vaadin-board_slot_test.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport"
+          content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>vaadin-board slot` test</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+
+    <link rel="import" href="../vaadin-board.html">
+    <link rel="import" href="../vaadin-board-row.html">
+    <link rel="import" href="./outer.html">
+    <link rel="import" href="./board-element.html">
+  </head>
+  <body>
+  <test-fixture id="slot-board-row">
+    <template>
+      <board-element>
+        <div>top A</div>
+        <div>top B</div>
+        <div>top C</div>
+        <div>top D</div>
+      </board-element>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="slot-board-row-with-slot-child">
+    <template>
+      <board-element>
+        <outer-element>
+          <div>top A</div>
+        </outer-element>
+        <outer-element>
+          <div>top B</div>
+        </outer-element>
+        <outer-element>
+          <div>top C</div>
+        </outer-element>
+        <outer-element>
+          <div>top D</div>
+        </outer-element>
+      </board-element>
+    </template>
+  </test-fixture>
+
+    <script>
+      suite('vaadin-board-with-slotted-element', function (done) {
+
+        test('Inner items have 25% flex css.', function () {
+          var boardElement = fixture('slot-board-row');
+          var children = boardElement.querySelectorAll("div");
+          for (let i = 0; i < children.length; i++) {
+            var child = children[i];
+
+            assert.isAtLeast(child.getAttribute("style").indexOf("flex-basis: 25%"), 0,
+                    "Row children have flex-basis: 25% style");
+          }
+        });
+
+        test('Slot tag inside board child elements, does not effect number of board children.', function () {
+          var boardElement = fixture('slot-board-row-with-slot-child');
+            assert.equal(boardElement.childElementCount, 4, "There are exactly 4 children");
+        });
+      });
+
+    </script>
+  </body>
+</html>
diff --git a/vaadin-board-row.html b/vaadin-board-row.html
@@ -171,7 +171,7 @@
       _recalculateFlexBasis(forceResize) {
         const width = this.getBoundingClientRect().width;
         if (forceResize || width != this._oldWidth) {
-          const nodes = this.$.insertionPoint.assignedNodes();
+          const nodes = this.$.insertionPoint.assignedNodes({flatten: true});
 
           const filteredNodes = nodes.filter(node => node.nodeType !== node.TEXT_NODE);
           this._addStyleNames(width);