From 056216a3bd2fd1f28ba9ec6f2797aa2aaec5c6f0 Mon Sep 17 00:00:00 2001
From: Muhammadamin <muhamadamin1992@gmail.com>
Date: Tue, 23 Feb 2021 07:52:09 -0500
Subject: modal: don't add margin & padding when sticky is not full width
 (#30621)

* modal: don't add margin & padding when sticky is not full width

* Check if element is shorter than window

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Rohit Sharma <rohit2sharma95@gmail.com>
---
 js/tests/unit/modal.spec.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

(limited to 'js/tests')

diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index 7f16bfc1d..2e46b9cb3 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -161,6 +161,30 @@ describe('Modal', () => {
       modal.toggle()
     })
 
+    it('should not adjust the inline margin and padding of sticky and fixed elements when element do not have full width', done => {
+      fixtureEl.innerHTML = [
+        '<div class="sticky-top" style="margin-right: 0px; padding-right: 0px; width: calc(100vw - 50%)"></div>',
+        '<div class="modal"><div class="modal-dialog"></div></div>'
+      ].join('')
+
+      const stickyTopEl = fixtureEl.querySelector('.sticky-top')
+      const originalMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+      const originalPadding = Number.parseInt(window.getComputedStyle(stickyTopEl).paddingRight, 10)
+      const modalEl = fixtureEl.querySelector('.modal')
+      const modal = new Modal(modalEl)
+
+      modalEl.addEventListener('shown.bs.modal', () => {
+        const currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+        const currentPadding = Number.parseInt(window.getComputedStyle(stickyTopEl).paddingRight, 10)
+
+        expect(currentMargin).toEqual(originalMargin, 'sticky element\'s margin should not be adjusted while opening')
+        expect(currentPadding).toEqual(originalPadding, 'sticky element\'s padding should not be adjusted while opening')
+        done()
+      })
+
+      modal.show()
+    })
+
     it('should ignore values set via CSS when trying to restore body padding after closing', done => {
       fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
       const styleTest = document.createElement('style')
-- 
cgit v1.2.3