From 347ca9e220b945bb7761f8f4137124cb4c1a51b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Fri, 12 Apr 2024 08:43:29 +0200 Subject: [PATCH 1/4] fix for test that catched not correct span --- packages/driver/cypress/e2e/dom/visibility.cy.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts index 5dc7495afc30..2144c3f6aaa8 100644 --- a/packages/driver/cypress/e2e/dom/visibility.cy.ts +++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts @@ -258,7 +258,7 @@ describe('src/cypress/dom/visibility', () => { this.$parentNoWidthHeightOverflowAuto = add(`\
- parent no size, overflow: auto + parent no size, overflow: auto
`) this.$parentWithWidthHeightNoOverflow = add(`\ @@ -733,8 +733,8 @@ describe('src/cypress/dom/visibility', () => { }) it('is hidden if parent has overflow: hidden and no width', function () { - expect(this.$parentNoWidth.find('span')).to.be.hidden - expect(this.$parentNoWidth.find('span')).to.not.be.visible + expect(this.$parentNoWidth.find('#parentNoWidth')).to.be.hidden + expect(this.$parentNoWidth.find('#parentNoWidth')).to.not.be.visible }) it('is hidden if parent has overflow: hidden and no height', function () { From 5d57f92a2e761732182f456b46b50d9a736d6607 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Sun, 14 Apr 2024 22:18:02 +0200 Subject: [PATCH 2/4] fix for visibility compatible backward --- packages/driver/src/dom/visibility.ts | 58 ++++++++++++++++----------- 1 file changed, 34 insertions(+), 24 deletions(-) diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts index 45e2f86248cb..a651b692ee19 100644 --- a/packages/driver/src/dom/visibility.ts +++ b/packages/driver/src/dom/visibility.ts @@ -133,8 +133,8 @@ const elHasNoEffectiveWidthOrHeight = ($el) => { const el = $el[0] const style = getComputedStyle(el) const transform = style.getPropertyValue('transform') - const width = elClientWidth($el) - const height = elClientHeight($el) + const width = elOffsetWidth($el) + const height = elOffsetHeight($el) const overflowHidden = elHasOverflowHidden($el) return isZeroLengthAndTransformNone(width, height, transform) || @@ -157,16 +157,24 @@ const isZeroLengthAndOverflowHidden = (width, height, overflowHidden) => { (height <= 0 && overflowHidden) } +const elHasNoClientWidthOrHeight = ($el) => { + return (elClientWidth($el) <= 0) || (elClientHeight($el) <= 0) +} + +const elOffsetWidth = ($el) => { + return $el[0].offsetWidth +} + const elClientWidth = ($el) => { return $el[0].getBoundingClientRect().width } -const elClientHeight = ($el) => { - return $el[0].getBoundingClientRect().height +const elOffsetHeight = ($el) => { + return $el[0].offsetHeight } -const elHasNoClientWidthOrHeight = ($el) => { - return (elClientWidth($el) <= 0) || (elClientHeight($el) <= 0) +const elClientHeight = ($el) => { + return $el[0].getBoundingClientRect().height } const elHasVisibilityHiddenOrCollapse = ($el) => { @@ -185,6 +193,10 @@ const elHasOpacityZero = ($el) => { return $el.css('opacity') === '0' } +const elHasBlockStyle = ($el) => { + return $el.css('display') === 'block' || $el.css('display') === 'inline-block' +} + const elHasDisplayNone = ($el) => { return $el.css('display') === 'none' } @@ -327,30 +339,28 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent( } if (canClipContent($el, $ancestor)) { - if ($el[0] instanceof DOMRect && $ancestor[0] instanceof DOMRect) { - const elProp = $el.getBoundingClientRect() - const ancestorProp = $ancestor[0].getBoundingClientRect() + const el: HTMLElement = $jquery.isJquery($el) ? $el[0] : $el + const elProps = el.getBoundingClientRect() + const ancestorProps = $jquery.isJquery($ancestor) ? $ancestor[0].getBoundingClientRect() : $ancestor.get(0).getBoundingClientRect() - if (elHasPositionAbsolute($el) && (ancestorProp.width === 0 || ancestorProp.height === 0)) { - return elIsOutOfBoundsOfAncestorsOverflow($el, getParent($ancestor)) - } + if ((elHasPositionAbsolute($el) || elHasBlockStyle($el)) && (ancestorProps.width === 0 || ancestorProps.height === 0)) { + return elIsOutOfBoundsOfAncestorsOverflow(el, getParent($ancestor)) + } - // target el is out of bounds - if ( - // target el is to the right of the ancestor's visible area - (elProp.left >= (ancestorProp.width + ancestorProp.left)) || + if ( + // target el is to the right of the ancestor's visible area + (elProps.left < 0) || (elProps.left >= (ancestorProps.width + ancestorProps.left)) || // target el is to the left of the ancestor's visible area - ((elProp.left + elProp.width) <= ancestorProp.left) || + ((elProps.left + elProps.width) <= ancestorProps.left) || // target el is under the ancestor's visible area - (elProp.top >= (ancestorProp.height + ancestorProp.top)) || + (elProps.top >= (ancestorProps.height + ancestorProps.top)) || // target el is above the ancestor's visible area - ((elProp.top + elProp.height) <= ancestorProp.top) - ) { - return true - } + ((elProps.top + elProps.height) <= ancestorProps.top) + ) { + return true } } @@ -541,8 +551,8 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true } if ($parent = parentHasNoOffsetWidthOrHeightAndOverflowHidden(getParent($el))) { parentNode = stringifyElement($parent, 'short') - width = elClientWidth($parent) - height = elClientHeight($parent) + width = elOffsetWidth($parent) + height = elOffsetHeight($parent) return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`overflow: hidden\` and an effective width and height of: \`${width} x ${height}\` pixels.` } From 4ad813619107dfe97d8427d4964289f7c3c09919 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Sun, 14 Apr 2024 22:28:22 +0200 Subject: [PATCH 3/4] tests pass without this check so probably not needed --- packages/driver/src/dom/visibility.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts index a651b692ee19..1b4f6095e344 100644 --- a/packages/driver/src/dom/visibility.ts +++ b/packages/driver/src/dom/visibility.ts @@ -349,7 +349,7 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent( if ( // target el is to the right of the ancestor's visible area - (elProps.left < 0) || (elProps.left >= (ancestorProps.width + ancestorProps.left)) || + (elProps.left >= (ancestorProps.width + ancestorProps.left)) || // target el is to the left of the ancestor's visible area ((elProps.left + elProps.width) <= ancestorProps.left) || From f484c50ccec43d628953be078a12ae9a72bd3403 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Sun, 14 Apr 2024 22:31:17 +0200 Subject: [PATCH 4/4] only cleanup to take less on screen and be more visible --- packages/driver/src/dom/visibility.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts index 1b4f6095e344..1464f4284d8c 100644 --- a/packages/driver/src/dom/visibility.ts +++ b/packages/driver/src/dom/visibility.ts @@ -348,17 +348,17 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent( } if ( - // target el is to the right of the ancestor's visible area + // target el is to the right of the ancestor's visible area (elProps.left >= (ancestorProps.width + ancestorProps.left)) || - // target el is to the left of the ancestor's visible area - ((elProps.left + elProps.width) <= ancestorProps.left) || + // target el is to the left of the ancestor's visible area + ((elProps.left + elProps.width) <= ancestorProps.left) || - // target el is under the ancestor's visible area - (elProps.top >= (ancestorProps.height + ancestorProps.top)) || + // target el is under the ancestor's visible area + (elProps.top >= (ancestorProps.height + ancestorProps.top)) || - // target el is above the ancestor's visible area - ((elProps.top + elProps.height) <= ancestorProps.top) + // target el is above the ancestor's visible area + ((elProps.top + elProps.height) <= ancestorProps.top) ) { return true }