4 <title>COLRv1 font test: radial gradient variations
</title>
11 span { font:
120px/
1 CAhem; }
12 .a { font-variation-settings:
"GRX0" 500,
"GRR0" 50,
"GRX1" 900,
"GRR1" 150,
"COL1" 0,
"COL2" 0.5,
"COL3" 1.0; }
13 .e1 { font-variation-settings:
"GRX0" 700,
"GRR0" 100,
"GRX1" 1000,
"GRR1" 175,
"COL1" 2.0,
"COL2" 2.0,
"COL3" 1.99; }
14 .f { font-variation-settings:
"GRX0" 500,
"GRR0" 50,
"GRX1" 900,
"GRR1" 150,
"COL1" 0.5,
"COL2" 1.0,
"COL3" 1.5; }
15 .g { font-variation-settings:
"GRX0" 500,
"GRR0" 50,
"GRX1" 900,
"GRR1" 150,
"COL1" 0,
"COL2" 1.0,
"COL3" 1.0; }
18 <p>All four lines should show the same set of gradients:
</p>
20 <div><span class=a
>@#$
</div>
21 <div><span class=a
>@#$
</div>
22 <div><span class=a
>@#$
</div>
23 <div><span class=a
>@#$
</div>
26 <p>Same again, but the leftmost gradient should be solid blue:
</p>
28 <div><span class=a
><span class=e1
>@
</span>#$
</div>
31 <p>And with the gradients shifted a half-cycle to the right:
</p>
33 <div><span class=f
><span class=e1
>@
</span>#$
</div>
36 <p>Left glyph is solid blue; no blue in the repeating gradients:
</p>
38 <div><span class=g
><span class=e1
>@
</span>#$
</div>