From 321797e5a792b951c66f284d18aa12dc793ffc6d Mon Sep 17 00:00:00 2001
From: Chris Breiding <chrisbreiding@gmail.com>
Date: Tue, 28 Jul 2020 10:14:33 -0400
Subject: [PATCH 1/5] fix: fix hanging when scrolling shadow dom element

---
 .../commands/actions/scroll_spec.js           | 11 ++++++++++
 .../driver/src/cy/commands/actions/scroll.js  |  2 +-
 packages/driver/src/dom/elements.ts           | 21 ++++++++++++++-----
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/packages/driver/cypress/integration/commands/actions/scroll_spec.js b/packages/driver/cypress/integration/commands/actions/scroll_spec.js
index 4482760c0615..cf495f771e25 100644
--- a/packages/driver/cypress/integration/commands/actions/scroll_spec.js
+++ b/packages/driver/cypress/integration/commands/actions/scroll_spec.js
@@ -799,6 +799,17 @@ describe('src/cy/commands/actions/scroll', () => {
       })
     })
 
+    describe('shadow dom', () => {
+      beforeEach(() => {
+        cy.visit('/fixtures/shadow-dom.html')
+      })
+
+      // https://github.com/cypress-io/cypress/issues/7986
+      it('does not hang', () => {
+        cy.get('.shadow-1', { includeShadowDom: true }).scrollIntoView()
+      })
+    })
+
     describe('assertion verification', () => {
       beforeEach(function () {
         cy.on('log:added', (attrs, log) => {
diff --git a/packages/driver/src/cy/commands/actions/scroll.js b/packages/driver/src/cy/commands/actions/scroll.js
index 79d8bc3d2ccf..f77e9cf96b4c 100644
--- a/packages/driver/src/cy/commands/actions/scroll.js
+++ b/packages/driver/src/cy/commands/actions/scroll.js
@@ -7,7 +7,7 @@ const $utils = require('../../../cypress/utils')
 const $errUtils = require('../../../cypress/error_utils')
 
 const findScrollableParent = ($el, win) => {
-  const $parent = $el.parent()
+  const $parent = $dom.getParent($el)
 
   // if we're at the body, we just want to pass in
   // window into jQuery scrollTo
diff --git a/packages/driver/src/dom/elements.ts b/packages/driver/src/dom/elements.ts
index 8dd7ea532471..f18e46ae87ff 100644
--- a/packages/driver/src/dom/elements.ts
+++ b/packages/driver/src/dom/elements.ts
@@ -611,7 +611,7 @@ const isWithinShadowRoot = (node: HTMLElement) => {
   return isShadowRoot(node.getRootNode())
 }
 
-const getParent = (el) => {
+const getParentNode = (el) => {
   // if the element has a direct parent element,
   // simply return it.
   if (el.parentElement) {
@@ -629,9 +629,13 @@ const getParent = (el) => {
   return null
 }
 
+const getParent = ($el: JQuery): JQuery => {
+  return $(getParentNode($el[0]))
+}
+
 const getAllParents = (el) => {
   const collectParents = (parents, node) => {
-    const parent = getParent(node)
+    const parent = getParentNode(node)
 
     if (!parent) return parents
 
@@ -899,7 +903,7 @@ const isDescendent = ($el1, $el2) => {
 
 const findParent = (el, condition) => {
   const collectParent = (node) => {
-    const parent = getParent(node)
+    const parent = getParentNode(node)
 
     if (!parent) return null
 
@@ -923,7 +927,7 @@ const getFirstFocusableEl = ($el: JQuery<HTMLElement>) => {
     return $el
   }
 
-  const parent = $el.parent()
+  const parent = getParent($el)
 
   // if we have no parent then just return
   // the window since that can receive focus
@@ -933,7 +937,7 @@ const getFirstFocusableEl = ($el: JQuery<HTMLElement>) => {
     return $(win)
   }
 
-  return getFirstFocusableEl($el.parent())
+  return getFirstFocusableEl(getParent($el))
 }
 
 const getActiveElByDocument = ($el: JQuery<HTMLElement>): HTMLElement | null => {
@@ -1245,6 +1249,12 @@ const elementFromPoint = (doc, x, y) => {
   return elFromPoint
 }
 
+const getShadowRoot = ($el: JQuery): JQuery<Node> => {
+  const root = $el[0].getRootNode()
+
+  return $(root)
+}
+
 const findAllShadowRoots = (root: Node): Node[] => {
   const collectRoots = (roots, nodes, node) => {
     const currentRoot = roots.pop()
@@ -1359,4 +1369,5 @@ export {
   getFirstScrollableParent,
   getParent,
   getAllParents,
+  getShadowRoot,
 }

From be623f356a7a56d23912e183b5f44348096fb6df Mon Sep 17 00:00:00 2001
From: Chris Breiding <chrisbreiding@gmail.com>
Date: Tue, 28 Jul 2020 10:16:09 -0400
Subject: [PATCH 2/5] fix: fix focus when ancestor of shadow element is outside
 shadow dom

---
 packages/driver/cypress/fixtures/shadow-dom.html             | 5 ++++-
 .../cypress/integration/commands/actions/click_spec.js       | 5 +++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/driver/cypress/fixtures/shadow-dom.html b/packages/driver/cypress/fixtures/shadow-dom.html
index ecb3ed20eeef..33506ca1989b 100644
--- a/packages/driver/cypress/fixtures/shadow-dom.html
+++ b/packages/driver/cypress/fixtures/shadow-dom.html
@@ -19,6 +19,9 @@
       <div class="in-shadow-slot">In Shadow Slot</div>
     </cy-test-element>
     <cy-test-element id="shadow-element-7" innerClass="in-and-out" content="Shadow Content 7"></cy-test-element>
+    <div class="focusable" tabindex="1">
+      <cy-test-element innerClass="inside-focusable" content="Inside Focusable"></cy-test-element>
+    </div>
 
     <script type="text/javascript">
       if (window.customElements) {
@@ -28,7 +31,7 @@
 
             const root = this.attachShadow({ mode: 'open' })
             const para = document.createElement('p')
-            const content = this.getAttribute('content')
+            const content = this.getAttribute('content') || 'Shadow Content'
             const className = this.hasAttribute('innerClass') ? this.getAttribute('innerClass') : 'shadow-content'
 
             root.innerHTML = `<p class="${className}">${content}</p><input /><slot></slot>`
diff --git a/packages/driver/cypress/integration/commands/actions/click_spec.js b/packages/driver/cypress/integration/commands/actions/click_spec.js
index deb601cfa0a3..08adf859ab95 100644
--- a/packages/driver/cypress/integration/commands/actions/click_spec.js
+++ b/packages/driver/cypress/integration/commands/actions/click_spec.js
@@ -3707,6 +3707,11 @@ describe('shadow dom', () => {
     .rightclick()
   })
 
+  it('focuses the correct ancestor when it is outside shadow dom', () => {
+    cy.get('.inside-focusable', { includeShadowDom: true }).click()
+    cy.get('.focusable').should('be.focused')
+  })
+
   // https://github.com/cypress-io/cypress/issues/7679
   it('does not hang when experimentalShadowDomSupport is false and clicking on custom element', () => {
     Cypress.config('experimentalShadowDomSupport', false)

From 9f8a19d06344cb50aea618780cd05b3085a0d197 Mon Sep 17 00:00:00 2001
From: Chris Breiding <chrisbreiding@gmail.com>
Date: Tue, 28 Jul 2020 10:16:43 -0400
Subject: [PATCH 3/5] fix: fix visibility check when shadow element parent is
 not visible outside shadow dom

---
 packages/driver/cypress/fixtures/shadow-dom.html      |  1 +
 .../driver/cypress/integration/e2e/visibility_spec.js | 11 ++++++++---
 packages/driver/src/dom/document.ts                   |  8 +++++---
 packages/driver/src/dom/transform.ts                  |  3 ++-
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/driver/cypress/fixtures/shadow-dom.html b/packages/driver/cypress/fixtures/shadow-dom.html
index 33506ca1989b..2281da528f83 100644
--- a/packages/driver/cypress/fixtures/shadow-dom.html
+++ b/packages/driver/cypress/fixtures/shadow-dom.html
@@ -22,6 +22,7 @@
     <div class="focusable" tabindex="1">
       <cy-test-element innerClass="inside-focusable" content="Inside Focusable"></cy-test-element>
     </div>
+    <cy-test-element innerClass="inside-non-visible" content="Not Visible" style="transform-style: preserve-3d; backface-visibility: hidden; transform: rotateY(180deg);"></cy-test-element>
 
     <script type="text/javascript">
       if (window.customElements) {
diff --git a/packages/driver/cypress/integration/e2e/visibility_spec.js b/packages/driver/cypress/integration/e2e/visibility_spec.js
index a3cdaf575a97..9215cc9b4c2c 100644
--- a/packages/driver/cypress/integration/e2e/visibility_spec.js
+++ b/packages/driver/cypress/integration/e2e/visibility_spec.js
@@ -29,11 +29,16 @@ describe('visibility', () => {
     })
   })
 
-  // https://github.com/cypress-io/cypress/issues/7794
-  describe('with shadow dom and fixed position ancestor', () => {
-    it('does not hang when checking visibility', () => {
+  describe('with shadow dom', () => {
+    // https://github.com/cypress-io/cypress/issues/7794
+    it('fixed position ancestor does not hang when checking visibility', () => {
       cy.visit('/fixtures/issue-7794.html')
       cy.get('.container-2').should('be.visible')
     })
+
+    it('non-visible ancestor causes element to not be visible', () => {
+      cy.visit('/fixtures/shadow-dom.html')
+      cy.get('.inside-non-visible', { includeShadowDom: true }).should('not.be.visible')
+    })
   })
 })
diff --git a/packages/driver/src/dom/document.ts b/packages/driver/src/dom/document.ts
index c7598669df7f..5e9bbbc61a02 100644
--- a/packages/driver/src/dom/document.ts
+++ b/packages/driver/src/dom/document.ts
@@ -4,13 +4,15 @@ const docNode = window.Node.DOCUMENT_NODE
 const docFragmentNode = window.Node.DOCUMENT_FRAGMENT_NODE
 
 //TODO: make this not allow jquery
-const isDocument = (obj: Node): obj is Document => {
+const isDocument = (obj: Node | JQuery): obj is Document => {
   try {
+    let node = obj as Node
+
     if ($jquery.isJquery(obj)) {
-      obj = obj[0]
+      node = obj[0]
     }
 
-    return obj?.nodeType === docNode || obj?.nodeType === docFragmentNode
+    return node?.nodeType === docNode || node?.nodeType === docFragmentNode
   } catch (error) {
     return false
   }
diff --git a/packages/driver/src/dom/transform.ts b/packages/driver/src/dom/transform.ts
index c7f6ba46e4e0..2724f52703a6 100644
--- a/packages/driver/src/dom/transform.ts
+++ b/packages/driver/src/dom/transform.ts
@@ -1,4 +1,5 @@
 import _ from 'lodash'
+import { getParent } from './elements'
 import { isDocument } from './document'
 
 export const detectVisibility = ($el: any) => {
@@ -39,7 +40,7 @@ const extractTransformInfoFromElements = ($el: any, list: TransformInfo[] = []):
     list.push(info)
   }
 
-  const $parent = $el.parent()
+  const $parent = getParent($el)
 
   if (!$parent.length || isDocument($parent)) {
     return list

From 2441c84aa9cb92451a99ca628b2ed2aa26888f33 Mon Sep 17 00:00:00 2001
From: Chris Breiding <chrisbreiding@gmail.com>
Date: Tue, 18 Aug 2020 10:19:32 -0400
Subject: [PATCH 4/5] fix implementation after merge

---
 packages/driver/src/cy/commands/traversals.js | 2 +-
 packages/driver/src/dom/elements.ts           | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/driver/src/cy/commands/traversals.js b/packages/driver/src/cy/commands/traversals.js
index 82e7145d4085..a0a1d2433095 100644
--- a/packages/driver/src/cy/commands/traversals.js
+++ b/packages/driver/src/cy/commands/traversals.js
@@ -49,7 +49,7 @@ const autoShadowTraversals = {
   },
   parent: (cy, $el) => {
     const parents = $el.map((i, el) => {
-      return $elements.getParent(el)
+      return $elements.getParentNode(el)
     })
 
     return sortedUnique(cy, parents)
diff --git a/packages/driver/src/dom/elements.ts b/packages/driver/src/dom/elements.ts
index 98538c8820f4..50c6ff7e003d 100644
--- a/packages/driver/src/dom/elements.ts
+++ b/packages/driver/src/dom/elements.ts
@@ -929,11 +929,11 @@ const getFirstFocusableEl = ($el: JQuery<HTMLElement>) => {
     return $el
   }
 
-  const parent = getParent($el)
+  const $parent = getParent($el)
 
   // if we have no parent then just return
   // the window since that can receive focus
-  if (!parent.length) {
+  if (!$parent.length) {
     const win = $window.getWindowByElement($el.get(0))
 
     return $(win)
@@ -1370,6 +1370,7 @@ export {
   getFirstStickyPositionParent,
   getFirstScrollableParent,
   getParent,
+  getParentNode,
   getAllParents,
   getShadowRoot,
 }

From f4a73eb90db2d65fe31a2ed74fb9c90454ab0fa9 Mon Sep 17 00:00:00 2001
From: Chris Breiding <chrisbreiding@gmail.com>
Date: Tue, 18 Aug 2020 10:19:40 -0400
Subject: [PATCH 5/5] fix test

---
 packages/driver/cypress/fixtures/shadow-dom.html           | 2 +-
 packages/driver/cypress/integration/e2e/visibility_spec.js | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/driver/cypress/fixtures/shadow-dom.html b/packages/driver/cypress/fixtures/shadow-dom.html
index 7a7d20f8092f..e2e4a4d28310 100644
--- a/packages/driver/cypress/fixtures/shadow-dom.html
+++ b/packages/driver/cypress/fixtures/shadow-dom.html
@@ -38,7 +38,7 @@
     <div class="focusable" tabindex="1">
       <cy-test-element innerClass="inside-focusable" content="Inside Focusable"></cy-test-element>
     </div>
-    <cy-test-element innerClass="inside-non-visible" content="Not Visible" style="transform-style: preserve-3d; backface-visibility: hidden; transform: rotateY(180deg);"></cy-test-element>
+    <cy-test-element id="shadow-element-10" innerClass="inside-non-visible" content="Not Visible" style="display:block; transform-style: preserve-3d; backface-visibility: hidden; transform: rotateY(180deg);"></cy-test-element>
 
     <script type="text/javascript">
       if (window.customElements) {
diff --git a/packages/driver/cypress/integration/e2e/visibility_spec.js b/packages/driver/cypress/integration/e2e/visibility_spec.js
index 9215cc9b4c2c..d9a036ca1e9e 100644
--- a/packages/driver/cypress/integration/e2e/visibility_spec.js
+++ b/packages/driver/cypress/integration/e2e/visibility_spec.js
@@ -36,9 +36,13 @@ describe('visibility', () => {
       cy.get('.container-2').should('be.visible')
     })
 
+    // TODO: move with tests added in this PR when it merges: https://github.com/cypress-io/cypress/pull/8166
     it('non-visible ancestor causes element to not be visible', () => {
       cy.visit('/fixtures/shadow-dom.html')
-      cy.get('.inside-non-visible', { includeShadowDom: true }).should('not.be.visible')
+      cy
+      .get('#shadow-element-10')
+      .find('.shadow-div', { includeShadowDom: true })
+      .should('not.be.visible')
     })
   })
 })