Offscreen?
' +
@@ -90,7 +90,7 @@ describe('dom.isOffscreen', function() {
assert.isTrue(axe.commons.dom.isOffscreen(el));
});
- it('should NOT detect elements positioned outside the right edge on LTR documents', function() {
+ it('should NOT detect elements positioned outside the right edge on LTR documents', function () {
fixture.innerHTML =
'Offscreen?
';
var el = document.getElementById('target');
@@ -98,7 +98,7 @@ describe('dom.isOffscreen', function() {
assert.isFalse(axe.commons.dom.isOffscreen(el));
});
- it('should detect elements positioned outside the right edge on RTL documents', function() {
+ it('should detect elements positioned outside the right edge on RTL documents', function () {
document.body.style.direction = 'rtl';
fixture.innerHTML =
'Offscreen?
';
@@ -107,7 +107,7 @@ describe('dom.isOffscreen', function() {
assert.isTrue(axe.commons.dom.isOffscreen(el));
});
- it('should NOT detect elements positioned outside the left edge on RTL documents', function() {
+ it('should NOT detect elements positioned outside the left edge on RTL documents', function () {
document.body.style.direction = 'rtl';
fixture.innerHTML =
'Offscreen?
';
@@ -116,7 +116,7 @@ describe('dom.isOffscreen', function() {
assert.isFalse(axe.commons.dom.isOffscreen(el));
});
- it('should not detect elements positioned because of a scroll', function() {
+ it('should not detect elements positioned because of a scroll', function () {
fixture.innerHTML =
'' +
'
'
+ );
+ assert.isTrue(isVisibleForScreenreader(vNode));
+ });
+
+ it('should return false if `aria-hidden` is set', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ assert.isFalse(isVisibleForScreenreader(vNode));
+ });
+
+ it('should return false if `display: none` is set', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ assert.isFalse(isVisibleForScreenreader(vNode));
+ });
+
+ it('should return false if `aria-hidden` is set on parent', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ assert.isFalse(isVisibleForScreenreader(vNode));
+ });
+
+ it('should know how `visibility` works', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ assert.isTrue(isVisibleForScreenreader(vNode));
+ });
+
+ it('returns false for `AREA` without closest `MAP` element', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ var actual = isVisibleForScreenreader(vNode);
+ assert.isFalse(actual);
+ });
+
+ it('returns false for `AREA` with closest `MAP` with no name attribute', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ var actual = isVisibleForScreenreader(vNode);
+ assert.isFalse(actual);
+ });
+
+ (shadowSupported ? it : xit)(
+ 'returns false for `AREA` element that is inside shadowDOM',
+ function () {
+ fixture.innerHTML = '';
+ var container = fixture.querySelector('#container');
+ var shadow = container.attachShadow({ mode: 'open' });
+ shadow.innerHTML =
+ '';
+ axe.testUtils.flatTreeSetup(fixture);
+
+ var target = shadow.querySelector('#target');
+ var actual = isVisibleForScreenreader(target);
+ assert.isFalse(actual);
+ }
+ );
+
+ it('returns false for `AREA` with closest `MAP` with name but not referred by an `IMG` usemap attribute', function () {
+ var vNode = queryFixture(
+ '' +
+ '![MDN infographic]()
'
+ );
+ var actual = isVisibleForScreenreader(vNode);
+ assert.isFalse(actual);
+ });
+
+ it('returns false for `AREA` with `MAP` and used in `IMG` which is not visible', function () {
+ var vNode = queryFixture(
+ '' +
+ ''
+ );
+ var actual = isVisibleForScreenreader(vNode);
+ assert.isFalse(actual);
+ });
+
+ it('returns true for `AREA` with `MAP` and used in `IMG` which is visible', function () {
+ var vNode = queryFixture(
+ '' +
+ '![MDN infographic]()
'
+ );
+ var actual = isVisibleForScreenreader(vNode);
+ assert.isTrue(actual);
+ });
+
+ (shadowSupported ? it : xit)(
+ 'not hidden: should work when the element is inside shadow DOM',
+ function () {
+ var tree, node;
+ // shadow DOM v1 - note: v0 is compatible with this code, so no need
+ // to specifically test this
+ fixture.innerHTML = '';
+ makeShadowTreeHidden(fixture.firstChild);
+ tree = axe.utils.getFlattenedTree(fixture.firstChild);
+ node = axe.utils.querySelectorAll(tree, 'input')[0];
+ assert.isTrue(isVisibleForScreenreader(node));
+ }
+ );
+
+ (shadowSupported ? it : xit)(
+ 'hidden: should work when the element is inside shadow DOM',
+ function () {
+ var tree, node;
+ // shadow DOM v1 - note: v0 is compatible with this code, so no need
+ // to specifically test this
+ fixture.innerHTML = '';
+ makeShadowTreeHidden(fixture.firstChild);
+ tree = axe.utils.getFlattenedTree(fixture.firstChild);
+ node = axe.utils.querySelectorAll(tree, 'input')[0];
+ assert.isFalse(isVisibleForScreenreader(node));
+ }
+ );
+
+ (shadowSupported ? it : xit)(
+ 'should work with hidden slotted elements',
+ function () {
+ function createContentSlotted() {
+ var group = document.createElement('div');
+ group.innerHTML =
+ '';
+ return group;
+ }
+ function makeShadowTree(node) {
+ var root = node.attachShadow({ mode: 'open' });
+ var div = document.createElement('div');
+ root.appendChild(div);
+ div.appendChild(createContentSlotted());
+ }
+ fixture.innerHTML = '';
+ makeShadowTree(fixture.firstChild);
+ var tree = axe.utils.getFlattenedTree(fixture.firstChild);
+ var vNode = axe.utils.querySelectorAll(tree, 'a')[0];
+ assert.isFalse(isVisibleForScreenreader(vNode));
+ }
+ );
+
+ describe('SerialVirtualNode', function () {
+ it('should return false if `aria-hidden` is set', function () {
+ var vNode = new axe.SerialVirtualNode({
+ nodeName: 'div',
+ attributes: {
+ 'aria-hidden': true
+ }
+ });
+ assert.isFalse(isVisibleForScreenreader(vNode));
+ });
+
+ it('should return false if `aria-hidden` is set on parent', function () {
+ var vNode = new axe.SerialVirtualNode({
+ nodeName: 'div'
+ });
+ var parentVNode = new axe.SerialVirtualNode({
+ nodeName: 'div',
+ attributes: {
+ 'aria-hidden': true
+ }
+ });
+ parentVNode.children = [vNode];
+ vNode.parent = parentVNode;
+ assert.isFalse(isVisibleForScreenreader(vNode));
+ });
+ });
+});
diff --git a/test/commons/dom/is-visible-on-screen.js b/test/commons/dom/is-visible-on-screen.js
new file mode 100644
index 0000000000..12b3f29ea3
--- /dev/null
+++ b/test/commons/dom/is-visible-on-screen.js
@@ -0,0 +1,434 @@
+describe('dom.isVisibleOnScreen', function () {
+ 'use strict';
+
+ var fixture = document.querySelector('#fixture');
+ var queryFixture = axe.testUtils.queryFixture;
+ var isIE11 = axe.testUtils.isIE11;
+ var shadowSupported = axe.testUtils.shadowSupport.v1;
+ var isVisibleOnScreen = axe.commons.dom.isVisibleOnScreen;
+
+ it('should return true on statically-positioned, visible elements', function () {
+ var vNode = queryFixture('
'
+ );
+ var actual = isVisibleOnScreen(vNode);
+ assert.isFalse(actual);
+ });
+
+ it('should return false on TEMPLATE tag', function () {
+ var vNode = queryFixture(
+ ''
+ );
+
+ assert.isFalse(isVisibleOnScreen(vNode));
+ });
+
+ it('should return false for 0 width scrollable region', function () {
+ var vNode = queryFixture(
+ ''
+ );
+
+ assert.isFalse(isVisibleOnScreen(vNode));
+ });
+
+ it('returns false for `AREA` without closest `MAP` element', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ var actual = isVisibleOnScreen(vNode);
+ assert.isFalse(actual);
+ });
+
+ it('returns false for `AREA` with closest `MAP` with no name attribute', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ var actual = isVisibleOnScreen(vNode);
+ assert.isFalse(actual);
+ });
+
+ (shadowSupported ? it : xit)(
+ 'returns false for `AREA` element that is inside shadowDOM',
+ function () {
+ fixture.innerHTML = '';
+ var container = fixture.querySelector('#container');
+ var shadow = container.attachShadow({ mode: 'open' });
+ shadow.innerHTML =
+ '';
+ axe.testUtils.flatTreeSetup(fixture);
+
+ var target = shadow.querySelector('#target');
+ var actual = isVisibleOnScreen(target);
+ assert.isFalse(actual);
+ }
+ );
+
+ it('returns false for `AREA` with closest `MAP` with name but not referred by an `IMG` usemap attribute', function () {
+ var vNode = queryFixture(
+ '' +
+ '![MDN infographic]()
'
+ );
+ var actual = isVisibleOnScreen(vNode);
+ assert.isFalse(actual);
+ });
+
+ it('returns false for `AREA` with `MAP` and used in `IMG` which is not visible', function () {
+ var vNode = queryFixture(
+ '' +
+ ''
+ );
+ var actual = isVisibleOnScreen(vNode);
+ assert.isFalse(actual);
+ });
+
+ it('returns true for `AREA` with `MAP` and used in `IMG` which is visible', function () {
+ var vNode = queryFixture(
+ '' +
+ '![MDN infographic]()
'
+ );
+ var actual = isVisibleOnScreen(vNode);
+ assert.isTrue(actual);
+ });
+
+ // IE11 either only supports clip paths defined by url() or not at all,
+ // MDN and caniuse.com give different results...
+ (isIE11 ? it.skip : it)(
+ 'should detect clip-path hidden text technique',
+ function () {
+ var vNode = queryFixture(
+ ''
+ );
+ assert.isFalse(displayHidden(vNode));
+ });
+ });
+
+ describe('visibilityHidden', function () {
+ it('should return true for element with "visibility:hidden`', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ assert.isTrue(visibilityHidden(vNode));
+ });
+
+ it('should return true for element with "visibility:collapse`', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ assert.isTrue(visibilityHidden(vNode));
+ });
+
+ it('should return false for element with "visibility:visible`', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ assert.isFalse(visibilityHidden(vNode));
+ });
+
+ it('should return false for element without visibility', function () {
+ var vNode = queryFixture('');
+ assert.isFalse(visibilityHidden(vNode));
+ });
+
+ it('should return false for if passed "isAncestor:true`', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ assert.isFalse(visibilityHidden(vNode, { isAncestor: true }));
+ });
+ });
+
+ describe('ariaHidden', function () {
+ it('should return true for element with "aria-hidden=true`', function () {
+ var vNode = queryFixture('');
+ assert.isTrue(ariaHidden(vNode));
+ });
+
+ it('should return false for element with "aria-hidden=false`', function () {
+ var vNode = queryFixture('');
+ assert.isFalse(ariaHidden(vNode));
+ });
+
+ it('should return false for element without aria-hidden', function () {
+ var vNode = queryFixture('');
+ assert.isFalse(ariaHidden(vNode));
+ });
+ });
+
+ describe('opacityHidden', function () {
+ it('should return true for element with "opacity:0`', function () {
+ var vNode = queryFixture('');
+ assert.isTrue(opacityHidden(vNode));
+ });
+
+ it('should return false for element with "opacity:0.1`', function () {
+ var vNode = queryFixture('');
+ assert.isFalse(opacityHidden(vNode));
+ });
+
+ it('should return false for element without opacity', function () {
+ var vNode = queryFixture('');
+ assert.isFalse(opacityHidden(vNode));
+ });
+ });
+
+ describe('scrollHidden', function () {
+ it('should return true for element with scroll and "width:0`', function () {
+ var vNode = queryFixture(
+ '![]()
'
+ );
+ assert.isTrue(
+ areaHidden(vNode, function () {
+ return false;
+ })
+ );
+ });
+
+ it('should return false if img uses map and is visible', function () {
+ var vNode = queryFixture(
+ '![]()
'
+ );
+ assert.isFalse(
+ areaHidden(vNode, function () {
+ return true;
+ })
+ );
+ });
+ });
+});
diff --git a/test/rule-matches/is-visible-matches.js b/test/rule-matches/is-visible-matches.js
index a08410496c..7dc3a87822 100644
--- a/test/rule-matches/is-visible-matches.js
+++ b/test/rule-matches/is-visible-matches.js
@@ -1,31 +1,32 @@
-describe('is-visible-matches', function() {
+describe('is-visible-matches', function () {
'use strict';
var rule;
var fixture = document.getElementById('fixture');
+ var fixtureSetup = axe.testUtils.fixtureSetup;
- beforeEach(function() {
+ beforeEach(function () {
fixture.innerHTML = '';
rule = axe.utils.getRule('avoid-inline-spacing');
});
- it('returns true for visible elements', function() {
- fixture.innerHTML = '
goobye
' +
@@ -130,9 +130,13 @@ describe('dom.isOffscreen', function() {
assert.isFalse(axe.commons.dom.isOffscreen(viz));
});
+ it('should return undefined if actual ndoe is undefined', function () {
+ assert.isUndefined(axe.commons.dom.isOffscreen());
+ });
+
(shadowSupport.v1 ? it : xit)(
'should detect on screen shadow nodes',
- function() {
+ function () {
fixture.innerHTML = '';
var shadow = fixture.querySelector('div').attachShadow({ mode: 'open' });
shadow.innerHTML = 'Offscreen?
';
@@ -144,7 +148,7 @@ describe('dom.isOffscreen', function() {
(shadowSupport.v1 ? it : xit)(
'should detect off screen shadow nodes',
- function() {
+ function () {
fixture.innerHTML = '';
var shadow = fixture.querySelector('div').attachShadow({ mode: 'open' });
shadow.innerHTML =
diff --git a/test/commons/dom/is-visible-for-screenreader.js b/test/commons/dom/is-visible-for-screenreader.js
new file mode 100644
index 0000000000..9c5e314412
--- /dev/null
+++ b/test/commons/dom/is-visible-for-screenreader.js
@@ -0,0 +1,234 @@
+describe('dom.isVisibleForScreenreader', function () {
+ 'use strict';
+
+ var fixture = document.querySelector('#fixture');
+ var queryFixture = axe.testUtils.queryFixture;
+ var shadowSupported = axe.testUtils.shadowSupport.v1;
+ var isVisibleForScreenreader = axe.commons.dom.isVisibleForScreenreader;
+
+ function createContentHidden() {
+ var group = document.createElement('div');
+ group.innerHTML =
+ '';
+ return group;
+ }
+
+ function makeShadowTreeHidden(node) {
+ var root = node.attachShadow({ mode: 'open' });
+ var div = document.createElement('div');
+ div.className = 'parent';
+ root.appendChild(div);
+ div.appendChild(createContentHidden());
+ }
+
+ it('should return false on detached elements', function () {
+ var el = document.createElement('div');
+ el.innerHTML = 'I am not visible because I am detached!';
+ axe.testUtils.flatTreeSetup(el);
+ assert.isFalse(isVisibleForScreenreader(el));
+ });
+
+ it('should return true on body', function () {
+ axe.testUtils.flatTreeSetup(document.body);
+ var actual = isVisibleForScreenreader(document.body);
+ assert.isTrue(actual);
+ });
+
+ it('should return true on html', function () {
+ axe.testUtils.flatTreeSetup(document.documentElement);
+ var actual = isVisibleForScreenreader(document.documentElement);
+ assert.isTrue(actual);
+ });
+
+ it('should return true for visible element', function () {
+ var vNode = queryFixture('Visible
');
+ assert.isTrue(isVisibleForScreenreader(vNode));
+ });
+
+ it('should return true for visible area element', function () {
+ var vNode = queryFixture(
+ '' +
+ ''
+ );
+ assert.isTrue(isVisibleForScreenreader(vNode));
+ });
+
+ it('should return false if `aria-hidden` is set', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ assert.isFalse(isVisibleForScreenreader(vNode));
+ });
+
+ it('should return false if `display: none` is set', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ assert.isFalse(isVisibleForScreenreader(vNode));
+ });
+
+ it('should return false if `aria-hidden` is set on parent', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ assert.isFalse(isVisibleForScreenreader(vNode));
+ });
+
+ it('should know how `visibility` works', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ assert.isTrue(isVisibleForScreenreader(vNode));
+ });
+
+ it('returns false for `AREA` without closest `MAP` element', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ var actual = isVisibleForScreenreader(vNode);
+ assert.isFalse(actual);
+ });
+
+ it('returns false for `AREA` with closest `MAP` with no name attribute', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ var actual = isVisibleForScreenreader(vNode);
+ assert.isFalse(actual);
+ });
+
+ (shadowSupported ? it : xit)(
+ 'returns false for `AREA` element that is inside shadowDOM',
+ function () {
+ fixture.innerHTML = '';
+ var container = fixture.querySelector('#container');
+ var shadow = container.attachShadow({ mode: 'open' });
+ shadow.innerHTML =
+ '';
+ axe.testUtils.flatTreeSetup(fixture);
+
+ var target = shadow.querySelector('#target');
+ var actual = isVisibleForScreenreader(target);
+ assert.isFalse(actual);
+ }
+ );
+
+ it('returns false for `AREA` with closest `MAP` with name but not referred by an `IMG` usemap attribute', function () {
+ var vNode = queryFixture(
+ '' +
+ 'Hello!
');
+
+ assert.isTrue(isVisibleOnScreen(vNode));
+ });
+
+ it('should return true on absolutely positioned elements that are on-screen', function () {
+ var vNode = queryFixture(
+ 'hi
'
+ );
+
+ assert.isTrue(isVisibleOnScreen(vNode));
+ });
+
+ it('should respect position: fixed', function () {
+ var vNode = queryFixture(
+ 'StickySticky
'
+ );
+
+ assert.isTrue(isVisibleOnScreen(vNode));
+ });
+
+ it('should properly calculate offsets according the offsetParent', function () {
+ var vNode = queryFixture(
+ '' +
+ '
'
+ );
+ assert.isTrue(isVisibleOnScreen(vNode));
+ });
+
+ it('should return false if moved offscreen with left', function () {
+ var vNode = queryFixture(
+ 'Hi
' +
+ 'Hi
'
+ );
+ assert.isFalse(isVisibleOnScreen(vNode));
+ });
+
+ it('should return false if moved offscreen with top', function () {
+ var vNode = queryFixture(
+ 'Hi
'
+ );
+ assert.isFalse(isVisibleOnScreen(vNode));
+ });
+
+ it('should return false on detached elements', function () {
+ var el = document.createElement('div');
+ el.innerHTML = 'I am not visible because I am detached!';
+ axe.testUtils.flatTreeSetup(el);
+ assert.isFalse(isVisibleOnScreen(el));
+ });
+
+ it('should return true on body', function () {
+ axe.testUtils.flatTreeSetup(document.body);
+ var actual = isVisibleOnScreen(document.body);
+ assert.isTrue(actual);
+ });
+
+ it('should return true on html', function () {
+ axe.testUtils.flatTreeSetup(document.documentElement);
+ var actual = isVisibleOnScreen(document.documentElement);
+ assert.isTrue(actual);
+ });
+
+ it('should return false on STYLE tag', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ var actual = isVisibleOnScreen(vNode);
+ assert.isFalse(actual);
+ });
+
+ it('should return false on NOSCRIPT tag', function () {
+ var vNode = queryFixture(
+ 'Name:
'
+ );
+ var actual = isVisibleOnScreen(vNode);
+ assert.isFalse(actual);
+ });
+
+ it('should return true if positioned statically but top/left is set', function () {
+ var vNode = queryFixture(
+ 'Hi
'
+ );
+ assert.isTrue(isVisibleOnScreen(vNode));
+ });
+
+ it('should not be affected by `aria-hidden`', function () {
+ var vNode = queryFixture(
+ ''
+ );
+
+ assert.isTrue(isVisibleOnScreen(vNode));
+ });
+
+ it('should not calculate position on parents', function () {
+ var vNode = queryFixture(
+ '' +
+ '
'
+ );
+
+ assert.isTrue(isVisibleOnScreen(vNode));
+ });
+
+ it('should know how `visibility` works', function () {
+ var vNode = queryFixture(
+ ''
+ );
+
+ assert.isTrue(isVisibleOnScreen(vNode));
+ });
+
+ it('should detect clip rect hidden text technique', function () {
+ var clip =
+ 'clip: rect(1px 1px 1px 1px);' +
+ 'clip: rect(1px, 1px, 1px, 1px);' +
+ 'width: 1px; height: 1px;' +
+ 'position: absolute;' +
+ 'overflow: hidden;';
+
+ var vNode = queryFixture('Hi
' +
+ 'Hi
');
+
+ assert.isFalse(isVisibleOnScreen(vNode));
+ });
+
+ it('should detect clip rect hidden text technique using position: fixed', function () {
+ var clip =
+ 'clip: rect(1px 1px 1px 1px);' +
+ 'clip: rect(1px, 1px, 1px, 1px);' +
+ 'width: 1px; height: 1px;' +
+ 'position: fixed;' +
+ 'overflow: hidden;';
+
+ var vNode = queryFixture('Hi
');
+
+ assert.isFalse(isVisibleOnScreen(vNode));
+ });
+
+ it('should detect when clip is not applied because of positioning', function () {
+ var clip =
+ 'clip: rect(1px 1px 1px 1px);' +
+ 'clip: rect(1px, 1px, 1px, 1px);' +
+ 'position: relative;' +
+ 'overflow: hidden;';
+
+ var vNode = queryFixture('Hi
');
+
+ assert.isTrue(isVisibleOnScreen(vNode));
+ });
+
+ it('should detect clip rect hidden text technique on parent', function () {
+ var clip =
+ 'clip: rect(1px 1px 1px 1px);' +
+ 'clip: rect(1px, 1px, 1px, 1px);' +
+ 'width: 1px; height: 1px;' +
+ 'position: absolute;' +
+ 'overflow: hidden;';
+
+ var vNode = queryFixture(
+ '' + '
'
+ );
+
+ assert.isFalse(isVisibleOnScreen(vNode));
+ });
+
+ it('should detect when clip is not applied because of positioning on parent', function () {
+ var clip =
+ 'clip: rect(1px 1px 1px 1px);' +
+ 'clip: rect(1px, 1px, 1px, 1px);' +
+ 'position: relative;' +
+ 'overflow: hidden;';
+
+ var vNode = queryFixture(
+ 'Hi
' + '' + '
'
+ );
+
+ assert.isTrue(isVisibleOnScreen(vNode));
+ });
+
+ it('should detect poorly hidden clip rects', function () {
+ var clip =
+ 'clip: rect(5px 1px 1px 5px);' +
+ 'clip: rect(5px, 1px, 1px, 5px);' +
+ 'width: 1px; height: 1px;' +
+ 'position: absolute;' +
+ 'overflow: hidden;';
+
+ var vNode = queryFixture('Hi
' + 'Hi
');
+
+ assert.isFalse(isVisibleOnScreen(vNode));
+ });
+
+ it('should return false for display: none', function () {
+ var vNode = queryFixture(
+ ''
+ );
+
+ assert.isFalse(isVisibleOnScreen(vNode));
+ });
+
+ it('should return false for opacity: 0', function () {
+ var vNode = queryFixture(
+ 'Hello!
'
+ );
+
+ assert.isFalse(isVisibleOnScreen(vNode));
+ });
+
+ it('should return false for 0 height scrollable region', function () {
+ var vNode = queryFixture(
+ 'Hello!
Hello!
Hi
'
+ );
+
+ assert.isFalse(isVisibleOnScreen(vNode));
+ }
+ );
+
+ (isIE11 ? it.skip : it)(
+ 'should detect clip-path hidden text technique on parent',
+ function () {
+ var vNode = queryFixture(
+ '' +
+ '
'
+ );
+
+ assert.isFalse(isVisibleOnScreen(vNode));
+ }
+ );
+
+ (shadowSupported ? it : xit)(
+ 'should correctly handle visible slotted elements',
+ function () {
+ function createContentSlotted() {
+ var group = document.createElement('div');
+ group.innerHTML = 'Hi
' +
+ 'Stuff
';
+ return group;
+ }
+ function makeShadowTree(node) {
+ var root = node.attachShadow({ mode: 'open' });
+ var div = document.createElement('div');
+ root.appendChild(div);
+ div.appendChild(createContentSlotted());
+ }
+ fixture.innerHTML = '';
+ makeShadowTree(fixture.firstChild);
+ var tree = axe.utils.getFlattenedTree(fixture.firstChild);
+ var el = axe.utils.querySelectorAll(tree, 'a')[0];
+ assert.isTrue(isVisibleOnScreen(el.actualNode));
+ }
+ );
+ (shadowSupported ? it : xit)(
+ 'should correctly handle hidden slotted elements',
+ function () {
+ function createContentSlotted() {
+ var group = document.createElement('div');
+ group.innerHTML =
+ '';
+ return group;
+ }
+ function makeShadowTree(node) {
+ var root = node.attachShadow({ mode: 'open' });
+ var div = document.createElement('div');
+ root.appendChild(div);
+ div.appendChild(createContentSlotted());
+ }
+ fixture.innerHTML = '';
+ makeShadowTree(fixture.firstChild);
+ var tree = axe.utils.getFlattenedTree(fixture.firstChild);
+ var el = axe.utils.querySelectorAll(tree, 'a')[0];
+ assert.isFalse(isVisibleOnScreen(el.actualNode));
+ }
+ );
+ it('should return false if element is visually hidden using position absolute, overflow hidden, and a very small height', function () {
+ var vNode = queryFixture(
+ 'StickySticky
'
+ );
+
+ assert.isFalse(isVisibleOnScreen(vNode));
+ });
+
+ describe('SerialVirtualNode', function () {
+ it('should return true on statically-positioned, visible elements', function () {
+ var vNode = new axe.SerialVirtualNode({
+ nodeName: 'div'
+ });
+ assert.isTrue(isVisibleOnScreen(vNode));
+ });
+
+ it('should return false on STYLE tag', function () {
+ var vNode = new axe.SerialVirtualNode({
+ nodeName: 'style'
+ });
+ var actual = isVisibleOnScreen(vNode);
+ assert.isFalse(actual);
+ });
+
+ it('should return false on NOSCRIPT tag', function () {
+ var vNode = new axe.SerialVirtualNode({
+ nodeName: 'noscript'
+ });
+ var actual = isVisibleOnScreen(vNode);
+ assert.isFalse(actual);
+ });
+
+ it('should return false on TEMPLATE tag', function () {
+ var vNode = new axe.SerialVirtualNode({
+ nodeName: 'template'
+ });
+ var actual = isVisibleOnScreen(vNode);
+ assert.isFalse(actual);
+ });
+
+ it('should not be affected by `aria-hidden`', function () {
+ var vNode = new axe.SerialVirtualNode({
+ nodeName: 'div',
+ attributes: {
+ 'aria-hidden': true
+ }
+ });
+ assert.isTrue(isVisibleOnScreen(vNode));
+ });
+ });
+});
diff --git a/test/commons/dom/visibility-methods.js b/test/commons/dom/visibility-methods.js
new file mode 100644
index 0000000000..f5d2e12b08
--- /dev/null
+++ b/test/commons/dom/visibility-methods.js
@@ -0,0 +1,390 @@
+describe('dom.visibility-methods', function () {
+ var queryFixture = axe.testUtils.queryFixture;
+ var shadowCheckSetup = axe.testUtils.shadowCheckSetup;
+ var nativelyHidden =
+ axe._thisWillBeDeletedDoNotUse.commons.dom.nativelyHidden;
+ var displayHidden = axe._thisWillBeDeletedDoNotUse.commons.dom.displayHidden;
+ var visibilityHidden =
+ axe._thisWillBeDeletedDoNotUse.commons.dom.visibilityHidden;
+ var ariaHidden = axe._thisWillBeDeletedDoNotUse.commons.dom.ariaHidden;
+ var opacityHidden = axe._thisWillBeDeletedDoNotUse.commons.dom.opacityHidden;
+ var scrollHidden = axe._thisWillBeDeletedDoNotUse.commons.dom.scrollHidden;
+ var overflowHidden =
+ axe._thisWillBeDeletedDoNotUse.commons.dom.overflowHidden;
+ var clipHidden = axe._thisWillBeDeletedDoNotUse.commons.dom.clipHidden;
+ var areaHidden = axe._thisWillBeDeletedDoNotUse.commons.dom.areaHidden;
+
+ describe('nativelyHidden', function () {
+ var nativelyHiddenElements = ['style', 'script', 'noscript', 'template'];
+
+ it('should return true for hidden elements', function () {
+ nativelyHiddenElements.forEach(function (nodeName) {
+ var vNode = new axe.VirtualNode(document.createElement(nodeName));
+ assert.isTrue(nativelyHidden(vNode), (nodeName = ' is not hidden'));
+ });
+ });
+
+ it('should return false for visible elements', function () {
+ Object.keys(axe._audit.standards.htmlElms)
+ .filter(function (nodeName) {
+ return !nativelyHiddenElements.includes(nodeName);
+ })
+ .forEach(function (nodeName) {
+ var vNode = new axe.VirtualNode(document.createElement(nodeName));
+ assert.isFalse(nativelyHidden(vNode), nodeName + ' is not visible');
+ });
+ });
+ });
+
+ describe('displayHidden', function () {
+ it('should return true for element with "display:none`', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ assert.isTrue(displayHidden(vNode));
+ });
+
+ it('should return false for element with "display:block`', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ assert.isFalse(displayHidden(vNode));
+ });
+
+ it('should return false for element without display', function () {
+ var vNode = queryFixture('');
+ assert.isFalse(displayHidden(vNode));
+ });
+
+ it('should return false for area element', function () {
+ var vNode = queryFixture(
+ '' +
+ ''
+ );
+ assert.isFalse(displayHidden(vNode));
+ });
+ });
+
+ describe('visibilityHidden', function () {
+ it('should return true for element with "visibility:hidden`', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ assert.isTrue(visibilityHidden(vNode));
+ });
+
+ it('should return true for element with "visibility:collapse`', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ assert.isTrue(visibilityHidden(vNode));
+ });
+
+ it('should return false for element with "visibility:visible`', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ assert.isFalse(visibilityHidden(vNode));
+ });
+
+ it('should return false for element without visibility', function () {
+ var vNode = queryFixture('');
+ assert.isFalse(visibilityHidden(vNode));
+ });
+
+ it('should return false for if passed "isAncestor:true`', function () {
+ var vNode = queryFixture(
+ ''
+ );
+ assert.isFalse(visibilityHidden(vNode, { isAncestor: true }));
+ });
+ });
+
+ describe('ariaHidden', function () {
+ it('should return true for element with "aria-hidden=true`', function () {
+ var vNode = queryFixture('');
+ assert.isTrue(ariaHidden(vNode));
+ });
+
+ it('should return false for element with "aria-hidden=false`', function () {
+ var vNode = queryFixture('');
+ assert.isFalse(ariaHidden(vNode));
+ });
+
+ it('should return false for element without aria-hidden', function () {
+ var vNode = queryFixture('');
+ assert.isFalse(ariaHidden(vNode));
+ });
+ });
+
+ describe('opacityHidden', function () {
+ it('should return true for element with "opacity:0`', function () {
+ var vNode = queryFixture('');
+ assert.isTrue(opacityHidden(vNode));
+ });
+
+ it('should return false for element with "opacity:0.1`', function () {
+ var vNode = queryFixture('');
+ assert.isFalse(opacityHidden(vNode));
+ });
+
+ it('should return false for element without opacity', function () {
+ var vNode = queryFixture('');
+ assert.isFalse(opacityHidden(vNode));
+ });
+ });
+
+ describe('scrollHidden', function () {
+ it('should return true for element with scroll and "width:0`', function () {
+ var vNode = queryFixture(
+ 'scroll hidden
'
+ );
+ assert.isTrue(scrollHidden(vNode));
+ });
+
+ it('should return true for element with scroll and "height:0`', function () {
+ var vNode = queryFixture(
+ 'scroll hidden
'
+ );
+ assert.isTrue(scrollHidden(vNode));
+ });
+
+ it('should return false for element with scroll and width > 0', function () {
+ var vNode = queryFixture(
+ 'scroll hidden
'
+ );
+ assert.isFalse(scrollHidden(vNode));
+ });
+
+ it('should return false for element with scroll and height > 0', function () {
+ var vNode = queryFixture(
+ 'scroll hidden
'
+ );
+ assert.isFalse(scrollHidden(vNode));
+ });
+
+ it('should return false for element without scroll', function () {
+ var vNode = queryFixture('scroll hidden
');
+ assert.isFalse(scrollHidden(vNode));
+ });
+ });
+
+ describe('overflowHidden', function () {
+ it('should return true for element with "overflow:hidden" and "width:0`', function () {
+ var vNode = queryFixture(
+ 'overflow hidden
'
+ );
+ assert.isTrue(overflowHidden(vNode));
+ });
+
+ it('should return true for element with "overflow:hidden" and "height:0`', function () {
+ var vNode = queryFixture(
+ 'overflow hidden
'
+ );
+ assert.isTrue(overflowHidden(vNode));
+ });
+
+ it('should return true for element with "overflow:hidden" and "width:1`', function () {
+ var vNode = queryFixture(
+ 'overflow hidden
'
+ );
+ assert.isTrue(overflowHidden(vNode));
+ });
+
+ it('should return true for element with "overflow:hidden" and "height:1`', function () {
+ var vNode = queryFixture(
+ 'overflow hidden
'
+ );
+ assert.isTrue(overflowHidden(vNode));
+ });
+
+ it('should return true for element with "overflow:hidden" and width > 1', function () {
+ var vNode = queryFixture(
+ 'overflow hidden
'
+ );
+ assert.isFalse(overflowHidden(vNode));
+ });
+
+ it('should return true for element with "overflow:hidden" and height > 1', function () {
+ var vNode = queryFixture(
+ 'overflow hidden
'
+ );
+ assert.isFalse(overflowHidden(vNode));
+ });
+
+ it('should return false for element with "position:fixed`', function () {
+ var vNode = queryFixture(
+ 'overflow hidden
'
+ );
+ assert.isFalse(overflowHidden(vNode));
+ });
+
+ it('should return false for element with "position:relative`', function () {
+ var vNode = queryFixture(
+ 'overflow hidden
'
+ );
+ assert.isFalse(overflowHidden(vNode));
+ });
+
+ it('should return false for element without position', function () {
+ var vNode = queryFixture(
+ 'overflow hidden
'
+ );
+ assert.isFalse(overflowHidden(vNode));
+ });
+
+ it('should return false for element with "overflow:visible`', function () {
+ var vNode = queryFixture(
+ 'overflow hidden
'
+ );
+ assert.isFalse(overflowHidden(vNode));
+ });
+
+ it('should return false for element with "overflow:auto`', function () {
+ var vNode = queryFixture(
+ 'overflow hidden
'
+ );
+ assert.isFalse(overflowHidden(vNode));
+ });
+
+ it('should return false for element without overflow', function () {
+ var vNode = queryFixture(
+ 'overflow hidden
'
+ );
+ assert.isFalse(overflowHidden(vNode));
+ });
+ });
+
+ describe('clipHidden', function () {
+ it('should return true for element with clip-path and inset >= 50%', function () {
+ var vNode = queryFixture(
+ 'Hello world
'
+ );
+ assert.isTrue(clipHidden(vNode));
+ });
+
+ it('should return false for element with clip-path and inset < 50%', function () {
+ var vNode = queryFixture(
+ 'Hello world
'
+ );
+ assert.isFalse(clipHidden(vNode));
+ });
+
+ it('should return true for element with clip-path and circle=0', function () {
+ var vNode = queryFixture(
+ 'Hello world
'
+ );
+ assert.isTrue(clipHidden(vNode));
+ });
+
+ it('should return false for element with clip-path and circle > 0', function () {
+ var vNode = queryFixture(
+ 'Hello world
'
+ );
+ assert.isFalse(clipHidden(vNode));
+ });
+
+ it('should return true for element with clip and "position:absolute`', function () {
+ var vNode = queryFixture(
+ 'Hello world
'
+ );
+ assert.isTrue(clipHidden(vNode));
+ });
+
+ it('should return true for element with clip and "position:fixed"', function () {
+ var vNode = queryFixture(
+ 'Hello world
'
+ );
+ assert.isTrue(clipHidden(vNode));
+ });
+
+ it('should return true for element with clip using commas', function () {
+ var vNode = queryFixture(
+ 'Hello world
'
+ );
+ assert.isTrue(clipHidden(vNode));
+ });
+
+ it('should return true for poorly hidden clip rects', function () {
+ var vNode = queryFixture(
+ 'Hello world
'
+ );
+ assert.isTrue(clipHidden(vNode));
+ });
+
+ it('should return false for element with clip and "position:relative"', function () {
+ var vNode = queryFixture(
+ 'Hello world
'
+ );
+ assert.isFalse(clipHidden(vNode));
+ });
+
+ it('should return false for element with clip and without position', function () {
+ var vNode = queryFixture(
+ 'Hello world
'
+ );
+ assert.isFalse(clipHidden(vNode));
+ });
+
+ it('should return false for element without clip or clip-path', function () {
+ var vNode = queryFixture('Hello world
');
+ assert.isFalse(clipHidden(vNode));
+ });
+
+ it('should return false for element with visible clip', function () {
+ var vNode = queryFixture(
+ 'Hello world
'
+ );
+ assert.isFalse(clipHidden(vNode));
+ });
+ });
+
+ describe('areaHidden', function () {
+ it('should return true for element without map parent', function () {
+ var vNode = queryFixture('');
+ assert.isTrue(areaHidden(vNode));
+ });
+
+ it('should return true for map without a name', function () {
+ var vNode = queryFixture('');
+ assert.isTrue(areaHidden(vNode));
+ });
+
+ it('should return true if map is in shadowDOM', function () {
+ var vNode = shadowCheckSetup(
+ '',
+ ''
+ )[2];
+ assert.isTrue(areaHidden(vNode));
+ });
+
+ it('should return true if img does not use map', function () {
+ var vNode = queryFixture('');
+ assert.isTrue(areaHidden(vNode));
+ });
+
+ it('should return true if img uses map but is hidden', function () {
+ var vNode = queryFixture(
+ 'Hello world
'; + it('returns true for visible elements', function () { + fixtureSetup('Hello world
'); assert.isTrue(rule.matches(fixture.firstChild)); }); - it('returns false for elements with hidden', function() { - fixture.innerHTML = 'Hello world
' + it('returns false for elements with hidden', function () { + fixtureSetup('Hello world
'); assert.isFalse(rule.matches(fixture.firstChild)); }); - it('returns true for visible elements with aria-hidden="true"', function() { - fixture.innerHTML = '' + it('returns true for visible elements with aria-hidden="true"', function () { + fixtureSetup(''); assert.isTrue(rule.matches(fixture.firstChild)); }); - it('returns false for opacity:0 elements with accessible text', function() { - fixture.innerHTML = 'Hello world
'; + it('returns false for opacity:0 elements with accessible text', function () { + fixtureSetup('Hello world
'); assert.isFalse(rule.matches(fixture.firstChild)); }); });