fix: issue with font flooding (#27860)

Author: ryanthemanuel

cli/CHANGELOG.md

@@ -7,6 +7,10 @@ _Released 09/19/2023 (PENDING)_
 
  - Introduces new layout for Runs page providing additional run information. Addresses [#27203](https://github.com/cypress-io/cypress/issues/27203).
 
+**Bugfixes:**
+
+- Fixed an issue where actionability checks trigger a flood of font requests. Removing the font requests has the potential to improve performance and removes clutter from Test Replay. Addressed in [#27860](https://github.com/cypress-io/cypress/pull/27860)
+
 ## 13.2.0
 
 _Released 09/12/2023_
@@ -17,7 +21,7 @@ _Released 09/12/2023_
 
 **Bugfixes:**
 
-- Edge cases where `cy.intercept()` would not properly intercept and asset response bodies would not properly be captured for test replay have been addressed. Addressed in [#27771](https://github.com/cypress-io/cypress/pull/27771).
+- Edge cases where `cy.intercept()` would not properly intercept and asset response bodies would not properly be captured for Test Replay have been addressed. Addressed in [#27771](https://github.com/cypress-io/cypress/pull/27771).
 - Fixed an issue where `enter`, `keyup`, and `space` events were not triggering `click` events properly in some versions of Firefox. Addressed in [#27715](https://github.com/cypress-io/cypress/pull/27715). 
 - Fixed a regression in `13.0.0` where tests using Basic Authorization can potentially hang indefinitely on chromium browsers. Addressed in [#27781](https://github.com/cypress-io/cypress/pull/27781).
 - Fixed a regression in `13.0.0` where component tests using an intercept that matches all requests can potentially hang indefinitely. Addressed in [#27788](https://github.com/cypress-io/cypress/pull/27788).
@@ -37,7 +41,7 @@ _Released 08/31/2023_
 **Bugfixes:**
 
 - Fixed a regression introduced in Cypress [13.0.0](#13-0-0) where the [Module API](https://docs.cypress.io/guides/guides/module-api), [`after:run`](https://docs.cypress.io/api/plugins/after-run-api), and  [`after:spec`](https://docs.cypress.io/api/plugins/after-spec-api) results did not include the `stats.skipped` field for each run result. Fixes [#27694](https://github.com/cypress-io/cypress/issues/27694). Addressed in [#27695](https://github.com/cypress-io/cypress/pull/27695).
-- Individual CDP errors that occur while capturing data for test replay will no longer prevent the entire run from being available. Addressed in [#27709](https://github.com/cypress-io/cypress/pull/27709).
+- Individual CDP errors that occur while capturing data for Test Replay will no longer prevent the entire run from being available. Addressed in [#27709](https://github.com/cypress-io/cypress/pull/27709).
 - Fixed an issue where the release date on the `v13` landing page was a day behind. Fixed in [#27711](https://github.com/cypress-io/cypress/pull/27711).
 - Fixed an issue where fatal protocol errors would leak between specs causing all subsequent specs to fail to upload protocol information. Fixed in [#27720](https://github.com/cypress-io/cypress/pull/27720)
 - Updated `plist` from `3.0.6` to `3.1.0` to address [CVE-2022-37616](https://github.com/advisories/GHSA-9pgh-qqpf-7wqj) and [CVE-2022-39353](https://github.com/advisories/GHSA-crh6-fp67-6883). Fixed in [#27710](https://github.com/cypress-io/cypress/pull/27710).

packages/driver/cypress/e2e/commands/actions/click.cy.js

@@ -1678,12 +1678,16 @@ describe('src/cy/commands/actions/click', () => {
         it('can scroll to and click elements in html with scroll-behavior: smooth', () => {
           cy.get('html').invoke('css', 'scrollBehavior', 'smooth')
           cy.get('#table tr:first').click()
+          // Validate that the scrollBehavior is still smooth even after the actionability fixes we do
+          cy.get('html').invoke('css', 'scrollBehavior').then((scrollBehavior) => expect(scrollBehavior).to.eq('smooth'))
         })
 
         // https://github.com/cypress-io/cypress/issues/3200
         it('can scroll to and click elements in ancestor element with scroll-behavior: smooth', () => {
           cy.get('#dom').invoke('css', 'scrollBehavior', 'smooth')
           cy.get('#table tr:first').click()
+          // Validate that the scrollBehavior is still smooth even after the actionability fixes we do
+          cy.get('#dom').invoke('css', 'scrollBehavior').then((scrollBehavior) => expect(scrollBehavior).to.eq('smooth'))
         })
       })
     })

packages/driver/cypress/e2e/dom/visibility.cy.ts

@@ -53,7 +53,7 @@ describe('src/cypress/dom/visibility', () => {
       expect(fn()).to.be.true
     })
 
-    it('returns false window and body > window height', () => {
+    it('returns false if window and body < window height', () => {
       cy.$$('body').html('<div>foo</div>')
 
       const win = cy.state('window')
@@ -65,6 +65,29 @@ describe('src/cypress/dom/visibility', () => {
       expect(fn()).to.be.false
     })
 
+    it('returns true if document element and body > window height', function () {
+      this.add('<div style="height: 1000px; width: 10px;" />')
+      const documentElement = Cypress.dom.wrap(cy.state('document').documentElement)
+
+      const fn = () => {
+        return dom.isScrollable(documentElement)
+      }
+
+      expect(fn()).to.be.true
+    })
+
+    it('returns false if document element and body < window height', () => {
+      cy.$$('body').html('<div>foo</div>')
+
+      const documentElement = Cypress.dom.wrap(cy.state('document').documentElement)
+
+      const fn = () => {
+        return dom.isScrollable(documentElement)
+      }
+
+      expect(fn()).to.be.false
+    })
+
     it('returns false el is not scrollable', function () {
       const noScroll = this.add(`\
 <div style="height: 100px; overflow: auto;">

packages/driver/src/cy/actionability.ts

@@ -8,6 +8,7 @@ import $utils from './../cypress/utils'
 import type { ElWindowPostion, ElViewportPostion, ElementPositioning } from '../dom/coordinates'
 import $elements from '../dom/elements'
 import $errUtils from '../cypress/error_utils'
+import { callNativeMethod, getNativeProp } from '../dom/elements/nativeProps'
 const debug = debugFn('cypress:driver:actionability')
 
 const delay = 50
@@ -460,24 +461,46 @@ const verify = function (cy, $el, config, options, callbacks: VerifyCallbacks) {
   // make scrolling occur instantly. we do this by adding a style tag
   // and then removing it after we finish scrolling
   // https://github.com/cypress-io/cypress/issues/3200
-  const addScrollBehaviorFix = () => {
-    let style
+  const addScrollBehaviorFix = (element: JQuery<HTMLElement>) => {
+    const affectedParents: Map<HTMLElement, string> = new Map()
 
     try {
-      const doc = $el.get(0).ownerDocument
+      let parent: JQuery<HTMLElement> | null = element
 
-      style = doc.createElement('style')
-      style.innerHTML = '* { scroll-behavior: inherit !important; }'
-      // there's guaranteed to be a <script> tag, so that's the safest thing
-      // to query for and add the style tag after
-      doc.querySelector('script').after(style)
+      do {
+        if ($dom.isScrollable(parent)) {
+          const parentElement = parent[0]
+          const style = getNativeProp(parentElement, 'style')
+          const styles = getComputedStyle(parentElement)
+
+          if (styles.scrollBehavior === 'smooth') {
+            affectedParents.set(parentElement, callNativeMethod(style, 'getStyleProperty', 'scroll-behavior'))
+            callNativeMethod(style, 'setStyleProperty', 'scroll-behavior', 'auto')
+          }
+        }
+
+        parent = $dom.getFirstScrollableParent(parent)
+      } while (parent)
     } catch (err) {
       // the above shouldn't error, but out of an abundance of caution, we
       // ignore any errors since this fix isn't worth failing the test over
     }
 
     return () => {
-      if (style) style.remove()
+      for (const [parent, value] of affectedParents) {
+        const style = getNativeProp(parent, 'style')
+
+        if (value === '') {
+          if (callNativeMethod(style, 'getStyleProperty', 'length') === 1) {
+            callNativeMethod(parent, 'removeAttribute', 'style')
+          } else {
+            callNativeMethod(style, 'removeProperty', 'scroll-behavior')
+          }
+        } else {
+          callNativeMethod(style, 'setStyleProperty', 'scroll-behavior', value)
+        }
+      }
+      affectedParents.clear()
     }
   }
 
@@ -500,8 +523,7 @@ const verify = function (cy, $el, config, options, callbacks: VerifyCallbacks) {
         if (options.scrollBehavior !== false) {
           // scroll the element into view
           const scrollBehavior = scrollBehaviorOptionsMap[options.scrollBehavior]
-
-          const removeScrollBehaviorFix = addScrollBehaviorFix()
+          const removeScrollBehaviorFix = addScrollBehaviorFix($el)
 
           debug('scrollIntoView:', $el[0])
           $el.get(0).scrollIntoView({ block: scrollBehavior })

packages/driver/src/dom/elements/complexElements.ts

@@ -290,6 +290,12 @@ export const isScrollable = ($el) => {
     return false
   }
 
+  const documentElement = $document.getDocumentFromElement(el).documentElement
+
+  if (el === documentElement) {
+    return checkDocumentElement($window.getWindowByElement(el), el)
+  }
+
   // if we're any other element, we do some css calculations
   // to see that the overflow is correct and the scroll
   // area is larger than the actual height or width

packages/driver/src/dom/elements/nativeProps.ts

@@ -207,6 +207,7 @@ const nativeGetters = {
   body: descriptor('Document', 'body').get,
   frameElement: Object.getOwnPropertyDescriptor(window, 'frameElement')!.get,
   maxLength: _getMaxLength,
+  style: descriptor('HTMLElement', 'style').get,
 }
 
 const nativeSetters = {
@@ -224,12 +225,16 @@ const nativeMethods = {
   execCommand: window.document.execCommand,
   getAttribute: window.Element.prototype.getAttribute,
   setAttribute: window.Element.prototype.setAttribute,
+  removeAttribute: window.Element.prototype.removeAttribute,
   setSelectionRange: _nativeSetSelectionRange,
   modify: window.Selection.prototype.modify,
   focus: _nativeFocus,
   hasFocus: window.document.hasFocus,
   blur: _nativeBlur,
   select: _nativeSelect,
+  getStyleProperty: window.CSSStyleDeclaration.prototype.getPropertyValue,
+  setStyleProperty: window.CSSStyleDeclaration.prototype.setProperty,
+  removeStyleProperty: window.CSSStyleDeclaration.prototype.removeProperty,
 }
 
 export const getNativeProp = function<T, K extends keyof T> (obj: T, prop: K): T[K] {