@font-palette-values CSS apparently not supported #83
Description
Describe the bug
@font-palette-values has been supported in Safari since v15.4 (https://caniuse.com/css-font-palette). But I'm unable to get palettes to work with imgkit.
To Reproduce
Steps to reproduce the behavior:
- Write the following simple script
import imgkit
options = {
"enable-local-file-access": None
}
imgkit.from_file('index.html', 'out.jpg', options=options)
- Create the necessary index.html for the script to ingest
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="grays"> abcde </h1>
<h1 class="purples"> abcde </h1>
<h1 class="mint"> abcde </h1>
</body>
</html>
- Then, the CSS:
@font-face {
font-family: 'Rocher';
src: url('./RocherColorGX.ttf');
}
body {
font-family: 'Rocher';
text-align: center;
font-size: 50px;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
margin: 0;
}
@font-palette-values --Grays {
font-family: Rocher;
base-palette: 9;
}
@font-palette-values --Purples {
font-family: Rocher;
base-palette: 6;
}
@font-palette-values --Mint {
font-family: Rocher;
base-palette: 7;
}
.grays {
font-palette: --Grays;
}
.purples {
font-palette: --Purples;
}
.mint {
font-palette: --Mint;
}
- Lastly, download the RocherColorGX.ttf font file from here: https://www.harbortype.com/fonts/rocher-color/ and include it in your folder so the CSS can find it.
- Run your script and observe the output file has the proper font, but not proper palette.
Expected behavior
See screenshot #1 below
Screenshots
If applicable, add screenshots to help explain your problem.
This is the expected result (see codepen here: https://codepen.io/cssgrid/pen/BaYKdeM)
This is the actual result using the above repro steps:
Additional context
I'm not sure why this isn't working. The font works, but the @font-color-palettes attribute doesn't. Is imgkit using the latest QT WebKit? Is QT WebKit using the latest WebKit version?