Set flex-shrink: 0 to vaadin-horizontal-layout

vaadin · Dec 30, 2018 · 39114fe · 39114fe
1 parent 3680891
commit 39114fe
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/src/vaadin-horizontal-layout.html b/src/vaadin-horizontal-layout.html
@@ -13,6 +13,7 @@
     <style>
       :host {
         display: flex;
+        flex-shrink: 0;
         box-sizing: border-box;
       }
 

diff --git a/test/horizontal-layout.html b/test/horizontal-layout.html
@@ -7,6 +7,7 @@
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="../../test-fixture/test-fixture.html">
   <link rel="import" href="../vaadin-horizontal-layout.html">
+  <link rel="import" href="../vaadin-vertical-layout.html">
   <link rel="import" href="common.html">
   <custom-style>
     <style is="custom-style">
@@ -19,6 +20,14 @@
         width: 300px;
         height: 200px;
       }
+
+      #vertical {
+        height: 25px;
+      }
+
+      #vertical div {
+        height: 30px;
+      }
     </style>
   </custom-style>
 </head>
@@ -43,6 +52,22 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="inside-vertical-layout">
+    <template>
+      <div>
+        <vaadin-vertical-layout id="vertical">
+          <div>c1</div>
+          <vaadin-horizontal-layout>
+            <div id="c21">c2-1</div>
+            <div>c2-2</div>
+            <div>c2-3</div>
+          </vaadin-horizontal-layout>
+          <div id="c3">c3</div>
+        </vaadin-vertical-layout>
+      </div>
+    </template>
+  </test-fixture>
+
   <script>
     describe('basic tests', () => {
       let element, c1, c2;
@@ -143,5 +168,20 @@
         expect(wrapper.scrollWidth).to.equal(200);
       });
     });
+
+    describe('integration with vaadin-vertical-layout', () => {
+      let wrapper, horizontalItem, verticalItem;
+
+      beforeEach(() => {
+        wrapper = fixture('inside-vertical-layout');
+        horizontalItem = wrapper.querySelector('#c21');
+        verticalItem = wrapper.querySelector('#c3');
+      });
+
+
+      it('should not shrink horizontal-layout items', () => {
+        expect(getCoords(verticalItem).top).to.be.at.least(getCoords(horizontalItem).bottom);
+      });
+    });
   </script>
 </body>