Skip to content
GitLab
Unverified Commit 86897d70 authored by Rajesh Kumar's avatar Rajesh Kumar Committed by GitHub
Browse files

Merge branch 'main' into readonly-input

parents 9ed33295 55a0f9af
1 merge request!34040Placeholder changes to input value in readonly input.
Hide whitespace changes
Inline Side-by-side
Showing
with 180 additions and 297 deletions
+180 -297
js/src/popover.js
+ 0
- 4
View file @ 86897d70
......@@ -149,10 +149,6 @@ class Popover extends Tooltip {
let data = Data.get(this, DATA_KEY)
const _config = typeof config === 'object' ? config : null
if (!data && /dispose|hide/.test(config)) {
return
}
if (!data) {
data = new Popover(this, _config)
Data.set(this, DATA_KEY, data)
......
js/src/tooltip.js
+ 0
- 4
View file @ 86897d70
......@@ -725,10 +725,6 @@ class Tooltip extends BaseComponent {
let data = Data.get(this, DATA_KEY)
const _config = typeof config === 'object' && config
if (!data && /dispose|hide/.test(config)) {
return
}
if (!data) {
data = new Tooltip(this, _config)
}
......
js/src/util/index.js
+ 2
- 11
View file @ 86897d70
......@@ -159,20 +159,11 @@ const typeCheckConfig = (componentName, config, configTypes) => {
}
const isVisible = element => {
if (!element) {
if (!isElement(element) || element.getClientRects().length === 0) {
return false
}
if (element.style && element.parentNode && element.parentNode.style) {
const elementStyle = getComputedStyle(element)
const parentNodeStyle = getComputedStyle(element.parentNode)
return elementStyle.display !== 'none' &&
parentNodeStyle.display !== 'none' &&
elementStyle.visibility !== 'hidden'
}
return false
return getComputedStyle(element).getPropertyValue('visibility') === 'visible'
}
const isDisabled = element => {
......
js/src/util/scrollbar.js
+ 4
- 1
View file @ 86897d70
......@@ -44,8 +44,11 @@ const _setElementAttributes = (selector, styleProp, callback) => {
}
const actualValue = element.style[styleProp]
if (actualValue) {
Manipulator.setDataAttribute(element, styleProp, actualValue)
}
const calculatedValue = window.getComputedStyle(element)[styleProp]
Manipulator.setDataAttribute(element, styleProp, actualValue)
element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`
})
}
......
js/tests/unit/modal.spec.js
+ 4
- 208
View file @ 86897d70
import Modal from '../../src/modal'
import EventHandler from '../../src/dom/event-handler'
import { getWidth as getScrollBarWidth } from '../../src/util/scrollbar'
/** Test helpers */
import { clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture'
......@@ -62,170 +61,22 @@ describe('Modal', () => {
it('should toggle a modal', done => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
document.documentElement.style.overflowY = 'scroll'
const initialOverFlow = document.body.style.overflow
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
const originalPadding = '0px'
const originalPadding = '10px'
document.body.style.paddingRight = originalPadding
modalEl.addEventListener('shown.bs.modal', () => {
expect(document.body.getAttribute('data-bs-padding-right')).toEqual(originalPadding, 'original body padding should be stored in data-bs-padding-right')
expect(document.body.style.overflow).toEqual('hidden')
modal.toggle()
})
modalEl.addEventListener('hidden.bs.modal', () => {
expect(document.body.getAttribute('data-bs-padding-right')).toBeNull()
expect().nothing()
document.documentElement.style.overflowY = 'auto'
done()
})
modal.toggle()
})
it('should adjust the inline padding of fixed elements when opening and restore when closing', done => {
fixtureEl.innerHTML = [
'<div class="fixed-top" style="padding-right: 0px"></div>',
'<div class="modal"><div class="modal-dialog"></div></div>'
].join('')
document.documentElement.style.overflowY = 'scroll'
const fixedEl = fixtureEl.querySelector('.fixed-top')
const originalPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
const scrollBarWidth = getScrollBarWidth()
modalEl.addEventListener('shown.bs.modal', () => {
const expectedPadding = originalPadding + scrollBarWidth
const currentPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual(`${originalPadding}px`, 'original fixed element padding should be stored in data-bs-padding-right')
expect(currentPadding).toEqual(expectedPadding, 'fixed element padding should be adjusted while opening')
modal.toggle()
})
modalEl.addEventListener('hidden.bs.modal', () => {
const currentPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
expect(fixedEl.hasAttribute('data-bs-padding-right')).toEqual(false, 'data-bs-padding-right should be cleared after closing')
expect(currentPadding).toEqual(originalPadding, 'fixed element padding should be reset after closing')
document.documentElement.style.overflowY = 'auto'
done()
})
modal.toggle()
})
it('should adjust the inline margin of sticky elements when opening and restore when closing', done => {
fixtureEl.innerHTML = [
'<div class="sticky-top" style="margin-right: 0px;"></div>',
'<div class="modal"><div class="modal-dialog"></div></div>'
].join('')
document.documentElement.style.overflowY = 'scroll'
const stickyTopEl = fixtureEl.querySelector('.sticky-top')
const originalMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
const scrollBarWidth = getScrollBarWidth()
modalEl.addEventListener('shown.bs.modal', () => {
const expectedMargin = originalMargin - scrollBarWidth
const currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
expect(stickyTopEl.getAttribute('data-bs-margin-right')).toEqual(`${originalMargin}px`, 'original sticky element margin should be stored in data-bs-margin-right')
expect(currentMargin).toEqual(expectedMargin, 'sticky element margin should be adjusted while opening')
modal.toggle()
})
modalEl.addEventListener('hidden.bs.modal', () => {
const currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
expect(stickyTopEl.hasAttribute('data-bs-margin-right')).toEqual(false, 'data-bs-margin-right should be cleared after closing')
expect(currentMargin).toEqual(originalMargin, 'sticky element margin should be reset after closing')
document.documentElement.style.overflowY = 'auto'
done()
})
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')
styleTest.type = 'text/css'
styleTest.appendChild(document.createTextNode('body { padding-right: 7px; }'))
document.head.appendChild(styleTest)
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
modalEl.addEventListener('shown.bs.modal', () => {
modal.toggle()
})
modalEl.addEventListener('hidden.bs.modal', () => {
expect(window.getComputedStyle(document.body).paddingLeft).toEqual('0px', 'body does not have inline padding set')
document.head.removeChild(styleTest)
done()
})
modal.toggle()
})
it('should ignore other inline styles 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')
styleTest.type = 'text/css'
styleTest.appendChild(document.createTextNode('body { padding-right: 7px; }'))
document.head.appendChild(styleTest)
document.body.style.color = 'red'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
modalEl.addEventListener('shown.bs.modal', () => {
modal.toggle()
})
modalEl.addEventListener('hidden.bs.modal', () => {
const bodyPaddingRight = document.body.style.paddingRight
expect(bodyPaddingRight === '0px' || bodyPaddingRight === '').toEqual(true, 'body does not have inline padding set')
expect(document.body.style.color).toEqual('red', 'body still has other inline styles set')
document.head.removeChild(styleTest)
document.body.removeAttribute('style')
expect(document.body.style.overflow).toEqual(initialOverFlow)
done()
})
......@@ -659,61 +510,6 @@ describe('Modal', () => {
modal.show()
})
it('should not adjust the inline body padding when it does not overflow', done => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
const originalPadding = window.getComputedStyle(document.body).paddingRight
// Hide scrollbars to prevent the body overflowing
document.body.style.overflow = 'hidden'
document.documentElement.style.paddingRight = '0px'
modalEl.addEventListener('shown.bs.modal', () => {
const currentPadding = window.getComputedStyle(document.body).paddingRight
expect(currentPadding).toEqual(originalPadding, 'body padding should not be adjusted')
// Restore scrollbars
document.body.style.overflow = 'auto'
done()
})
modal.show()
})
it('should not adjust the inline body padding when it does not overflow, even on a scaled display', done => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
const originalPadding = window.getComputedStyle(document.body).paddingRight
// Remove body margins as would be done by Bootstrap css
document.body.style.margin = '0'
// Hide scrollbars to prevent the body overflowing
document.body.style.overflow = 'hidden'
// Simulate a discrepancy between exact, i.e. floating point body width, and rounded body width
// as it can occur when zooming or scaling the display to something else than 100%
document.documentElement.style.paddingRight = '.48px'
modalEl.addEventListener('shown.bs.modal', () => {
const currentPadding = window.getComputedStyle(document.body).paddingRight
expect(currentPadding).toEqual(originalPadding, 'body padding should not be adjusted')
// Restore overridden css
document.body.style.removeProperty('margin')
document.body.style.removeProperty('overflow')
done()
})
modal.show()
})
it('should enforce focus', done => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
......
js/tests/unit/popover.spec.js
+ 0
- 15
View file @ 86897d70
......@@ -266,21 +266,6 @@ describe('Popover', () => {
expect(popover.show).toHaveBeenCalled()
})
it('should do nothing if dipose is called when a popover do not exist', () => {
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
const popoverEl = fixtureEl.querySelector('a')
jQueryMock.fn.popover = Popover.jQueryInterface
jQueryMock.elements = [popoverEl]
spyOn(Popover.prototype, 'dispose')
jQueryMock.fn.popover.call(jQueryMock, 'dispose')
expect(Popover.prototype.dispose).not.toHaveBeenCalled()
})
})
describe('getInstance', () => {
......
js/tests/unit/tooltip.spec.js
+ 0
- 15
View file @ 86897d70
......@@ -1351,21 +1351,6 @@ describe('Tooltip', () => {
expect(tooltip.show).toHaveBeenCalled()
})
it('should do nothing when we call dispose or hide if there is no tooltip created', () => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
spyOn(Tooltip.prototype, 'dispose')
jQueryMock.fn.tooltip = Tooltip.jQueryInterface
jQueryMock.elements = [div]
jQueryMock.fn.tooltip.call(jQueryMock, 'dispose')
expect(Tooltip.prototype.dispose).not.toHaveBeenCalled()
})
it('should throw error on undefined method', () => {
fixtureEl.innerHTML = '<div></div>'
......
js/tests/unit/util/index.spec.js
+ 50
- 2
View file @ 86897d70
......@@ -326,10 +326,14 @@ describe('Util', () => {
expect(Util.isVisible(div)).toEqual(false)
})
it('should return false if the parent element is not visible', () => {
it('should return false if an ancestor element is display none', () => {
fixtureEl.innerHTML = [
'<div style="display: none;">',
' <div class="content"></div>',
' <div>',
' <div>',
' <div class="content"></div>',
' </div>',
' </div>',
'</div>'
].join('')
......@@ -338,6 +342,38 @@ describe('Util', () => {
expect(Util.isVisible(div)).toEqual(false)
})
it('should return false if an ancestor element is visibility hidden', () => {
fixtureEl.innerHTML = [
'<div style="visibility: hidden;">',
' <div>',
' <div>',
' <div class="content"></div>',
' </div>',
' </div>',
'</div>'
].join('')
const div = fixtureEl.querySelector('.content')
expect(Util.isVisible(div)).toEqual(false)
})
it('should return true if an ancestor element is visibility hidden, but reverted', () => {
fixtureEl.innerHTML = [
'<div style="visibility: hidden;">',
' <div style="visibility: visible;">',
' <div>',
' <div class="content"></div>',
' </div>',
' </div>',
'</div>'
].join('')
const div = fixtureEl.querySelector('.content')
expect(Util.isVisible(div)).toEqual(true)
})
it('should return true if the element is visible', () => {
fixtureEl.innerHTML = [
'<div>',
......@@ -349,6 +385,18 @@ describe('Util', () => {
expect(Util.isVisible(div)).toEqual(true)
})
it('should return false if the element is hidden, but not via display or visibility', () => {
fixtureEl.innerHTML = [
'<details>',
' <div id="element"></div>',
'</details>'
].join('')
const div = fixtureEl.querySelector('#element')
expect(Util.isVisible(div)).toEqual(false)
})
})
describe('isDisabled', () => {
......
js/tests/unit/util/scrollbar.spec.js
+ 119
- 36
View file @ 86897d70
......@@ -4,10 +4,13 @@ import Manipulator from '../../../src/dom/manipulator'
describe('ScrollBar', () => {
let fixtureEl
const doc = document.documentElement
const parseInt = arg => Number.parseInt(arg, 10)
const getRightPadding = el => parseInt(window.getComputedStyle(el).paddingRight)
const getPaddingX = el => parseInt(window.getComputedStyle(el).paddingRight)
const getMarginX = el => parseInt(window.getComputedStyle(el).marginRight)
const getOverFlow = el => el.style.overflow
const getPaddingAttr = el => Manipulator.getDataAttribute(el, 'padding-right')
const getMarginAttr = el => Manipulator.getDataAttribute(el, 'margin-right')
const getOverFlowAttr = el => Manipulator.getDataAttribute(el, 'overflow')
const windowCalculations = () => {
return {
......@@ -61,8 +64,8 @@ describe('ScrollBar', () => {
}
})
it('should return false if body is overflowing', () => {
document.documentElement.style.overflowY = 'hidden'
it('should return false if body is not overflowing', () => {
doc.style.overflowY = 'hidden'
document.body.style.overflowY = 'hidden'
fixtureEl.innerHTML = [
'<div style="height: 110vh; width: 100%"></div>'
......@@ -75,7 +78,7 @@ describe('ScrollBar', () => {
describe('getWidth', () => {
it('should return an integer greater than zero, if body is overflowing', () => {
document.documentElement.style.overflowY = 'scroll'
doc.style.overflowY = 'scroll'
document.body.style.overflowY = 'scroll'
fixtureEl.innerHTML = [
'<div style="height: 110vh; width: 100%"></div>'
......@@ -110,56 +113,60 @@ describe('ScrollBar', () => {
'<div class="fixed-top" id="fixed2" style="padding-right: 5px; width: 100vw"></div>',
'</div>'
].join('')
document.documentElement.style.overflowY = 'scroll'
doc.style.overflowY = 'scroll'
const fixedEl = fixtureEl.querySelector('#fixed1')
const fixedEl2 = fixtureEl.querySelector('#fixed2')
const originalPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
const originalPadding2 = Number.parseInt(window.getComputedStyle(fixedEl2).paddingRight, 10)
const originalPadding = getPaddingX(fixedEl)
const originalPadding2 = getPaddingX(fixedEl2)
const expectedPadding = originalPadding + Scrollbar.getWidth()
const expectedPadding2 = originalPadding2 + Scrollbar.getWidth()
Scrollbar.hide()
let currentPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
let currentPadding2 = Number.parseInt(window.getComputedStyle(fixedEl2).paddingRight, 10)
expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual('0px', 'original fixed element padding should be stored in data-bs-padding-right')
expect(fixedEl2.getAttribute('data-bs-padding-right')).toEqual('5px', 'original fixed element padding should be stored in data-bs-padding-right')
let currentPadding = getPaddingX(fixedEl)
let currentPadding2 = getPaddingX(fixedEl2)
expect(getPaddingAttr(fixedEl)).toEqual(`${originalPadding}px`, 'original fixed element padding should be stored in data-bs-padding-right')
expect(getPaddingAttr(fixedEl2)).toEqual(`${originalPadding2}px`, 'original fixed element padding should be stored in data-bs-padding-right')
expect(currentPadding).toEqual(expectedPadding, 'fixed element padding should be adjusted while opening')
expect(currentPadding2).toEqual(expectedPadding2, 'fixed element padding should be adjusted while opening')
Scrollbar.reset()
currentPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
currentPadding2 = Number.parseInt(window.getComputedStyle(fixedEl2).paddingRight, 10)
expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual(null, 'data-bs-padding-right should be cleared after closing')
expect(fixedEl2.getAttribute('data-bs-padding-right')).toEqual(null, 'data-bs-padding-right should be cleared after closing')
currentPadding = getPaddingX(fixedEl)
currentPadding2 = getPaddingX(fixedEl2)
expect(getPaddingAttr(fixedEl)).toEqual(null, 'data-bs-padding-right should be cleared after closing')
expect(getPaddingAttr(fixedEl2)).toEqual(null, 'data-bs-padding-right should be cleared after closing')
expect(currentPadding).toEqual(originalPadding, 'fixed element padding should be reset after closing')
expect(currentPadding2).toEqual(originalPadding2, 'fixed element padding should be reset after closing')
done()
})
it('should adjust the inline margin of sticky elements', done => {
it('should adjust the inline margin and padding of sticky elements', done => {
fixtureEl.innerHTML = [
'<div style="height: 110vh">' +
'<div class="sticky-top" style="margin-right: 0px; width: 100vw; height: 10px"></div>',
'<div class="sticky-top" style="margin-right: 10px; padding-right: 20px; width: 100vw; height: 10px"></div>',
'</div>'
].join('')
document.documentElement.style.overflowY = 'scroll'
doc.style.overflowY = 'scroll'
const stickyTopEl = fixtureEl.querySelector('.sticky-top')
const originalMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
const originalMargin = getMarginX(stickyTopEl)
const originalPadding = getPaddingX(stickyTopEl)
const expectedMargin = originalMargin - Scrollbar.getWidth()
const expectedPadding = originalPadding + Scrollbar.getWidth()
Scrollbar.hide()
let currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
expect(stickyTopEl.getAttribute('data-bs-margin-right')).toEqual('0px', 'original sticky element margin should be stored in data-bs-margin-right')
expect(currentMargin).toEqual(expectedMargin, 'sticky element margin should be adjusted while opening')
expect(getMarginAttr(stickyTopEl)).toEqual(`${originalMargin}px`, 'original sticky element margin should be stored in data-bs-margin-right')
expect(getMarginX(stickyTopEl)).toEqual(expectedMargin, 'sticky element margin should be adjusted while opening')
expect(getPaddingAttr(stickyTopEl)).toEqual(`${originalPadding}px`, 'original sticky element margin should be stored in data-bs-margin-right')
expect(getPaddingX(stickyTopEl)).toEqual(expectedPadding, 'sticky element margin should be adjusted while opening')
Scrollbar.reset()
currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
expect(stickyTopEl.getAttribute('data-bs-margin-right')).toEqual(null, 'data-bs-margin-right should be cleared after closing')
expect(currentMargin).toEqual(originalMargin, 'sticky element margin should be reset after closing')
expect(getMarginAttr(stickyTopEl)).toEqual(null, 'data-bs-margin-right should be cleared after closing')
expect(getMarginX(stickyTopEl)).toEqual(originalMargin, 'sticky element margin should be reset after closing')
expect(getPaddingAttr(stickyTopEl)).toEqual(null, 'data-bs-margin-right should be cleared after closing')
expect(getPaddingX(stickyTopEl)).toEqual(originalPadding, 'sticky element margin should be reset after closing')
done()
})
......@@ -169,13 +176,13 @@ describe('ScrollBar', () => {
].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 originalMargin = getMarginX(stickyTopEl)
const originalPadding = getPaddingX(stickyTopEl)
Scrollbar.hide()
const currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
const currentPadding = Number.parseInt(window.getComputedStyle(stickyTopEl).paddingRight, 10)
const currentMargin = getMarginX(stickyTopEl)
const currentPadding = getPaddingX(stickyTopEl)
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')
......@@ -183,7 +190,49 @@ describe('ScrollBar', () => {
Scrollbar.reset()
})
it('should not put data-attribute if element doesn\'t have the proper style property, should just remove style property if element didn\'t had one', () => {
fixtureEl.innerHTML = [
'<div style="height: 110vh; width: 100%">' +
'<div class="sticky-top" id="sticky" style="width: 100vw"></div>',
'</div>'
].join('')
document.body.style.overflowY = 'scroll'
const hasPaddingAttr = el => el.hasAttribute('data-bs-padding-right')
const hasMarginAttr = el => el.hasAttribute('data-bs-margin-right')
const stickyEl = fixtureEl.querySelector('#sticky')
const originalPadding = getPaddingX(stickyEl)
const originalMargin = getMarginX(stickyEl)
const scrollBarWidth = Scrollbar.getWidth()
Scrollbar.hide()
expect(getPaddingX(stickyEl)).toEqual(scrollBarWidth + originalPadding)
const expectedMargin = scrollBarWidth + originalMargin
expect(getMarginX(stickyEl)).toEqual(expectedMargin === 0 ? expectedMargin : -expectedMargin)
expect(hasMarginAttr(stickyEl)).toBeFalse() // We do not have to keep css margin
expect(hasPaddingAttr(stickyEl)).toBeFalse() // We do not have to keep css padding
Scrollbar.reset()
expect(getPaddingX(stickyEl)).toEqual(originalPadding)
expect(getPaddingX(stickyEl)).toEqual(originalPadding)
})
describe('Body Handling', () => {
it('should ignore other inline styles when trying to restore body defaults ', () => {
document.body.style.color = 'red'
const scrollBarWidth = Scrollbar.getWidth()
Scrollbar.hide()
expect(getPaddingX(document.body)).toEqual(scrollBarWidth, 'body does not have inline padding set')
expect(document.body.style.color).toEqual('red', 'body still has other inline styles set')
Scrollbar.reset()
})
it('should hide scrollbar and reset it to its initial value', () => {
const styleSheetPadding = '7px'
fixtureEl.innerHTML = [
......@@ -198,7 +247,7 @@ describe('ScrollBar', () => {
const inlineStylePadding = '10px'
el.style.paddingRight = inlineStylePadding
const originalPadding = getRightPadding(el)
const originalPadding = getPaddingX(el)
expect(originalPadding).toEqual(parseInt(inlineStylePadding)) // Respect only the inline style as it has prevails this of css
const originalOverFlow = 'auto'
el.style.overflow = originalOverFlow
......@@ -206,7 +255,7 @@ describe('ScrollBar', () => {
Scrollbar.hide()
const currentPadding = getRightPadding(el)
const currentPadding = getPaddingX(el)
expect(currentPadding).toEqual(scrollBarWidth + originalPadding)
expect(currentPadding).toEqual(scrollBarWidth + parseInt(inlineStylePadding))
......@@ -216,7 +265,7 @@ describe('ScrollBar', () => {
Scrollbar.reset()
const currentPadding1 = getRightPadding(el)
const currentPadding1 = getPaddingX(el)
expect(currentPadding1).toEqual(originalPadding)
expect(getPaddingAttr(el)).toEqual(null)
expect(getOverFlow(el)).toEqual(originalOverFlow)
......@@ -233,14 +282,14 @@ describe('ScrollBar', () => {
'</style>'
].join('')
const el = document.body
const originalPadding = getRightPadding(el)
const originalPadding = getPaddingX(el)
const originalOverFlow = 'scroll'
el.style.overflow = originalOverFlow
const scrollBarWidth = Scrollbar.getWidth()
Scrollbar.hide()
const currentPadding = getRightPadding(el)
const currentPadding = getPaddingX(el)
expect(currentPadding).toEqual(scrollBarWidth + originalPadding)
expect(currentPadding).toEqual(scrollBarWidth + parseInt(styleSheetPadding))
......@@ -250,12 +299,46 @@ describe('ScrollBar', () => {
Scrollbar.reset()
const currentPadding1 = getRightPadding(el)
const currentPadding1 = getPaddingX(el)
expect(currentPadding1).toEqual(originalPadding)
expect(getPaddingAttr(el)).toEqual(null)
expect(getOverFlow(el)).toEqual(originalOverFlow)
expect(getOverFlowAttr(el)).toEqual(null)
})
it('should not adjust the inline body padding when it does not overflow', () => {
const originalPadding = getPaddingX(document.body)
// Hide scrollbars to prevent the body overflowing
doc.style.overflowY = 'hidden'
doc.style.paddingRight = '0px'
Scrollbar.hide()
const currentPadding = getPaddingX(document.body)
expect(currentPadding).toEqual(originalPadding, 'body padding should not be adjusted')
Scrollbar.reset()
})
it('should not adjust the inline body padding when it does not overflow, even on a scaled display', () => {
const originalPadding = getPaddingX(document.body)
// Remove body margins as would be done by Bootstrap css
document.body.style.margin = '0'
// Hide scrollbars to prevent the body overflowing
doc.style.overflowY = 'hidden'
// Simulate a discrepancy between exact, i.e. floating point body width, and rounded body width
// as it can occur when zooming or scaling the display to something else than 100%
doc.style.paddingRight = '.48px'
Scrollbar.hide()
const currentPadding = getPaddingX(document.body)
expect(currentPadding).toEqual(originalPadding, 'body padding should not be adjusted')
Scrollbar.reset()
})
})
})
})
scss/_variables.scss
+ 1
- 1
View file @ 86897d70
......@@ -1157,7 +1157,7 @@ $form-feedback-tooltip-font-size: $tooltip-font-size !default;
$form-feedback-tooltip-line-height: null !default;
$form-feedback-tooltip-opacity: $tooltip-opacity !default;
$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
// scss-docs-start tooltip-feedback-variables
// scss-docs-end tooltip-feedback-variables
// Popovers
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment