[css-syntax] Serialization rules need to account for '%'

[emilio]

https://drafts.csswg.org/css-syntax/#serialization has a nice table after:

For any consecutive pair of tokens, if the first token shows up in the row headings of the following table, and the second token shows up in the column headings, and there’s a ✗ in the cell denoted by the intersection of the chosen row and column, the pair of tokens must be serialized with a comment between them.

That table is not correct, since it doesn't account for the % delimiter (which note, is different from a percentage token). Firefox implements this table to the letter which means something like the following incorrectly works in Firefox:

data:text/html,<div style="--x: 20; width: var(--x)%; height: 50px; background: green"></div>

cc @SimonSapin @tabatkins

[tabatkins]

Tested in web-platform-tests/wpt@dacb519