CSS @font-face src string allows invalid items

[hamishwillee]

The CSS @font-face at rule takes as a src a comma separate list of possible font descriptors. As per the spec here the parser is supposed to treat each item in the src separately, adding those that are valid and dropping those that are invalid or not supported. However a number of browser will drop the whole src string if any item is not understood.

• Firefox starts handling items properly from FF109.
• Chrome "somewhat" handles this properly in FF108. Specifically, even though they do not support tech() they will drop an item that uses tech() and not the whole string. However if you use another value like fred() they will drop the whole line. In other words, not a future proof implementation as new values are added, but works for the currently supported set.
• Safari doesn't want to display its developer tools for me, so I don't know - have put as false.

My test code is to run this in a console:

s = document.createElement("style");
document.body.appendChild(s);
s.textContent = "@font-face { font-family: x; src: url('x.woff2') format('woff2'),url('y.otf') format(opentype) fred(incremental); }";
let thingy = document.styleSheets[document.styleSheets.length-1].cssRules[0].cssText
thingy;

If the src is present in "thingy" then the string is parsed properly. This fails for chrome, but if you change fred to tech above you can see it works for that single (most important) case.

This comes out of discussion in w3c/csswg-drafts#7753 (comment)

FYI @queengooborg