diff --git a/packages/alfa-rules/src/common/predicate/is-clipped.ts b/packages/alfa-rules/src/common/predicate/is-clipped.ts index b2d34102dd..71ed96dc26 100644 --- a/packages/alfa-rules/src/common/predicate/is-clipped.ts +++ b/packages/alfa-rules/src/common/predicate/is-clipped.ts @@ -42,10 +42,10 @@ function isClippedBySize( const { value: x } = style.computed("overflow-x"); const { value: y } = style.computed("overflow-y"); - if (x.value === "hidden" || y.value === "hidden") { - const { value: height } = style.computed("height"); - const { value: width } = style.computed("width"); + const { value: height } = style.computed("height"); + const { value: width } = style.computed("width"); + if (x.value === "hidden" || y.value === "hidden") { for (const dimension of [height, width]) { switch (dimension.type) { case "percentage": @@ -64,6 +64,31 @@ function isClippedBySize( } } } + + if ( + x.value === "auto" || + x.value === "scroll" || + y.value === "auto" || + y.value === "scroll" + ) { + for (const dimension of [height, width]) { + switch (dimension.type) { + case "percentage": + if (dimension.value <= 0) { + return true; + } else { + break; + } + + case "length": + if (dimension.value <= 0) { + return true; + } else { + break; + } + } + } + } } for (const parent of node.parent({ flattened: true })) { diff --git a/packages/alfa-rules/test/common/predicate/is-visible.spec.tsx b/packages/alfa-rules/test/common/predicate/is-visible.spec.tsx index d24b1ba501..635f106706 100644 --- a/packages/alfa-rules/test/common/predicate/is-visible.spec.tsx +++ b/packages/alfa-rules/test/common/predicate/is-visible.spec.tsx @@ -61,6 +61,42 @@ test(`isVisible() returns false when an element is hidden by reducing its size t.equal(isVisible(element), false); }); +test(`isVisible() returns false when an element scrolls its overflow and its size is reduced to 0 pixel, thus hidding the scrollbar`, (t) => { + for (const element of [ +
Hello World
, + +
Hello World
, + +
Hello World
, + +
Hello World
, + +
+ Hello World +
, + ]) { + t.equal(isVisible(element), false); + } +}); + +test(`isVisible() returns false when an element has its overflow set to auto and its size is reduced to 0 pixel, thus hidding the scrollbar`, (t) => { + for (const element of [ +
Hello World
, + +
Hello World
, + +
Hello World
, + +
Hello World
, + +
+ Hello World +
, + ]) { + t.equal(isVisible(element), false); + } +}); + test("isVisible() returns false on empty elements", (t) => { const element =
;