fix(get-background-color): No longer calculate color from non-opaque …

…overlapping element (#1644) fix(get-background-color): No longer calculate color from non-opaque overlapping element
dequelabs · Jun 20, 2019 · d45f81e · d45f81e
2 parents 6183405 + f1c2310
commit d45f81e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 15 deletions.
diff --git a/lib/commons/color/get-background-color.js b/lib/commons/color/get-background-color.js
@@ -92,7 +92,7 @@ color.getBackgroundStack = function getBackgroundStack(elm) {
 
 	// Return all elements BELOW the current element, null if the element is undefined
 	let elmIndex = elmStack.indexOf(elm);
-	if (calculateObscuringAlpha(elmIndex, elmStack, elm) >= 0.99) {
+	if (calculateObscuringElement(elmIndex, elmStack, elm)) {
 		// if the total of the elements above our element results in total obscuring, return null
 		axe.commons.color.incompleteData.set('bgColor', 'bgOverlap');
 		return null;
@@ -330,24 +330,21 @@ function elmPartiallyObscured(elm, bgElm, bgColor) {
  * @param {Element} originalElm
  * @return {Number|undefined}
  */
-function calculateObscuringAlpha(elmIndex, elmStack, originalElm) {
-	var totalAlpha = 0;
-
+function calculateObscuringElement(elmIndex, elmStack, originalElm) {
 	if (elmIndex > 0) {
 		// there are elements above our element, check if they contribute to the background
 		for (var i = elmIndex - 1; i >= 0; i--) {
 			let bgElm = elmStack[i];
-			let bgElmStyle = window.getComputedStyle(bgElm);
-			let bgColor = color.getOwnBackgroundColor(bgElmStyle);
-			if (bgColor.alpha && contentOverlapping(originalElm, bgElm)) {
-				totalAlpha += bgColor.alpha;
+			if (contentOverlapping(originalElm, bgElm)) {
+				return true;
 			} else {
 				// remove elements not contributing to the background
 				elmStack.splice(i, 1);
 			}
 		}
 	}
-	return totalAlpha;
+
+	return false;
 }
 
 /**

diff --git a/test/commons/color/get-background-color.js b/test/commons/color/get-background-color.js
@@ -179,7 +179,7 @@ describe('color.getBackgroundColor', function() {
 		assert.equal(axe.commons.color.incompleteData.get('bgColor'), 'bgImage');
 	});
 
-	it('should return null if something opaque is obscuring it', function() {
+	it('should return null if something non-opaque is obscuring it', function() {
 		fixture.innerHTML =
 			'<div style="width:100%; height: 100px; background: #000"></div>' +
 			'<div id="target" style="position: relative; top: -50px; z-index:-1;color:#fff;">Hello</div>';
@@ -192,7 +192,7 @@ describe('color.getBackgroundColor', function() {
 		assert.isNull(actual);
 	});
 
-	it('should return an actual if something non-opaque is obscuring it', function() {
+	it('should return an actual if something opaque is obscuring it', function() {
 		fixture.innerHTML =
 			'<div style="width:100%; height: 100px; background: rgba(0, 0, 0, 0.5)"></div>' +
 			'<div id="target" style="position: relative; top: -50px; z-index:-1;color:#fff;">Hello</div>';
@@ -201,10 +201,8 @@ describe('color.getBackgroundColor', function() {
 			document.getElementById('target'),
 			[]
 		);
-		assert.isNotNull(actual);
-		assert.equal(Math.round(actual.blue), 128);
-		assert.equal(Math.round(actual.red), 128);
-		assert.equal(Math.round(actual.green), 128);
+		assert.equal(axe.commons.color.incompleteData.get('bgColor'), 'bgOverlap');
+		assert.isNull(actual);
 	});
 
 	it('should return the bgcolor if it is solid', function() {