refactor: commons.color.getBackgroundColor method (#1451)

lib/commons/color/center-point-of-rect.js

@@ -0,0 +1,30 @@
+/* global color */
+
+/**
+ * Get coordinates for an element's client rects or bounding client rect
+ *
+ * @method centerPointOfRect
+ * @memberof axe.commons.color
+ * @param {DOMRect} rect
+ * @returns {Object | undefined}
+ */
+color.centerPointOfRect = function centerPointOfRect(rect) {
+	if (rect.left > window.innerWidth) {
+		return undefined;
+	}
+
+	if (rect.top > window.innerHeight) {
+		return undefined;
+	}
+
+	const x = Math.min(
+		Math.ceil(rect.left + rect.width / 2),
+		window.innerWidth - 1
+	);
+	const y = Math.min(
+		Math.ceil(rect.top + rect.height / 2),
+		window.innerHeight - 1
+	);
+
+	return { x, y };
+};

lib/commons/color/element-has-image.js

@@ -0,0 +1,36 @@
+/* global color */
+
+/**
+ * Reports if an element has a background image or gradient
+ *
+ * @method elementHasImage
+ * @memberof axe.commons.color
+ * @private
+ * @param {Element} elm
+ * @param {Object|null} style
+ * @return {Boolean}
+ */
+color.elementHasImage = function elementHasImage(elm, style) {
+	const graphicNodes = ['IMG', 'CANVAS', 'OBJECT', 'IFRAME', 'VIDEO', 'SVG'];
+	const nodeName = elm.nodeName.toUpperCase();
+
+	if (graphicNodes.includes(nodeName)) {
+		axe.commons.color.incompleteData.set('bgColor', 'imgNode');
+		return true;
+	}
+
+	style = style || window.getComputedStyle(elm);
+
+	const bgImageStyle = style.getPropertyValue('background-image');
+	const hasBgImage = bgImageStyle !== 'none';
+
+	if (hasBgImage) {
+		const hasGradient = /gradient/.test(bgImageStyle);
+		axe.commons.color.incompleteData.set(
+			'bgColor',
+			hasGradient ? 'bgGradient' : 'bgImage'
+		);
+	}
+
+	return hasBgImage;
+};