Tests - Remove experimental webkit tests

Author: smastrom

.github/workflows/safari.yml

@@ -1,4 +1,4 @@
-![npm](https://img.shields.io/npm/v/vue-use-fixed-header?color=46c119) ![dependency-count](https://img.shields.io/badge/dependencies-0-success) ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/smastrom/vue-use-fixed-header/chrome.yml?branch=main&label=chrome) ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/smastrom/vue-use-fixed-header/safari.yml?branch=main&label=safari) ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/smastrom/vue-use-fixed-header/firefox.yml?branch=main&label=firefox)
+![npm](https://img.shields.io/npm/v/vue-use-fixed-header?color=46c119) ![dependency-count](https://img.shields.io/badge/dependencies-0-success) ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/smastrom/vue-use-fixed-header/chrome.yml?branch=main&label=chrome) ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/smastrom/vue-use-fixed-header/firefox.yml?branch=main&label=firefox)
 
 # Vue Use Fixed Header
 

README.md

@@ -4,7 +4,6 @@ export default defineConfig({
    video: false,
    viewportWidth: 1280,
    viewportHeight: 720,
-   experimentalWebKitSupport: true,
    component: {
       devServer: {
          framework: 'vue',

cypress.config.ts

@@ -45,16 +45,11 @@ Cypress.Commands.add('resizeRoot', (newWidth: number) => {
 Cypress.Commands.add('scrollUp', () => cy.getScrollSubject().scrollTo('top', { duration: 300 }))
 
 Cypress.Commands.add('scrollDown', () =>
-   cy.getScrollSubject().scrollTo('bottom', { duration: 300 }),
+   cy.getScrollSubject().scrollTo('bottom', { duration: 300 })
 )
 
 Cypress.Commands.add('checkStyles', { prevSubject: 'element' }, (subject, styles) => {
    Object.entries(styles).forEach(([property, value]) => {
-      // Webkit removes the 0s delay specified in our styles
-      if (Cypress.isBrowser('webkit') && property === 'transition') {
-         value = value.replaceAll(' 0s', '')
-      }
-
       cy.wrap(subject).should('have.attr', 'style').and('include', `${property}: ${value}`)
    })
 })

cypress/support/commands.ts

@@ -49,10 +49,8 @@
       "test": "pnpm run test:chrome && pnpm run test:firefox && pnpm run test:container:chrome && pnpm run test:container:firefox",
       "test:chrome": "cypress run --component --browser chrome",
       "test:firefox": "cypress run --component --browser firefox",
-      "test:webkit": "cypress run --component --browser webkit",
       "test:container:chrome": "cypress run --component --browser chrome --env CONTAINER=\"custom\"",
       "test:container:firefox": "cypress run --component --browser firefox --env CONTAINER=\"custom\"",
-      "test:container:webkit": "cypress run --component --browser webkit --env CONTAINER=\"custom\"",
       "test:gui": "cypress open --component",
       "test:gui:container": "cypress open --component --env CONTAINER=\"custom\""
    },
@@ -62,7 +60,6 @@
       "cypress": "^13.5.1",
       "cypress-real-events": "^1.11.0",
       "cypress-wait-frames": "^0.9.4",
-      "playwright-webkit": "~1.39.0",
       "typescript": "^5.2.2",
       "vite": "^4.5.0",
       "vite-plugin-dts": "^3.6.3",

package.json

@@ -13,7 +13,7 @@ enum State {
 
 export function useFixedHeader(
    target: MaybeTemplateRef,
-   options: Partial<UseFixedHeaderOptions> = {},
+   options: Partial<UseFixedHeaderOptions> = {}
 ) {
    // Config
 
@@ -152,14 +152,13 @@ export function useFixedHeader(
    function onTransitionEnd(e: TransitionEvent) {
       removeTransitionListener()
 
-      if (!unref(target) || e.target !== unref(target)) return
+      if (!unref(target) || e.target !== unref(target) || e.propertyName !== 'transform') return
 
       /**
        * In some edge cases this might be called when the header
        * is visible, so we need to check the transform value.
        */
       const { transform } = window.getComputedStyle(unref(target)!)
-      // console.log('transform@transitionEnd', transform)
       if (transform === 'matrix(1, 0, 0, 1, 0, 0)') return // translateY(0px)
 
       setStyles({
@@ -289,7 +288,7 @@ export function useFixedHeader(
             removeStyles()
          })
       },
-      { immediate: true, flush: 'post' },
+      { immediate: true, flush: 'post' }
    )
 
    return {