tor-browser

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

2d.text.measure.strokeTextCluster-drawing-styles-change.tentative.html (3945B)

      1 <!DOCTYPE html>
      2 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
      3 <meta charset="UTF-8">
      4 <link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
      5 <link rel="match" href="2d.text.measure.strokeTextCluster-drawing-styles-change.tentative-expected.html">
      6 <title>Canvas test: 2d.text.measure.strokeTextCluster-drawing-styles-change.tentative</title>
      7 <h1>2d.text.measure.strokeTextCluster-drawing-styles-change.tentative</h1>
      8 <p class="desc">Test that strokeTextCluster() renders using the drawing styles as they were when `ctx.measureText()` was called, regardless of any changes in the context since.</p>
      9 
     10 <div class="grid-container" style="--grid-width: 2">
     11 <span>
     12  <div>letter_spacing</div>
     13  <canvas class="grid-cell-content" id="canvas0" width="250" height="80">
     14    <p class="fallback">FAIL (fallback content)</p>
     15  </canvas>
     16  <script type="module">
     17    const canvas = new OffscreenCanvas(250, 80);
     18    const ctx = canvas.getContext('2d');
     19 
     20    ctx.font = '20px serif';
     21    const text = 'Test ♦️ find';
     22 
     23    ctx.letterSpacing = '2px';
     24 
     25    let tm = ctx.measureText(text);
     26    const clusters = tm.getTextClusters();
     27 
     28    ctx.letterSpacing = '6px';
     29 
     30    for (const cluster of clusters) {
     31        ctx.strokeTextCluster(cluster, 10, 25);
     32    }
     33 
     34    ctx.strokeText(text, 10, 50);
     35 
     36    const outputCanvas = document.getElementById("canvas0");
     37    const outputCtx = outputCanvas.getContext('2d');
     38    outputCtx.drawImage(canvas, 0, 0);
     39  </script>
     40 </span>
     41 
     42 <span>
     43  <div>word_spacing</div>
     44  <canvas class="grid-cell-content" id="canvas1" width="250" height="80">
     45    <p class="fallback">FAIL (fallback content)</p>
     46  </canvas>
     47  <script type="module">
     48    const canvas = new OffscreenCanvas(250, 80);
     49    const ctx = canvas.getContext('2d');
     50 
     51    ctx.font = '20px serif';
     52    const text = 'Test ♦️ find';
     53 
     54    ctx.wordSpacing = '2px';
     55 
     56    let tm = ctx.measureText(text);
     57    const clusters = tm.getTextClusters();
     58 
     59    ctx.wordSpacing = '10px';
     60 
     61    for (const cluster of clusters) {
     62        ctx.strokeTextCluster(cluster, 10, 25);
     63    }
     64 
     65    ctx.strokeText(text, 10, 50);
     66 
     67    const outputCanvas = document.getElementById("canvas1");
     68    const outputCtx = outputCanvas.getContext('2d');
     69    outputCtx.drawImage(canvas, 0, 0);
     70  </script>
     71 </span>
     72 
     73 <span>
     74  <div>font_kerning</div>
     75  <canvas class="grid-cell-content" id="canvas2" width="250" height="80">
     76    <p class="fallback">FAIL (fallback content)</p>
     77  </canvas>
     78  <script type="module">
     79    const canvas = new OffscreenCanvas(250, 80);
     80    const ctx = canvas.getContext('2d');
     81 
     82    ctx.font = '20px serif';
     83    const text = 'Test ♦️ find';
     84 
     85    ctx.fontKerning = 'none';
     86 
     87    let tm = ctx.measureText(text);
     88    const clusters = tm.getTextClusters();
     89 
     90    ctx.fontKerning = 'normal';
     91 
     92    for (const cluster of clusters) {
     93        ctx.strokeTextCluster(cluster, 10, 25);
     94    }
     95 
     96    ctx.strokeText(text, 10, 50);
     97 
     98    const outputCanvas = document.getElementById("canvas2");
     99    const outputCtx = outputCanvas.getContext('2d');
    100    outputCtx.drawImage(canvas, 0, 0);
    101  </script>
    102 </span>
    103 
    104 <span>
    105  <div>font_variant_caps</div>
    106  <canvas class="grid-cell-content" id="canvas3" width="250" height="80">
    107    <p class="fallback">FAIL (fallback content)</p>
    108  </canvas>
    109  <script type="module">
    110    const canvas = new OffscreenCanvas(250, 80);
    111    const ctx = canvas.getContext('2d');
    112 
    113    ctx.font = '20px serif';
    114    const text = 'Test ♦️ find';
    115 
    116    ctx.fontVariantCaps = 'small-caps';
    117 
    118    let tm = ctx.measureText(text);
    119    const clusters = tm.getTextClusters();
    120 
    121    ctx.fontVariantCaps = 'all-small-caps';
    122 
    123    for (const cluster of clusters) {
    124        ctx.strokeTextCluster(cluster, 10, 25);
    125    }
    126 
    127    ctx.strokeText(text, 10, 50);
    128 
    129    const outputCanvas = document.getElementById("canvas3");
    130    const outputCtx = outputCanvas.getContext('2d');
    131    outputCtx.drawImage(canvas, 0, 0);
    132  </script>
    133 </span>
    134 
    135 </div>