diff options
author | GeoSot <geo.sotis@gmail.com> | 2021-07-20 17:20:43 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-20 17:20:43 +0300 |
commit | 5541179b387ed8a1b5e457aeb47a35e6e7c62d4a (patch) | |
tree | 21cedc64f3ff71b06b029aea72dc46f7eedb9789 | |
parent | 365b9e5af0fac2a3d92e3ad17dbeb8d31a08baf5 (diff) |
Fix `Util.reflow` function and add documentation (#34543)
* add documentation to reflow function
* refactor to void as it should be
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
-rw-r--r-- | js/src/util/index.js | 13 | ||||
-rw-r--r-- | js/tests/unit/util/index.spec.js | 5 |
2 files changed, 15 insertions, 3 deletions
diff --git a/js/src/util/index.js b/js/src/util/index.js index a1af87aa47..f81d64837e 100644 --- a/js/src/util/index.js +++ b/js/src/util/index.js @@ -188,7 +188,18 @@ const findShadowRoot = element => { const noop = () => {} -const reflow = element => element.offsetHeight +/** + * Trick to restart an element's animation + * + * @param {HTMLElement} element + * @return void + * + * @see https://www.charistheo.io/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation + */ +const reflow = element => { + // eslint-disable-next-line no-unused-expressions + element.offsetHeight +} const getjQuery = () => { const { jQuery } = window diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js index 9b5d7b70e2..38e94dc6bb 100644 --- a/js/tests/unit/util/index.spec.js +++ b/js/tests/unit/util/index.spec.js @@ -543,8 +543,9 @@ describe('Util', () => { fixtureEl.innerHTML = '<div></div>' const div = fixtureEl.querySelector('div') - - expect(Util.reflow(div)).toEqual(0) + const spy = spyOnProperty(div, 'offsetHeight') + Util.reflow(div) + expect(spy).toHaveBeenCalled() }) }) |