blob: 063a97e7e9b852e216fb8ea17592851ae0497342 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html>
<meta charset=utf-8>
<title>COLRv1 font test: gradient color-stop edge cases</title>
<style>
@font-face {
font-family: CAhem;
src: url("CAhem.ttf");
}
.test { margin: 10px; padding: 10px; }
span { font: 100px/1 CAhem; }
.a { font-variation-settings: initial; }
.b { font-variation-settings: "COL1" 0.2, "COL3" -0.2; }
.c { font-variation-settings: "COL1" 0.4, "COL3" -0.4; }
.d { font-variation-settings: "COL1" 0.6, "COL3" -0.6; }
.e { font-variation-settings: "COL1" 0.8, "COL3" -0.8; }
</style>
<p>The middle of the five glyphs should be purely red and blue:</p>
<div class="test">
<span class="a">e</span> <span class="b">e</span> <span class="c">e</span> <span class="d">e</span> <span class="e">e</span><br>
</div>
<p>The middle of the five glyphs should not render anything:</p>
<div class="test">
<span class="a">f</span> <span class="b">f</span> <span class="c">f</span> <span class="d">f</span> <span class="e">f</span><br>
</div>
|
