Make x-transition delay syntax consistent with duration syntax

[trych]

Hey there,

I noticed that with x-transition.duration it was possible to use a x-transition.duration.500ms syntax as well as x-transition.duration.500 (as also noted in the source code). For x-transition.delay only the ms syntax was possible. This PR makes the delay syntax consistent with the duration syntax, so both work with or without the ms suffix.

@joshhanley Re-opened this as a new PR, as requested this time not from the main branch. I also added tests, although this was my first time using cypress, so I would be happy if someone could take a quick look at them. They pass with the new syntax and would fail if I would try them on some nonsense syntax like x-transition.delay.500foo, so I think they should successfully check for the new functionality.

[joshhanley]

@trych great, thanks!

Will have a look in detail next time I'm reviewing PR's but having a quick look, test all looks ok 🙂

Can you confirm why the implementation converts to seconds? Is that the same way transition.duration handles it?

[trych]

Can you confirm why the implementation converts to seconds? Is that the same way transition.duration handles it?

Yes, I just replicated exactly the way that transition.duration handles it, you can see the duration property two lines below the delay. Why the transition duration was converted to seconds, I do not know, it might be related to this part of the file that adresses a Safari issue:

// Note: Safari's transitionDuration property will list out comma separated transition durations
// for every single transition property. Let's grab the first one and call it a day.
let duration = Number(getComputedStyle(el).transitionDuration.replace(/,.*/, '').replace('s', '')) * 1000
let delay = Number(getComputedStyle(el).transitionDelay.replace(/,.*/, '').replace('s', '')) * 1000

Anyway, I assumed there must be a reason for it, so I just exactly replicated the transition duration way.

[joshhanley]

@trych ah yep, makes sense, thanks!

[calebporzio]

Thank you!