From ff289127e62daf9b7c2d0e842a2131ef24a4d83c Mon Sep 17 00:00:00 2001 From: Steven Lambert Date: Mon, 14 Oct 2019 10:11:21 -0600 Subject: [PATCH 1/3] fix(get-background-color): scroll element into view horizontally --- lib/commons/color/get-background-color.js | 42 ++++++++++++++++++++++ test/commons/color/get-background-color.js | 13 +++++++ 2 files changed, 55 insertions(+) diff --git a/lib/commons/color/get-background-color.js b/lib/commons/color/get-background-color.js index f0ebdf2653..1970a896ba 100644 --- a/lib/commons/color/get-background-color.js +++ b/lib/commons/color/get-background-color.js @@ -25,6 +25,18 @@ color.getBackgroundColor = function getBackgroundColor( const clientHeight = elm.getBoundingClientRect().height; const alignToTop = clientHeight - 2 >= window.innerHeight * 2; elm.scrollIntoView(alignToTop); + + // ensure element is scrolled into view horizontally + let center; + do { + const rect = elm.getBoundingClientRect(); + const x = 'x' in rect ? rect.x : rect.left; + center = x + rect.width / 2; + + if (center < 0) { + getScrollParent(elm).scrollLeft = 0; + } + } while (center < 0); } let bgColors = []; @@ -378,6 +390,36 @@ function contentOverlapping(targetElement, bgNode) { return false; } +/** + * Return the scrolling parent element + * @see https://stackoverflow.com/questions/35939886/find-first-scrollable-parent#42543908 + * @param {Element} element + * @param {Boolean} includeHidden + * @return {Element} + */ +function getScrollParent(element, includeHidden) { + var style = getComputedStyle(element); + var excludeStaticParent = style.position === 'absolute'; + var overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/; + + if (style.position === 'fixed') { + return document.documentElement; + } + for (var parent = element; (parent = parent.parentElement); ) { + style = getComputedStyle(parent); + if (excludeStaticParent && style.position === 'static') { + continue; + } + if ( + overflowRegex.test(style.overflow + style.overflowY + style.overflowX) + ) { + return parent; + } + } + + return document.documentElement; +} + /** * Determines whether an element has a fully opaque background, whether solid color or an image * @param {Element} node diff --git a/test/commons/color/get-background-color.js b/test/commons/color/get-background-color.js index 13d03a869c..e18327b8a1 100644 --- a/test/commons/color/get-background-color.js +++ b/test/commons/color/get-background-color.js @@ -646,6 +646,19 @@ describe('color.getBackgroundColor', function() { assert.notEqual(window.pageYOffset, 0); }); + it('scrolls horizontally into view when scroll is enabled', function() { + fixture.innerHTML = + '
long text to test scrolling
'; + var targetEl = fixture.querySelector('#target'); + var bgNodes = []; + window.scroll(100, 0); + + axe.testUtils.flatTreeSetup(fixture.firstChild); + axe.commons.color.getBackgroundColor(targetEl, bgNodes, false); + + assert.equal(document.documentElement.scrollLeft, 0); + }); + it('returns elements with negative z-index', function() { fixture.innerHTML = '
Date: Mon, 14 Oct 2019 10:16:59 -0600 Subject: [PATCH 2/3] prevent infinite loop --- lib/commons/color/get-background-color.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/lib/commons/color/get-background-color.js b/lib/commons/color/get-background-color.js index 1970a896ba..e374b0ad9d 100644 --- a/lib/commons/color/get-background-color.js +++ b/lib/commons/color/get-background-color.js @@ -27,16 +27,17 @@ color.getBackgroundColor = function getBackgroundColor( elm.scrollIntoView(alignToTop); // ensure element is scrolled into view horizontally - let center; + let center, scrollParent; do { const rect = elm.getBoundingClientRect(); const x = 'x' in rect ? rect.x : rect.left; center = x + rect.width / 2; if (center < 0) { - getScrollParent(elm).scrollLeft = 0; + scrollParent = getScrollParent(elm); + scrollParent.scrollLeft = 0; } - } while (center < 0); + } while (center < 0 && scrollParent !== document.documentElement); } let bgColors = []; From a939bf8970b24511cce6158d3f73cb1897f7b2bb Mon Sep 17 00:00:00 2001 From: Steven Lambert Date: Mon, 14 Oct 2019 10:17:58 -0600 Subject: [PATCH 3/3] comment --- lib/commons/color/get-background-color.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/commons/color/get-background-color.js b/lib/commons/color/get-background-color.js index e374b0ad9d..ac93dd301d 100644 --- a/lib/commons/color/get-background-color.js +++ b/lib/commons/color/get-background-color.js @@ -30,6 +30,8 @@ color.getBackgroundColor = function getBackgroundColor( let center, scrollParent; do { const rect = elm.getBoundingClientRect(); + + // 'x' does not exist in IE11 const x = 'x' in rect ? rect.x : rect.left; center = x + rect.width / 2;