fix(get-element-stack): properly calculate position of children of fl…

…oated elements
dequelabs · May 22, 2020 · 28a8c58 · 28a8c58
1 parent ffa6669
commit 28a8c58
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git a/lib/commons/dom/get-element-stack.js b/lib/commons/dom/get-element-stack.js
@@ -141,6 +141,32 @@ function isStackingContext(vNode, parentVNode) {
 	return false;
 }
 
+/**
+ * Check if a node or one of it's parents is floated.
+ * Floating position should be inherited from the parent tree
+ * @see https://github.com/dequelabs/axe-core/issues/2222
+ */
+function isFloated(vNode) {
+	if (!vNode) {
+		return false;
+	}
+
+	if (vNode._isFloated !== undefined) {
+		return vNode._isFloated;
+	}
+
+	const floatStyle = vNode.getComputedStylePropertyValue('float');
+
+	if (floatStyle !== 'none') {
+		vNode._isFloated = true;
+		return true;
+	}
+
+	const floated = isFloated(vNode.parent);
+	vNode._isFloated = floated;
+	return floated;
+}
+
 /**
  * Return the index order of how to position this element. return nodes in non-positioned, floating, positioned order
  * References:
@@ -160,7 +186,7 @@ function getPositionOrder(vNode) {
 		}
 
 		// 4. the non-positioned floats.
-		if (vNode.getComputedStylePropertyValue('float') !== 'none') {
+		if (isFloated(vNode)) {
 			return 1;
 		}
 

diff --git a/test/commons/dom/get-element-stack.js b/test/commons/dom/get-element-stack.js
@@ -85,6 +85,21 @@ describe('dom.getElementStack', function() {
 			assert.deepEqual(stack, ['4', '1', '2', 'target', 'fixture']);
 		});
 
+		it('should handle floating parent elements', function() {
+			fixture.innerHTML =
+				'<div id="1" style="float: left; background: #000000; color: #fff;">' +
+				'<div id="2"><span id="target">whole picture</span></div>' +
+				'</div>' +
+				'<div id="3">' +
+				'<div id="4" style="background: #f2f2f2;">English</div>' +
+				'</div>';
+
+			axe.testUtils.flatTreeSetup(fixture);
+			var target = fixture.querySelector('#target');
+			var stack = mapToIDs(getElementStack(target));
+			assert.deepEqual(stack, ['target', '2', '1', '4', '3', 'fixture']);
+		});
+
 		it('should handle z-index positioned elements in the same stacking context', function() {
 			// see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
 			fixture.innerHTML =