@@ -121,12 +178,12 @@ describe('create-grid', function () {
createGrid();
childElms.forEach((child, index) => {
assert.isDefined(child._grid, `Expect child ${index} to be defined`);
- var position = findPositions(child._grid, child);
+ const position = findPositions(child._grid, child);
assert.deepEqual(position, [{ col: 0, row: index - gridScroll }]);
});
});
- it('adds elements horizontally scrolled out of view', function () {
+ it('adds elements horizontally scrolled out of view', () => {
const gridScroll = 2;
fixture =
fixtureSetup(`
@@ -147,60 +204,60 @@ describe('create-grid', function () {
createGrid();
childElms.forEach((child, index) => {
assert.isDefined(child._grid, `Expect child ${index} to be defined`);
- var position = findPositions(child._grid, child);
+ const position = findPositions(child._grid, child);
assert.deepEqual(position, [{ col: index - gridScroll, row: 0 }]);
});
});
});
- describe('subGrids', function () {
- it('sets the .subGrid property', function () {
+ describe('subGrids', () => {
+ it('sets the .subGrid property', () => {
fixture = fixtureSetup(
'
' +
'x' +
'
'
);
- var vOverflow = fixture.children[0];
+ const vOverflow = fixture.children[0];
assert.isUndefined(vOverflow._subGrid);
createGrid();
assert.isDefined(vOverflow._subGrid);
assert.notEqual(vOverflow._grid, vOverflow._subGrid);
});
- it('sets the ._grid of children as the subGrid', function () {
+ it('sets the ._grid of children as the subGrid', () => {
fixture = fixtureSetup(
'
' +
'x' +
'
'
);
createGrid();
- var vOverflow = fixture.children[0];
- var vSpan = vOverflow.children[0];
+ const vOverflow = fixture.children[0];
+ const vSpan = vOverflow.children[0];
assert.equal(vOverflow._subGrid, vSpan._grid);
});
- it('does not add scrollable children to the root grid', function () {
+ it('does not add scrollable children to the root grid', () => {
fixture = fixtureSetup(
'
' +
'x' +
'
'
);
createGrid();
- var vSpan = fixture.children[0].children[0];
- var position = findPositions(fixture._grid, vSpan);
+ const vSpan = fixture.children[0].children[0];
+ const position = findPositions(fixture._grid, vSpan);
assert.isEmpty(position);
});
- it('adds scrollable children to the subGrid', function () {
+ it('adds scrollable children to the subGrid', () => {
fixture = fixtureSetup(
'
' +
'x' +
'
'
);
createGrid();
- var vOverflow = fixture.children[0];
- var vSpan = vOverflow.children[0];
- var position = findPositions(vOverflow._subGrid, vSpan);
+ const vOverflow = fixture.children[0];
+ const vSpan = vOverflow.children[0];
+ const position = findPositions(vOverflow._subGrid, vSpan);
assert.deepEqual(position, [
{ col: 0, row: 0 },
{ col: 0, row: 1 }
diff --git a/test/commons/dom/get-element-stack.js b/test/commons/dom/get-element-stack.js
index df466da016..3b045f7874 100644
--- a/test/commons/dom/get-element-stack.js
+++ b/test/commons/dom/get-element-stack.js
@@ -465,6 +465,28 @@ describe('dom.getElementStack', () => {
assert.deepEqual(stack, []);
});
+ it('should correctly position children of different stacking contexts', () => {
+ fixture.innerHTML = `
+
+ `;
+
+ axe.testUtils.flatTreeSetup(fixture);
+ const target = fixture.querySelector('#target');
+ const stack = mapToIDs(getElementStack(target));
+ assert.deepEqual(stack, ['target', '6', '5', '4', '3', '2', '1']);
+ });
+
it('should throw error if element midpoint-x exceeds the grid', () => {
fixture.innerHTML = '
Hello World
';
axe.testUtils.flatTreeSetup(fixture);
diff --git a/test/commons/dom/visually-sort.js b/test/commons/dom/visually-sort.js
index 1b943d30f4..897f614215 100644
--- a/test/commons/dom/visually-sort.js
+++ b/test/commons/dom/visually-sort.js
@@ -1,21 +1,108 @@
// This method is mostly tested through color-contrast integrations
-describe('visually-sort', function () {
+describe('visually-sort', () => {
'use strict';
- var fixtureSetup = axe.testUtils.fixtureSetup;
- var visuallySort = axe.commons.dom.visuallySort;
+ const fixture = document.querySelector('#fixture');
+ const visuallySort = axe.commons.dom.visuallySort;
+ const querySelectorAll = axe.utils.querySelectorAll;
+ let root;
- it('returns 1 if B overlaps A', function () {
- var rootNode = fixtureSetup('
bar');
- var vNodeA = rootNode.children[0];
- var vNodeB = vNodeA.children[0];
- assert.equal(visuallySort(vNodeA, vNodeB), 1);
+ beforeEach(() => {
+ fixture.innerHTML = `
+
+
+
+
+
Text
+
Text
+
Text
+
Text
+
+
+
+
+ `;
+ const shadowRoot = fixture
+ .querySelector('#shadow-host')
+ .attachShadow({ mode: 'open' });
+ shadowRoot.innerHTML = '
Text
';
+ root = axe.setup(fixture);
});
- it('returns -1 if A overlaps B', function () {
- var rootNode = fixtureSetup('
bar');
- var vNodeB = rootNode.children[0];
- var vNodeA = vNodeB.children[0];
- assert.equal(visuallySort(vNodeA, vNodeB), -1);
+ /*
+ Array.sort() return meanings:
+
+ compareFn(a, b) | return value sort order
+ ----------------|-----------------------
+ > 0 | sort a after b, e.g. [b, a]
+ < 0 | sort a before b, e.g. [a, b]
+ === 0 | keep original order of a and b
+ */
+
+ it('sorts a higher stack before a lower stack', () => {
+ const vNodeA = querySelectorAll(root, '#1')[0];
+ const vNodeB = querySelectorAll(root, '#4')[0];
+
+ assert.isBelow(visuallySort(vNodeA, vNodeB), 0);
+ });
+
+ it('sorts a lower stack after a higher stack', () => {
+ const vNodeA = querySelectorAll(root, '#4')[0];
+ const vNodeB = querySelectorAll(root, '#1')[0];
+
+ assert.isAbove(visuallySort(vNodeA, vNodeB), 0);
+ });
+
+ it('sorts a child stack before a parent stack', () => {
+ const vNodeA = querySelectorAll(root, '#6')[0];
+ const vNodeB = querySelectorAll(root, '#4')[0];
+
+ assert.isBelow(visuallySort(vNodeA, vNodeB), 0);
+ });
+
+ it('sorts a parent stack after a child stack', () => {
+ const vNodeA = querySelectorAll(root, '#4')[0];
+ const vNodeB = querySelectorAll(root, '#6')[0];
+
+ assert.isAbove(visuallySort(vNodeA, vNodeB), 0);
+ });
+
+ it('sorts a child of a higher stack before a child of a lower stack', () => {
+ const vNodeA = querySelectorAll(root, '#3')[0];
+ const vNodeB = querySelectorAll(root, '#7')[0];
+
+ assert.isBelow(visuallySort(vNodeA, vNodeB), 0);
+ });
+
+ it('sorts a child of a lower stack after a child of a higher stack', () => {
+ const vNodeA = querySelectorAll(root, '#7')[0];
+ const vNodeB = querySelectorAll(root, '#3')[0];
+
+ assert.isAbove(visuallySort(vNodeA, vNodeB), 0);
+ });
+
+ it('sorts elements by tree order when in the same stack', () => {
+ const vNodeA = querySelectorAll(root, '#8')[0];
+ const vNodeB = querySelectorAll(root, '#10')[0];
+
+ assert.isAbove(visuallySort(vNodeA, vNodeB), 0);
+ });
+
+ it('sorts floated elements before other elements of the same stack', () => {
+ const vNodeA = querySelectorAll(root, '#7')[0];
+ const vNodeB = querySelectorAll(root, '#8')[0];
+
+ assert.isBelow(visuallySort(vNodeA, vNodeB), 0);
+ });
+
+ it('sorts shadow DOM elements by tree order when in the same stack', () => {
+ const vNodeA = querySelectorAll(root, '#8')[0];
+ const vNodeB = querySelectorAll(root, '#shadow-host')[0].children[0];
+
+ assert.isAbove(visuallySort(vNodeA, vNodeB), 0);
});
});