diff --git a/lib/commons/color/get-background-color.js b/lib/commons/color/get-background-color.js index a472328db5..491d80d5ff 100644 --- a/lib/commons/color/get-background-color.js +++ b/lib/commons/color/get-background-color.js @@ -121,9 +121,6 @@ function elmPartiallyObscured(elm, bgElm, bgColor) { * @param {Element} elm */ function includeMissingElements(elmStack, elm) { - if (!elmStack.includes(elm)) { - elmStack.unshift(elm); - } const elementMap = {'TD': ['TR', 'TBODY'], 'TH': ['TR', 'THEAD'], 'INPUT': ['LABEL']}; const tagArray = elmStack.map((elm) => { return elm.tagName; @@ -191,7 +188,9 @@ function sortPageBackground(elmStack) { * @return {Array} */ color.getBackgroundStack = function(elm) { - let rect = elm.getBoundingClientRect(); + // allows inline elements spanning multiple lines to be evaluated + let multipleRects = elm.getClientRects(); + let rect = multipleRects.length > 1 ? multipleRects[0] : elm.getBoundingClientRect(); let x, y; if (rect.left > window.innerWidth) { return; diff --git a/test/checks/color/color-contrast.js b/test/checks/color/color-contrast.js index 138bf7e6c0..f1ff664a9d 100644 --- a/test/checks/color/color-contrast.js +++ b/test/checks/color/color-contrast.js @@ -102,6 +102,14 @@ describe('color-contrast', function () { assert.deepEqual(checkContext._relatedNodes, []); }); + it('should return undefined for inline elements spanning multiple lines that are overlapped', function () { + fixture.innerHTML = '
' + + '

Text oh heyyyy and here\'s
a link

'; + var target = fixture.querySelector('#target'); + assert.isUndefined(checks['color-contrast'].evaluate.call(checkContext, target)); + assert.deepEqual(checkContext._relatedNodes, []); + }); + it('should return true for inline elements with sufficient contrast', function () { fixture.innerHTML = '

Text oh heyyyy and here\'s bold text

'; var target = fixture.querySelector('#target');