UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

Steps to reproduce the problem:
1. In the console, create a div and set its styles via cssText:

>>> var div = document.createElement('div')
>>> div.style.cssText = 'font-family: sans-serif; font-size: 12px; font-stretch: 100%; font-style: italic; font-variant: small-caps; font-weight: 400; line-height: 200%;';
>>> div

2. This results in:

<div style="font: italic small-caps 400 100% 12px/200% sans-serif;"></div>

3. Note how all the font-* properties have been joined into a single shorthand font property.

4. This value is invalid and the <div> doesn't get any font styling applied.

5. If you right-click the <div> in the console and select 'Reveal in Element panel', you will see the style is shown with a line through and an error triangle. 

What is the expected behavior?
The verbose CSS font properties should not be combined into an invalid shorthand font property.

What went wrong?
The problem appears to be with font-stretch being specified as a percentage.

If you retry the above, but specify a keyword value (condensed, normal, expanded, etc), then a valid font shorthand is produced.

I assume percentage font-stretches cannot be used in the shorthand as they will be ambiguous with font-size, which could also be a percentage.

Did this work before? N/A 

Chrome version: 67.0.3396.99  Channel: n/a
OS Version: 
Flash Version: