Skip to content

Commit

Permalink
fix(get-background-color): process tbody, thead, and tfoot when getti…
Browse files Browse the repository at this point in the history 
…ng background color (#1653)

* feat(get-background-color): process tbody, thead, and tfoot when getting background color

* uppercase nodenme

* fix other nodeName
  • Loading branch information
@straker @WilcoFiers
straker authored and WilcoFiers committed Jul 22, 2019
1 parent db20002 commit 2023f9f
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 27 deletions.
57 changes: 30 additions & 27 deletions lib/commons/color/get-background-color.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,45 +260,48 @@ function sortPageBackground(elmStack) {
*/
function includeMissingElements(elmStack, elm) {
/*eslint max-depth:["error",7]*/
const nodeName = elm.nodeName.toUpperCase();
const elementMap = {
TD: ['TR', 'TBODY'],
TH: ['TR', 'THEAD'],
TD: ['TR', 'THEAD', 'TBODY', 'TFOOT'],
TH: ['TR', 'THEAD', 'TBODY', 'TFOOT'],
INPUT: ['LABEL']
};
const tagArray = elmStack.map(elm => {
return elm.nodeName;
return elm.nodeName.toUpperCase();
});
let bgNodes = elmStack;
for (let candidate in elementMap) {
// check that TR or LABEL has paired nodeName from elementMap, but don't expect elm to be that candidate
if (tagArray.includes(candidate)) {
for (let candidateIndex in elementMap[candidate]) {
if (candidate.hasOwnProperty(candidateIndex)) {
// look up the tree for a matching candidate
let ancestorMatch = axe.commons.dom.findUp(
elm,
elementMap[candidate][candidateIndex]
for (
let candidateIndex = 0;
candidateIndex < elementMap[candidate].length;
candidateIndex++
) {
// look up the tree for a matching candidate
let ancestorMatch = axe.commons.dom.findUp(
elm,
elementMap[candidate][candidateIndex]
);
if (ancestorMatch && elmStack.indexOf(ancestorMatch) === -1) {
// found an ancestor not in elmStack, and it overlaps
let overlaps = axe.commons.dom.visuallyOverlaps(
elm.getBoundingClientRect(),
ancestorMatch
);
if (ancestorMatch && elmStack.indexOf(ancestorMatch) === -1) {
// found an ancestor not in elmStack, and it overlaps
let overlaps = axe.commons.dom.visuallyOverlaps(
elm.getBoundingClientRect(),
ancestorMatch
);
if (overlaps) {
// if target is in the elementMap, use its position.
bgNodes.splice(tagArray.indexOf(candidate) + 1, 0, ancestorMatch);
}
}
// nodeName matches value
// (such as LABEL, when matching itself. It should be in the list, but Phantom skips it)
if (
elm.nodeName === elementMap[candidate][candidateIndex] &&
tagArray.indexOf(elm.nodeName) === -1
) {
bgNodes.splice(tagArray.indexOf(candidate) + 1, 0, elm);
if (overlaps) {
// if target is in the elementMap, use its position.
bgNodes.splice(tagArray.indexOf(candidate) + 1, 0, ancestorMatch);
}
}
// nodeName matches value
// (such as LABEL, when matching itself. It should be in the list, but Phantom skips it)
if (
nodeName === elementMap[candidate][candidateIndex] &&
tagArray.indexOf(nodeName) === -1
) {
bgNodes.splice(tagArray.indexOf(candidate) + 1, 0, elm);
}
}
}
}
Expand Down
66 changes: 66 additions & 0 deletions test/commons/color/get-background-color.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,6 +358,72 @@ describe('color.getBackgroundColor', function() {
assert.deepEqual(bgNodes, [parent]);
});

it('should count a THEAD as a background element for a child element', function() {
fixture.innerHTML =
'<div style="background-color:#007acc;">' +
'<table style="width:100%">' +
'<thead style="background-color:#f3f3f3; height:40px;" id="parent">' +
'<td>' +
'<span style="color:#007acc" id="target">Cell content</span>' +
'</td></thead>' +
'</table></div>';
var target = fixture.querySelector('#target'),
parent = fixture.querySelector('#parent');
var bgNodes = [];
axe.testUtils.flatTreeSetup(fixture.firstChild);
var actual = axe.commons.color.getBackgroundColor(target, bgNodes);
var expected = new axe.commons.color.Color(243, 243, 243, 1);
assert.equal(actual.red, expected.red);
assert.equal(actual.green, expected.green);
assert.equal(actual.blue, expected.blue);
assert.equal(actual.alpha, expected.alpha);
assert.deepEqual(bgNodes, [parent]);
});

it('should count a TBODY as a background element for a child element', function() {
fixture.innerHTML =
'<div style="background-color:#007acc;">' +
'<table style="width:100%">' +
'<tbody style="background-color:#f3f3f3; height:40px;" id="parent">' +
'<td>' +
'<span style="color:#007acc" id="target">Cell content</span>' +
'</td></tbody>' +
'</table></div>';
var target = fixture.querySelector('#target'),
parent = fixture.querySelector('#parent');
var bgNodes = [];
axe.testUtils.flatTreeSetup(fixture.firstChild);
var actual = axe.commons.color.getBackgroundColor(target, bgNodes);
var expected = new axe.commons.color.Color(243, 243, 243, 1);
assert.equal(actual.red, expected.red);
assert.equal(actual.green, expected.green);
assert.equal(actual.blue, expected.blue);
assert.equal(actual.alpha, expected.alpha);
assert.deepEqual(bgNodes, [parent]);
});

it('should count a TFOOT as a background element for a child element', function() {
fixture.innerHTML =
'<div style="background-color:#007acc;">' +
'<table style="width:100%">' +
'<tfoot style="background-color:#f3f3f3; height:40px;" id="parent">' +
'<td>' +
'<span style="color:#007acc" id="target">Cell content</span>' +
'</td></tfoot>' +
'</table></div>';
var target = fixture.querySelector('#target'),
parent = fixture.querySelector('#parent');
var bgNodes = [];
axe.testUtils.flatTreeSetup(fixture.firstChild);
var actual = axe.commons.color.getBackgroundColor(target, bgNodes);
var expected = new axe.commons.color.Color(243, 243, 243, 1);
assert.equal(actual.red, expected.red);
assert.equal(actual.green, expected.green);
assert.equal(actual.blue, expected.blue);
assert.equal(actual.alpha, expected.alpha);
assert.deepEqual(bgNodes, [parent]);
});

it("should ignore TR elements that don't overlap", function() {
fixture.innerHTML =
'<table style="position:relative; width:100%;">' +
Expand Down

0 comments on commit 2023f9f

Please sign in to comment.