fix: inline element with visibile child now is considered visible (#8130)

packages/driver/cypress/integration/dom/visibility_spec.ts

@@ -308,6 +308,14 @@ describe('src/cypress/dom/visibility', () => {
   <span style="position: fixed; top: 40px;">parent pointer-events: none</span>
 </div>
 <span style="position: fixed; top: 40px; background: red;">covering the element with pointer-events: none</span>\
+`)
+
+      this.$parentDisplayInlineChildDisplayBlock = add(`\
+<div>
+  <span>
+    <label style="display: block;">display: block</label>
+  </span>
+</div>\
 `)
 
       this.$elOutOfParentBoundsToLeft = add(`\
@@ -738,6 +746,14 @@ describe('src/cypress/dom/visibility', () => {
       })
     })
 
+    describe('css display', function () {
+      // https://github.com/cypress-io/cypress/issues/6183
+      it('parent is visible if display inline and child has display block', function () {
+        expect(this.$parentDisplayInlineChildDisplayBlock.find('span')).to.be.visible
+        expect(this.$parentDisplayInlineChildDisplayBlock.find('span')).to.not.be.hidden
+      })
+    })
+
     describe('css overflow', () => {
       it('is visible when parent doesnt have overflow hidden', function () {
         expect(this.$parentNoWidthHeightOverflowAuto.find('span')).to.be.visible

packages/driver/src/dom/visibility.js

@@ -52,6 +52,11 @@ const isHidden = (el, name = 'isHidden()') => {
   // either its offsetHeight or offsetWidth is 0 because
   // it is impossible for the user to interact with this element
   if (elHasNoEffectiveWidthOrHeight($el)) {
+    // https://github.com/cypress-io/cypress/issues/6183
+    if (elHasDisplayInline($el)) {
+      return !elHasVisibleChild($el)
+    }
+
     return true // is hidden
   }
 
@@ -152,6 +157,10 @@ const elHasDisplayNone = ($el) => {
   return $el.css('display') === 'none'
 }
 
+const elHasDisplayInline = ($el) => {
+  return $el.css('display') === 'inline'
+}
+
 const elHasOverflowHidden = function ($el) {
   const cssOverflow = [$el.css('overflow'), $el.css('overflow-y'), $el.css('overflow-x')]
 
@@ -230,6 +239,12 @@ const elDescendentsHavePositionFixedOrAbsolute = function ($parent, $child) {
   })
 }
 
+const elHasVisibleChild = function ($el) {
+  return _.some($el.children(), (el) => {
+    return isVisible(el)
+  })
+}
+
 const elIsNotElementFromPoint = function ($el) {
   // if we have a fixed position element that means
   // it is fixed 'relative' to the viewport which means