From f4551bb0254cd216d211d0b654f2d720e3c13e63 Mon Sep 17 00:00:00 2001
From: Wilco Fiers <wilco.fiers@deque.com>
Date: Thu, 29 Jun 2017 16:28:21 +0200
Subject: [PATCH] fix: Minimise scrolling in getBackgroundColor

---
 lib/commons/color/get-background-color.js  |  5 +++-
 test/commons/color/get-background-color.js | 27 ++++++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/lib/commons/color/get-background-color.js b/lib/commons/color/get-background-color.js
index 1896909538..2d35d95eea 100644
--- a/lib/commons/color/get-background-color.js
+++ b/lib/commons/color/get-background-color.js
@@ -211,7 +211,10 @@ color.getBackgroundStack = function(elm) {
 
 color.getBackgroundColor = function(elm, bgElms = [], noScroll = false) {
 	if(noScroll !== true) {
-		elm.scrollIntoView();
+		// 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;
+		elm.scrollIntoView(alignToTop);
 	}
 	let bgColors = [];
 	let elmStack = color.getBackgroundStack(elm);
diff --git a/test/commons/color/get-background-color.js b/test/commons/color/get-background-color.js
index dd542e974d..8a62a0264f 100644
--- a/test/commons/color/get-background-color.js
+++ b/test/commons/color/get-background-color.js
@@ -498,4 +498,31 @@ describe('color.getBackgroundColor', function () {
 		assert.closeTo(actual.alpha, expected.alpha, 0.1);
 
 	});
+
+	it('avoids scrolling elements with overflow:hidden', function () {
+		fixture.innerHTML =
+			'<div style="position:relative; color: yellow">' +
+			  '<div style="overflow: hidden">' +
+			    '<div style="background: black; height: 40px; padding-top: 20px;">' +
+			      '<div id="tgt1">Some text here</div>' +
+			      '<div style="height: 100px;"></div>' +
+			    '</div>' +
+			  '</div>' +
+			  '<div style="position: absolute; margin-top: -20px;" id="tgt2">R_20</div>' +
+			'</div>';
+
+		// This shouldn't cause a scroll
+		var target1 = document.getElementById('tgt1');
+		axe.commons.color.getBackgroundColor(target1, []);
+
+		// Otherwise this would not be on the black bg anymore:
+		var target2 = document.getElementById('tgt2');
+		var actual = axe.commons.color.getBackgroundColor(target2, []);
+
+		assert.closeTo(actual.red, 0, 0.5);
+		assert.closeTo(actual.green, 0, 0.5);
+		assert.closeTo(actual.blue, 0, 0.5);
+		assert.closeTo(actual.alpha, 1, 0.1);
+	});
+
 });