Linear filter not being applied to images on Stories

[adamdunnage]

Bug Description

Stories that have had a linear filter added to an image do not display that filter when previewing from the editor or on the published Story. This has been introduced in the 1.29.0 release as this can't be replicated on previous versions. All other filters seem to work and this only effects the linear filter.

This was first reported by a user in the support forum.

Linear image in the editor:

Linear image in preview:

Expected Behaviour

Steps to Reproduce

1. Create a new Story on version 1.29.0 of the plugin.
2. Add an image.
3. Apply the linear filter to the image.
4. Compare the image in the editor to the preview and published Story.

Screenshots

See above.

Additional Context

• Plugin Version: 1.29.0

[swissspidy]

Hmm I am not able to reproduce this right now.

Left image has a filter, the right one doesn't. Looks correct on the frontend.

Also works fine for background images.

[swissspidy]

OK I can see the issue on the QA site but not locally 🤔

[swissspidy]

The generated CSS should look like this:

background-image: linear-gradient(.5turn,rgba(0,0,0,0) 0%,rgba(0,0,0,.7) 100%

But it ends up being:

linear-gradient(.5 turn,rgba(0,0,0,0) 0%,rgba(0,0,0,.7) 100%

-linear-gradient(.5turn,rgba(0,0,0,0) 0%,rgba(0,0,0,.7) 100%
+linear-gradient(.5 turn,rgba(0,0,0,0) 0%,rgba(0,0,0,.7) 100%

Notice the space after .5

Don't know where that is coming from 🤔 Maybe the PHP-CSS-Parser or the AMP sanitization.

It's definitely saved correctly to the database, so definitely something that happens when serving.

[swissspidy]

So far unable to reproduce reliably unfortunately. It didn't work on our QA site yesterday, but today all seems fine. On the staging site it still doesn't seem to work though, but not sure why.

[swissspidy]

I've been able to track this down to AMP_Style_Sanitizer on our staging site, where this issue occurs. Does not happen with 'disable_style_processing' => true,

The issue does not happen for me locally though, makes debugging a bit cumbersome.

@westonruter Is this perhaps an issue you've seen in the past?

[westonruter]

Processing of the turn unit was broken in older versions of php-css-parser but it was fixed in MyIntervals/PHP-CSS-Parser#350. This is on master as of Dec 28, 2021 but is not in the most recent release which was 8.4.0 on Dec 21, 2021 (note: this is the latest tag, not the latest release). But you're using the version of php-css-parser in the most recent stable version of the AMP plugin, right?

[westonruter]

Is that CSS correct though? I tried looking at it on a non-AMP page and Chrome DevTools gave me a warning:

And I just checked in the W3C CSS Validator with this:

div {
    background-image: linear-gradient(.5turn,rgba(0,0,0,0) 0%,rgba(0,0,0,.7) 100%
}

And I got:

[westonruter]

Is there a missing closing parenthesis for the linear-gradient() function? If I add that missing ) then Chrome DevTools no longer gives me a warning:

And I see the gradient show up on an AMP page (and non-AMP page) as expected.

[swissspidy]

I don't think it's an issue with the PHP-CSS-Parser version, because the exact same version of the plugin seems to run fine on one site but not the other. No AMP plugin installed.

Regarding the validity, I simply forgot to paste the closing ).

The problem is the .5 turn vs .5turn.