fix(color-contrast): Prevent crash on large inline elments #1306 (#1341)

Author: WilcoFiers

lib/commons/color/get-background-color.js

@@ -231,33 +231,42 @@ color.getCoords = function(rect) {
  */
 color.getRectStack = function(elm) {
 	let boundingCoords = color.getCoords(elm.getBoundingClientRect());
-	if (boundingCoords) {
-		let boundingStack = dom.shadowElementsFromPoint(
-			boundingCoords.x,
-			boundingCoords.y
-		);
-		// allows inline elements spanning multiple lines to be evaluated
-		let rects = Array.from(elm.getClientRects());
-		if (rects && rects.length > 1) {
-			let filteredArr = rects
-				.filter(rect => {
-					// exclude manual line breaks in Chrome/Safari
-					return rect.width && rect.width > 0;
-				})
-				.map(rect => {
-					let coords = color.getCoords(rect);
-					if (coords) {
-						return dom.shadowElementsFromPoint(coords.x, coords.y);
-					}
-				});
-			// add bounding client rect stack for comparison later
-			filteredArr.splice(0, 0, boundingStack);
-			return filteredArr;
-		} else {
-			return [boundingStack];
-		}
+	if (!boundingCoords) {
+		return null;
 	}
-	return null;
+
+	let boundingStack = dom.shadowElementsFromPoint(
+		boundingCoords.x,
+		boundingCoords.y
+	);
+
+	let rects = Array.from(elm.getClientRects());
+	// If the element does not have multiple rects, like for display:block, return a single stack
+	if (!rects || rects.length <= 1) {
+		return [boundingStack];
+	}
+
+	// Handle inline elements spanning multiple lines to be evaluated
+	let filteredArr = rects
+		.filter(rect => {
+			// exclude manual line breaks in Chrome/Safari
+			return rect.width && rect.width > 0;
+		})
+		.map(rect => {
+			let coords = color.getCoords(rect);
+			if (coords) {
+				return dom.shadowElementsFromPoint(coords.x, coords.y);
+			}
+		});
+
+	if (filteredArr.some(stack => stack === undefined)) {
+		// Can be happen when one or more of the rects sits outside the viewport
+		return null;
+	}
+
+	// add bounding client rect stack for comparison later
+	filteredArr.splice(0, 0, boundingStack);
+	return filteredArr;
 };
 /**
  * Get filtered stack of block and inline elements, excluding line breaks
@@ -284,14 +293,6 @@ color.filteredRectStack = function(elm) {
 			let rectA = rectStack[index - 1],
 				rectB = rectStack[index];
 
-			// If either rect are undefined, we cannot complete the test. We exit
-			// early to avoid unhelpful errors.
-			// See https://github.com/dequelabs/axe-core/issues/1306.
-			if (rectA === undefined || rectB === undefined) {
-				isSame = false;
-				return;
-			}
-
 			// if elements in clientRects are the same
 			// or the boundingClientRect contains the differing element, pass it
 			isSame =
@@ -351,7 +352,8 @@ color.getBackgroundColor = function(elm, bgElms = [], noScroll = false) {
 	if (noScroll !== true) {
 		// Avoid scrolling overflow:hidden containers, by only aligning to top
 		// when not doing so would move the center point above the viewport top.
-		const alignToTop = elm.clientHeight - 2 >= window.innerHeight * 2;
+		const clientHeight = elm.getBoundingClientRect().height;
+		const alignToTop = clientHeight - 2 >= window.innerHeight * 2;
 		elm.scrollIntoView(alignToTop);
 	}
 	let bgColors = [];

test/commons/color/get-background-color.js

@@ -710,6 +710,21 @@ describe('color.getBackgroundColor', function() {
 		assert.closeTo(actual.alpha, 1, 0.1);
 	});
 
+	it('does returns null for inline elements that do not fit the viewport', function() {
+		var html = '';
+		for (var i = 0; i < 1000; i++) {
+			html += 'foo<br />';
+		}
+		fixture.innerHTML = '<em>' + html + '</em>';
+		axe._tree = axe.utils.getFlattenedTree(fixture.firstChild);
+		var outcome = axe.commons.color.getBackgroundColor(fixture.firstChild, []);
+		assert.isNull(outcome);
+		assert.equal(
+			axe.commons.color.incompleteData.get('bgColor'),
+			'outsideViewport'
+		);
+	});
+
 	it('should return the body bgColor when content does not overlap', function() {
 		fixture.innerHTML =
 			'<div style="height: 20px; width: 30px; background-color: red;">' +