initial

wp-content/plugins/visual-regression-tests/components/test-run-page/script.js

@@ -0,0 +1,50 @@
+class VrtsTestRunPage extends window.HTMLElement {
+	constructor() {
+		super();
+		this.bindFunctions();
+		this.bindEvents();
+		this.isScrolling = false;
+	}
+
+	bindFunctions() {
+		this.onScroll = this.onScroll.bind( this );
+		this.setOffset = this.setOffset.bind( this );
+	}
+
+	bindEvents() {
+		document.addEventListener( 'scroll', this.onScroll );
+	}
+
+	onScroll() {
+		if ( ! this.isScrolling ) {
+			this.isScrolling = true;
+			window.requestAnimationFrame( this.setOffset );
+		}
+	}
+
+	setOffset() {
+		const offset = Math.max( 0, this.offset - window.scrollY );
+
+		this.style.setProperty(
+			'--vrts-test-run-page-offset',
+			`${ offset }px`
+		);
+
+		this.isScrolling = false;
+	}
+
+	connectedCallback() {
+		const rect = this.getBoundingClientRect();
+		const adminBarHeight =
+			document.getElementById( 'wpadminbar' ).offsetHeight;
+		this.offset = rect.top + window.scrollY - adminBarHeight;
+
+		this.setOffset();
+	}
+
+	disconnectedCallback() {
+		document.removeEventListener( 'scroll', this.onScroll );
+	}
+}
+
+window.customElements.define( 'vrts-test-run-page', VrtsTestRunPage );