colrv1-08-ref.html

Enable keyboard shortcuts

<!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>