Bug 171015 – WebKit rejects changes between similar unprefixed & prefixed gradient syntax

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Daniel Holbert]

STR:
Load https://people-mozilla.org/~dholbert/bugreports/webkit-linear-gradient/test1.html

EXPECTED RESULTS:
 Top two divs should look the same (and have orange at the top).
 Bottom two divs should look the same (and have blue at the top).

ACTUAL RESULTS:
The right two divs reject the dynamic style tweak - they have the gradient going in the wrong direction.

NOTES:
* The testcase is testing dynamic changes between "linear-gradient" and "-webkit-linear-gradient" expressions.  (Note that these syntaxes should point the gradient in *opposite directions* -- the prefixed version is implicitly "from" a given point, whereas the unprefixed version is "to" the given point.)

* The top 2 divs are both given unprefixed linear-gradient(to bottom, orange, blue), though the top-right div ("p2u") is first briefly given a prefixed style.  This seems to prevent it from accepting the change to the unprefixed style.

* Similar (but reverse) for the bottom 2 divs - they should both end up with prefixed -webkit-linear-gradient in their style attributes, with blue at the top in the rendering.


I'm guessing that the CSS Parser is mistakenly thinking that the new style is the same as the old style, and rejecting the style change.

Firefox Nightly 55 & Edge 14 both give "expected result".  Chrome 59 dev and Safari 10 give the buggy results.

[Daniel Holbert]

I reported this for Chromium/Blink, too, as https://bugs.chromium.org/p/chromium/issues/detail?id=713407

[Radar WebKit Bug Importer]

<rdar://problem/31722660>

[Radar WebKit Bug Importer]

<rdar://problem/31722659>

[Daniel Holbert]

FWIW, this was just fixed in Chromium[1], so WebKit is now the only engine affected.

[1] https://bugs.chromium.org/p/chromium/issues/detail?id=713407#c17

[Simon Fraser (smfr)]

Your test case doesn't load.

[Daniel Holbert]

Hi Simon! Yeah, sorry -- people.m.o was decommissioned (and then recommissioned with a different purpose).

The testcase is now available at https://dholbert.github.io/tests/misc/webkit-linear-gradient-dynamic-1.html , and I just confirmed that Safari 13 on Catalina is still affected.

[Daniel Holbert]

Created attachment 386805 [details]
testcase 1

Here's the testcase as an attachment, for archival purposes, so that this bug doesn't have to depend on an offsite host. (Sorry for not attaching it originally.)

[Simon Fraser (smfr)]

Created attachment 386917 [details]
Patch

[Dean Jackson]

Comment on attachment 386917 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=386917&action=review

> LayoutTests/fast/css/gradient-prefixed-unprefixed-toggle-expected.html:17
> +        var UNPREFIXED_STYLE = "linear-gradient(to bottom, orange, blue)";
> +        var PREFIXED_STYLE = "-webkit-linear-gradient(   bottom, orange, blue)";

const!!! :)

Also, why the space before bottom?

> LayoutTests/fast/css/gradient-prefixed-unprefixed-toggle-expected.html:28
> +            u.style.backgroundImage = UNPREFIXED_STYLE;
> +            u2p.style.backgroundImage = PREFIXED_STYLE;
> +
> +            p.style.backgroundImage = PREFIXED_STYLE;
> +            p2u.style.backgroundImage = UNPREFIXED_STYLE;

Wow. That's old school element access there.

[Ahmad Saleem]

I am not able to reproduce this bug using attached test case and in case where it mentions "Orange" on top that's where "Orange" is and also for "Blue" case and since it is working as intended in Safari Technology Preview 152 and Safari 15.6.1 and matching with other browsers (Chrome Canary 107 and Firefox Nightly 106).

I am going to mark this as "RESOLVED CONFIGURATION CHANGED". Thanks!

Please reopen, if this is not fixed and I closed it incorrectly and please attach updated test case. Thanks!

[Daniel Holbert]

Yeah, this does seem to be fixed for me. (I'm testing Safari 15.6.1, using the attached testcase.)

Thanks!