hsl doesn't behave the same way in Edge as in Chrome

[lionleaf]

This breaks some dweets in Edge, for instance https://www.dwitter.net/d/9098

Maybe another Edge-fix to deal with this?

Thanks to u/mvs202 for raising this! He believes it is the 4th parameter of hsl not behaving properly in Edge, and automatically changing it to hsla might be a fix.

[joeytwiddle]

I guess that would need to be some setters added to the canvas (with defineProperty), intercepting assignments to fillStyle and strokeStyle.

Are there any other properties we would need to intercept? ...CSS...? Here is one: shadowColor

So far there are three shortcuts that work in Chrome and Firefox but not everywhere:

# Dropping the ')'

hsl(1,20%,30%     ->  hsl(1,20%,30%)

# Dropping the 'a' but still passing a fourth argument

hsl(4,30%,20%,.1  ->  hsla(4,30%,20%,.1)

# Dropping the ','s

hsl(4 30%20%      ->  hsl(4,30%,20%)

To fix for everyone, we would need to efficiently detect each of those shortcuts, and convert to the full version.

---

Test dweets:

https://www.dwitter.net/d/9170
The bottom-right square combines the first two shortcuts. That fails on iOS Safari, Edge and Linux Chromium 64.0

https://www.dwitter.net/d/9161
Uses the third shorcut. The sphere appears black on Linux Chromium 64.0 and 65.0