Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(get-background-color): No longer calculate color from non-opaque overlapping element #1644

Merged
merged 1 commit into from
Jun 20, 2019
Merged

fix(get-background-color): No longer calculate color from non-opaque overlapping element #1644

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 6 additions & 9 deletions lib/commons/color/get-background-color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}

/**
Expand Down
10 changes: 4 additions & 6 deletions test/commons/color/get-background-color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>';
Expand All @@ -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>';
Expand All @@ -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() {
Expand Down