| Summary: | Multiple keywords for tech() | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Oliver Williams <oliverwilliams345> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED FIXED | ||
| Severity: | Normal | CC: | vitor.roriz, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari Technology Preview | ||
| Hardware: | Unspecified | ||
| OS: | macOS 13 | ||
Thanks for reporting that. I think you are right. I've got confused by https://github.com/web-platform-tests/wpt/blob/0a2fec9de6/css/css-fonts/parsing/font-face-src-tech.html#L45 : >> // Unsupported technology (for example: no browser has incremental transfer yet), might be >> // dropped from the list, next component of the list should be accepted." The list here is probably referring to the `src list` and not the list of tech() arguments. Therefore we are currently validating it if we can handle at least one tech provided for a descriptor, instead of all of them. We are missing such a invalid test case in WPT, I'll add one and fix that. Pull request: https://github.com/WebKit/WebKit/pull/15697 Committed 266032@main (165f4f7106fc): <https://commits.webkit.org/266032@main> Reviewed commits have been landed. Closing PR #15697 and removing active labels. |
The following code works correctly in Safari and loads an OpenType-SVG font: @font-face { font-family: "ComicColor"; src: url("ComicColor-SVG.woff2") format(woff2) tech(color-SVG); } However, the following code should load the OpenType-SVG font in Safari but instead it loads the COLRv1 font (which Safari does not support). @font-face { font-family: "ComicColor"; src: url("ComicColor-COLRv1.woff2") format(woff2) tech(variations, color-COLRv1), url("ComicColor-SVG.woff2") format(woff2) tech(color-SVG); } From reading the spec, it seems that tech() is meant to accept a comma-seperated list of values. Is it this that is confusing Safari and getting it to load the wrong font? When I only use one value for tech() things work as they should: @font-face { font-family: "ComicColor"; src: url("ComicColor-COLRv1.woff2") format(woff2) tech(color-COLRv1), url("ComicColor-SVG.woff2") format(woff2) tech(color-SVG); }