Colour contrast checking ignores content being clipped by overflow:hidden

[Shepard]

Product: axe-core and axe Extension

Fiddle for reproducing this: https://jsfiddle.net/Loe7pacx/

Expectation: Limit contrast checking of content that is cut off by overflow:hidden only to the visible part. No issue is reported by axe as this is black text on a white background. The black background of the outer element (body) should not matter.

Actual: Axe reports an issue on the span element. Contrast is checked as if the content visibly extended into an area with a different background colour.

Motivation: This was not reported in previous versions and visually there is no contrast issue for the user.

axe-core version: 4.4.1
extension version: 4.25.3

Browser and Assistive Technology versions
Chrome 100

For Tooling issues:
- Platform:  Windows

[straker]

Thanks for the issue. Confirmed that this is an issue with our stacking algorithm as .wrapper and body are missing from the final stack calculation.

axe.setup()
axe.commons.dom.getElementStack(document.querySelector('span'))
// [span, html]

[Shepard]

The fiddle is a very simplified version of the code where I was experiencing this issue. In my code, the darker background colour is set on the html element and there's some divs inbetween them. I wonder if this would make a difference when fixing this bug?

[straker]

Some more info on this ticket. This isn't limited to overflow, this same issue can be caused by the following DOM:

<div style="background-color: #222; height: 40px; width: 100px"></div>
<div style="margin-top: -40px;">Hello world</div>

Because our code only really looks at the bounding box size of the element, it doesn't pick up the smaller element behind the text contributing to the background color. In this case no issue is reported even though there is one.

[padmavemulapati]

Validated with the latest axe-core develop branch code base, Not seeing any failure results for color-contrast either in violations or in incomplete when overflow:hidden