fix(cy): serialize resize observer calls

Prevent crashes in Chrome due to the resize observer warnings.

See cypress-io/cypress#27415 (comment)

Signed-off-by: Max <[email protected]>

cypress/support/ResizeObserverPolyfill.js

@@ -0,0 +1,43 @@
+// store real observer
+const RealResizeObserver = ResizeObserver;
+
+let queueFlushTimeout;
+let queue = [];
+
+/**
+ * ResizeObserver wrapper with "enforced batches"
+ */
+export default class ResizeObserverPolyfill {
+	constructor(callback) {
+		this.callback = callback;
+		this.observer = new RealResizeObserver(this.check.bind(this));
+	}
+
+	observe(element) {
+		this.observer.observe(element);
+	}
+
+	unobserve(element) {
+		this.observer.unobserve(element);
+	}
+
+	disconnect() {
+		this.observer.disconnect();
+	}
+
+	check(entries) {
+		// remove previous invocations of "self"
+		queue = queue.filter((x) => x.cb !== this.callback);
+		// put a new one
+		queue.push({ cb: this.callback, args: entries });
+		// trigger update
+		if (!queueFlushTimeout) {
+			queueFlushTimeout = requestAnimationFrame(() => {
+				queueFlushTimeout = undefined;
+				const q = queue;
+				queue = [];
+				q.forEach(({ cb, args }) => cb(args));
+			}, 0);
+		}
+	}
+}

cypress/support/e2e.js

@@ -8,6 +8,7 @@
 import './commands.js'
 import './sessions.js'
 import chaiExtension from './chai.js'
+import ResizeObserverPolyfill from './ResizeObserverPolyfill.js'
 
 beforeEach(() => {
 	cy.intercept('GET', '**/preview-service-worker.js', { fixture: 'preview-service-worker.txt' })
@@ -17,6 +18,7 @@ Cypress.on('window:before:load', (win) => {
 	// disable service workers
 	// eslint-disable-next-line
 	delete win.navigator.ServiceWorker
+	win.ResizeObserver = ResizeObserverPolyfill
 })
 
 before(() => {