PHP CSS Parser fails to parse turn CSS unit

[westonruter]

Bug Description

The PHP CSS Parser is failing to parse the CSS units vmin and vmax, inserting spaces so they become vm in and vm ax.

Similarly, the turn unit is also corrupted but in a different way: 1turn gets serialized out as 1 turn which is a syntax error.

Originally reported in the support forum.

Expected Behaviour

All CSS units should be preserved.

Steps to reproduce

Add this HTML to a Custom HTML block:

<div id="box">
I should be 20vmin×20vmax in size (and be spinning)!
</div>
<style>
#box {
  width: 20vmin;
  height: 20vmax;
  border: solid 1px red;
  background-color: gray;
  animation: spin 12s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
</style>

Compare the AMP with the non-AMP version. The non-AMP version appears as a box and spins:

Whereas the AMP does not (and no animation appears):

Update: In develop it the element now appears as a box. The vmax and vmin units were fixed with #4610.

The PHP CSS Parser incorrectly is injecting spaces into the units:

@keyframes spin{
  to {
    transform: rotate(1 turn)
  }
}

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

• Submitting a patch to fix the PHP-CSS-Parser will likely be required.
• Extend any regexes used for units, or rather put vmin and vmax first before vm.
• Add support for turn unit.
• See https://github.com/sabberworm/PHP-CSS-Parser/blob/841f69742e23eceff24a4d55f3d9d8a63e753eac/lib/Sabberworm/CSS/Value/Size.php#L9

QA testing instructions

Demo

Changelog entry

[raxbg]

Hey @westonruter

The issue is already resolved in master - MyIntervals/PHP-CSS-Parser@c4509f5

In fact many issues have been resolved since the last release and master can be considered stable.

Hope this helps.

[westonruter]

@raxbg Thanks for the note.

For reference, in 1.5 branch it is broken:

We did actually update to master in #4610 and you can see this is now working for the vmax and vmin units in the develop branch:

However the turn unit is still not working. The example is not spinning. The @keyframes is still coming through as:

@keyframes spin{to{transform:rotate(1 turn)}}

It should rather be 1turn.

[pierlon]

Filed MyIntervals/PHP-CSS-Parser#193 to fix this.

[westonruter]

QA Passed

The turn unit is preserved:

Also in a Web Story context: