fix(color-contrast-matches): only absolutely positioned elements usin…

…g clip should be not visible (#3038) * only count as not visible because of clip when absolutely positioned * update tests
dequelabs · Jun 29, 2021 · e93fdb1 · e93fdb1
1 parent cae80a1
commit e93fdb1
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 4 deletions.
diff --git a/lib/commons/dom/is-visible.js b/lib/commons/dom/is-visible.js
@@ -25,10 +25,14 @@ function isClipped(style) {
     .getPropertyValue('clip-path')
     .match(clipPathRegex);
   if (matchesClip && matchesClip.length === 5) {
-    return (
-      matchesClip[3] - matchesClip[1] <= 0 &&
-      matchesClip[2] - matchesClip[4] <= 0
-    );
+    const position = style.getPropertyValue('position');
+    // clip is only applied to absolutely positioned elements
+    if (['fixed', 'absolute'].includes(position)) {
+      return (
+        matchesClip[3] - matchesClip[1] <= 0 &&
+        matchesClip[2] - matchesClip[4] <= 0
+      );
+    }
   }
   if (matchesClipPath) {
     const type = matchesClipPath[1];

diff --git a/test/commons/dom/is-visible.js b/test/commons/dom/is-visible.js
@@ -158,6 +158,35 @@ describe('dom.isVisible', function() {
       assert.isFalse(axe.commons.dom.isVisible(el));
     });
 
+    it('should detect clip rect hidden text technique using position: fixed', function() {
+      var el,
+        clip =
+          'clip: rect(1px 1px 1px 1px);' +
+          'clip: rect(1px, 1px, 1px, 1px);' +
+          'width: 1px; height: 1px;' +
+          'position: fixed;' +
+          'overflow: hidden;';
+
+      fixture.innerHTML = '<div id="target" style="' + clip + '">Hi</div>';
+
+      el = document.getElementById('target');
+      assert.isFalse(axe.commons.dom.isVisible(el));
+    });
+
+    it('should detect when clip is not applied because of positioning', function() {
+      var el,
+        clip =
+          'clip: rect(1px 1px 1px 1px);' +
+          'clip: rect(1px, 1px, 1px, 1px);' +
+          'position: relative;' +
+          'overflow: hidden;';
+
+      fixture.innerHTML = '<div id="target" style="' + clip + '">Hi</div>';
+
+      el = document.getElementById('target');
+      assert.isTrue(axe.commons.dom.isVisible(el));
+    });
+
     it('should detect clip rect hidden text technique on parent', function() {
       var el,
         clip =
@@ -174,6 +203,21 @@ describe('dom.isVisible', function() {
       assert.isFalse(axe.commons.dom.isVisible(el));
     });
 
+    it('should detect when clip is not applied because of positioning on parent', function() {
+      var el,
+        clip =
+          'clip: rect(1px 1px 1px 1px);' +
+          'clip: rect(1px, 1px, 1px, 1px);' +
+          'position: relative;' +
+          'overflow: hidden;';
+
+      fixture.innerHTML =
+        '<div style="' + clip + '">' + '<div id="target">Hi</div>' + '</div>';
+
+      el = document.getElementById('target');
+      assert.isTrue(axe.commons.dom.isVisible(el));
+    });
+
     it('should detect poorly hidden clip rects', function() {
       var el,
         clip =
@@ -513,6 +557,20 @@ describe('dom.isVisible', function() {
       assert.isTrue(axe.commons.dom.isVisible(el, true));
     });
 
+    it('should detect even when clip is not applied because of positioning', function() {
+      var el,
+        clip =
+          'clip: rect(1px 1px 1px 1px);' +
+          'clip: rect(1px, 1px, 1px, 1px);' +
+          'position: relative;' +
+          'overflow: hidden;';
+
+      fixture.innerHTML = '<div id="target" style="' + clip + '">Hi</div>';
+
+      el = document.getElementById('target');
+      assert.isTrue(axe.commons.dom.isVisible(el, true));
+    });
+
     it('should detect clip rect hidden text technique on parent', function() {
       var el,
         clip =
@@ -529,6 +587,21 @@ describe('dom.isVisible', function() {
       assert.isTrue(axe.commons.dom.isVisible(el, true));
     });
 
+    it('should detect even when clip is not applied because of positioning on parent', function() {
+      var el,
+        clip =
+          'clip: rect(1px 1px 1px 1px);' +
+          'clip: rect(1px, 1px, 1px, 1px);' +
+          'position: relative;' +
+          'overflow: hidden;';
+
+      fixture.innerHTML =
+        '<div style="' + clip + '">' + '<div id="target">Hi</div>' + '</div>';
+
+      el = document.getElementById('target');
+      assert.isTrue(axe.commons.dom.isVisible(el, true));
+    });
+
     it('should detect poorly hidden clip rects', function() {
       var el,
         clip =