From 80a7d75559197813d54fd46ae12a86d6f850d27c Mon Sep 17 00:00:00 2001
From: Serhii Kulykov <iamkulykov@gmail.com>
Date: Wed, 22 Jul 2020 13:24:31 +0300
Subject: [PATCH] fix: prevent incorrect overflow in Safari (#180) (#181)

---
 src/vaadin-dialog-resizable-mixin.html        |  2 +-
 ...aadin-dialog_draggable-resizable-test.html | 29 +++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/vaadin-dialog-resizable-mixin.html b/src/vaadin-dialog-resizable-mixin.html
index d914979..4d20576 100644
--- a/src/vaadin-dialog-resizable-mixin.html
+++ b/src/vaadin-dialog-resizable-mixin.html
@@ -19,7 +19,7 @@
       }
 
       [part='overlay'][style] .resizer-container {
-        height: 100%;
+        min-height: 100%;
         width: 100%;
       }
 
diff --git a/test/vaadin-dialog_draggable-resizable-test.html b/test/vaadin-dialog_draggable-resizable-test.html
index c8a34e3..c35461c 100644
--- a/test/vaadin-dialog_draggable-resizable-test.html
+++ b/test/vaadin-dialog_draggable-resizable-test.html
@@ -79,6 +79,15 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="overflow">
+    <template>
+      <vaadin-dialog draggable opened modeless>
+        <template>
+        </template>
+      </vaadin-dialog>
+    </template>
+  </test-fixture>
+
   <script>
       function dispatchMouseEvent(target, type, coords = {x: 0, y: 0}, button = 0) {
         const e = new MouseEvent(type, {
@@ -728,5 +737,25 @@
           expect(modalDialog.opened).to.be.true;
         });
       });
+
+      describe('dialog with overflowing content', () => {
+        let dialog;
+
+        beforeEach(() => {
+          dialog = fixture('overflow');
+        });
+
+        it('should not overflow when style attribute is set on the overlay part', () => {
+          const container = document.createElement('div');
+          container.style.maxWidth = '300px';
+          container.style.overflow = 'auto';
+          container.textContent = Array(100).join('Lorem ipsum dolor sit amet');
+          const overlay = dialog.$.overlay;
+          overlay.content.appendChild(container);
+          // emulate removing "pointer-events: none"
+          overlay.$.overlay.setAttribute('style', '');
+          expect(overlay.$.overlay.offsetHeight).to.equal(overlay.$.resizerContainer.offsetHeight);
+        });
+      });
   </script>
 </body>