diff options
-rw-r--r-- | app/assets/javascripts/fly_out_nav.js | 2 | ||||
-rw-r--r-- | spec/javascripts/fly_out_nav_spec.js | 10 |
2 files changed, 6 insertions, 6 deletions
diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js index 67a58493fae..ae04826896b 100644 --- a/app/assets/javascripts/fly_out_nav.js +++ b/app/assets/javascripts/fly_out_nav.js @@ -18,7 +18,7 @@ export const showSubLevelItems = (el) => { const top = calculateTop(boundingRect, $subitems.offsetHeight); const isAbove = top < boundingRect.top; - $subitems.style.transform = `translate3d(0, ${top}px, 0)`; + $subitems.style.transform = `translate3d(0, ${Math.floor(top)}px, 0)`; if (isAbove) { $subitems.classList.add('is-above'); diff --git a/spec/javascripts/fly_out_nav_spec.js b/spec/javascripts/fly_out_nav_spec.js index 61e6c9f1fdb..7c530606d61 100644 --- a/spec/javascripts/fly_out_nav_spec.js +++ b/spec/javascripts/fly_out_nav_spec.js @@ -8,6 +8,7 @@ describe('Fly out sidebar navigation', () => { let el; beforeEach(() => { el = document.createElement('div'); + el.style.position = 'relative'; document.body.appendChild(el); }); @@ -89,7 +90,7 @@ describe('Fly out sidebar navigation', () => { describe('showSubLevelItems', () => { beforeEach(() => { - el.innerHTML = '<div class="sidebar-sub-level-items"></div>'; + el.innerHTML = '<div class="sidebar-sub-level-items" style="position: absolute;"></div>'; }); it('adds is-over class to el', () => { @@ -111,18 +112,17 @@ describe('Fly out sidebar navigation', () => { }); it('sets transform of sub-items', () => { + const subItems = el.querySelector('.sidebar-sub-level-items'); showSubLevelItems(el); expect( - el.querySelector('.sidebar-sub-level-items').style.transform, - ).toBe(`translate3d(0px, ${el.offsetTop}px, 0px)`); + subItems.style.transform, + ).toBe(`translate3d(0px, ${el.getBoundingClientRect().top}px, 0px)`); }); it('sets is-above when element is above', () => { const subItems = el.querySelector('.sidebar-sub-level-items'); subItems.style.height = `${window.innerHeight + el.offsetHeight}px`; - subItems.style.position = 'absolute'; - el.style.position = 'relative'; el.style.top = `${window.innerHeight - el.offsetHeight}px`; spyOn(subItems.classList, 'add'); |