blob: db9f04784d70955b2c2d4db7420e6fec99c51709 (
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPE html>
<html>
<meta charset=utf-8>
<title>COLRv1 font test: linear gradient with degenerate color line</title>
<style>
@font-face {
font-family: CAhem;
src: url("CAhem.ttf");
}
div div { width: 50px; height: 50px; }
span { display: inline-block; height: 50px; }
.blue { background: blue; }
.red { background: red; }
div:nth-child(1) .red { width: 0px }
div:nth-child(1) .blue { width: 50px }
div:nth-child(2) .red { width: 5px }
div:nth-child(2) .blue { width: 45px }
div:nth-child(3) .red { width: 10px }
div:nth-child(3) .blue { width: 40px }
div:nth-child(4) .red { width: 15px }
div:nth-child(4) .blue { width: 35px }
div:nth-child(5) .red { width: 20px }
div:nth-child(5) .blue { width: 30px }
div:nth-child(6) .red { width: 25px }
div:nth-child(6) .blue { width: 25px }
div:nth-child(7) .red { width: 30px }
div:nth-child(7) .blue { width: 20px }
div:nth-child(8) .red { width: 35px }
div:nth-child(8) .blue { width: 15px }
div:nth-child(9) .red { width: 40px }
div:nth-child(9) .blue { width: 10px }
</style>
<div>
<div><span class=red></span><span class=blue></span></div>
<div><span class=red></span><span class=blue></span></div>
<div><span class=red></span><span class=blue></span></div>
<div><span class=red></span><span class=blue></span></div>
<div><span class=red></span><span class=blue></span></div>
<div><span class=red></span><span class=blue></span></div>
<div><span class=red></span><span class=blue></span></div>
<div><span class=red></span><span class=blue></span></div>
<div><span class=red></span><span class=blue></span></div>
</div>
|
