tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

colrv1-05-ref.html (3078B)

      1 <!DOCTYPE html>
      2 <html>
      3 <meta charset=utf-8>
      4 <title>COLRv1 font test: compositing operators</title>
      5 <style>
      6 .ref { margin: 10px; padding: 10px; line-height: 0; font-size: 0; }
      7 span { display: inline-block; width: 100px; height: 100px; position: relative; }
      8 </style>
      9 
     10 <p>Some glyphs using PAINT_COMPOSITE:</p>
     11 <!-- using blocks to imitate the composited layers in CAhem.ttf -->
     12 <div class="ref">
     13  <span class=g>
     14    <div style="background: red; width: 70px; height: 70px; position: absolute; top: 0px; left: 0px;"></div>
     15    <div style="background: blue; width: 70px; height: 70px; position: absolute; bottom: 0px; right: 0px;"></div>
     16  </span>
     17  <span class=h>
     18    <div style="background: blue; width: 70px; height: 70px; position: absolute; bottom: 0px; right: 0px;"></div>
     19    <div style="background: red; width: 40px; height: 40px; position: absolute; top: 30px; left: 30px;"></div>
     20  </span>
     21  <span class=i>
     22    <div style="background: blue; width: 70px; height: 70px; position: absolute; bottom: 0px; right: 0px;"></div>
     23    <div style="background: white; width: 40px; height: 40px; position: absolute; top: 30px; left: 30px;"></div>
     24  </span>
     25  <span class=j>
     26    <div style="background: red; width: 40px; height: 40px; position: absolute; top: 30px; left: 30px;"></div>
     27  </span>
     28  <span class=k>
     29    <div style="background: red; width: 70px; height: 70px; position: absolute; top: 0px; left: 0px;"></div>
     30    <div style="background: blue; width: 70px; height: 70px; position: absolute; bottom: 0px; right: 0px;"></div>
     31    <div style="background: black; width: 40px; height: 40px; position: absolute; top: 30px; left: 30px;"></div>
     32  </span>
     33  <span class=l>
     34    <div style="background: red; width: 70px; height: 70px; position: absolute; top: 0px; left: 0px;"></div>
     35    <div style="background: blue; width: 70px; height: 70px; position: absolute; bottom: 0px; right: 0px;"></div>
     36    <div style="background: magenta; width: 40px; height: 40px; position: absolute; top: 30px; left: 30px;"></div>
     37  </span>
     38 </div>
     39 
     40 <p>And painting them to a canvas element:</p>
     41 <canvas id=c width=600 height=100></canvas>
     42 <script>
     43 ctx = c.getContext("2d");
     44 
     45 // glyph "g"
     46 ctx.fillStyle = "red";
     47 ctx.fillRect(0, 0, 70, 70);
     48 ctx.fillStyle = "blue";
     49 ctx.fillRect(30, 30, 70, 70);
     50 ctx.translate(100, 0);
     51 
     52 // glyph "h"
     53 ctx.fillStyle = "blue";
     54 ctx.fillRect(30, 30, 70, 70);
     55 ctx.fillStyle = "red";
     56 ctx.fillRect(30, 30, 40, 40);
     57 ctx.translate(100, 0);
     58 
     59 // glyph "i"
     60 ctx.fillStyle = "blue";
     61 ctx.fillRect(30, 30, 70, 70);
     62 ctx.fillStyle = "white";
     63 ctx.fillRect(30, 30, 40, 40);
     64 ctx.translate(100, 0);
     65 
     66 // glyph "j"
     67 ctx.fillStyle = "red";
     68 ctx.fillRect(30, 30, 40, 40);
     69 ctx.translate(100, 0);
     70 
     71 // glyph "k"
     72 ctx.fillStyle = "red";
     73 ctx.fillRect(0, 0, 70, 70);
     74 ctx.fillStyle = "blue";
     75 ctx.fillRect(30, 30, 70, 70);
     76 ctx.fillStyle = "black";
     77 ctx.fillRect(30, 30, 40, 40);
     78 ctx.translate(100, 0);
     79 
     80 // glyph "l"
     81 ctx.fillStyle = "red";
     82 ctx.fillRect(0, 0, 70, 70);
     83 ctx.fillStyle = "blue";
     84 ctx.fillRect(30, 30, 70, 70);
     85 ctx.fillStyle = "magenta";
     86 ctx.fillRect(30, 30, 40, 40);
     87 ctx.translate(100, 0);
     88 
     89 </script>