The following should pass color-contrast but fails:
<body style="background: #00000073">
<div id="1" style="position: fixed; z-index: 50;">
<div id="2" style="position: fixed; background: #280071">
<div id="3" style="position: relative">
<div id="target" style="transform: matrix(1, 0, 0, 1, 0, 0); color: #fff">text</div>
</div>
</div>
</div>
</body>The issue is that the stack is incorrect and it places the target element below the elements 1 and 2 when it should be placed above it. This causes a bug when we call reduceElementsBelowFloating as it sees elements 1 and 2 as being above the target element and removes them from the color contrast check, so we don't get the background color of 2.
The following should pass color-contrast but fails:
The issue is that the stack is incorrect and it places the target element below the elements 1 and 2 when it should be placed above it. This causes a bug when we call
reduceElementsBelowFloatingas it sees elements 1 and 2 as being above the target element and removes them from the color contrast check, so we don't get the background color of 2.