4 <title>COLRv1 font test: gradient color-stop edge cases
</title>
6 .ref { margin:
10px; padding:
10px; line-height:
0; }
7 span { display: inline-block; width:
100px; height:
100px; }
8 .A { background: linear-gradient(to right, rgb(
255,
0,
0)
10%, rgb(
0,
255,
0), rgb(
0,
0,
255)
90%); }
9 .B { background: linear-gradient(to right, rgb(
255,
0,
0)
30%, rgb(
0,
255,
0), rgb(
0,
0,
255)
70%); }
10 .C { background: linear-gradient(to right, rgb(
255,
0,
0)
50%, rgb(
0,
0,
255)
50%); }
11 .D { background: linear-gradient(to right, rgb(
0,
0,
255)
30%, rgb(
0,
255,
0), rgb(
255,
0,
0)
70%); }
12 .E { background: linear-gradient(to right, rgb(
0,
0,
255)
10%, rgb(
0,
255,
0), rgb(
255,
0,
0)
90%); }
13 .F { background: repeating-linear-gradient(to right, rgb(
255,
0,
0)
10%, rgb(
0,
255,
0), rgb(
0,
0,
255)
90%); }
14 .G { background: repeating-linear-gradient(to right, rgb(
255,
0,
0)
30%, rgb(
0,
255,
0), rgb(
0,
0,
255)
70%); }
15 .H { background: transparent; }
16 .I { background: repeating-linear-gradient(to right, rgb(
0,
0,
255)
30%, rgb(
0,
255,
0), rgb(
255,
0,
0)
70%); }
17 .J { background: repeating-linear-gradient(to right, rgb(
0,
0,
255)
10%, rgb(
0,
255,
0), rgb(
255,
0,
0)
90%); }
20 <p>The middle of the five glyphs should be purely red and blue:
</p>
21 <div class=
"ref"><span class=A
></span> <span class=B
></span> <span class=C
></span> <span class=D
></span> <span class=E
></span></div>
23 <p>The middle of the five glyphs should not render anything:
</p>
24 <div class=
"ref"><span class=F
></span> <span class=G
></span> <span class=H
></span> <span class=I
></span> <span class=J
></span></div>