fix: adjust color algorithm for inline elements

Elements spanning multiple lines now pass coordinates from their first box/rectangle to document.elementsFromPoint for gathering an element stack.

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;

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 = '<div style="position:relative;"><div style="background-color:rgba(0,0,0,1);position:absolute;width:300px;height:200px;"></div>' +
+		'<p>Text oh heyyyy <a href="#" id="target">and here\'s <br>a link</a></p></div>';
+		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 = '<p>Text oh heyyyy <b id="target">and here\'s bold text</b></p>';
 		var target = fixture.querySelector('#target');