tor-browser

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

2d.text.measure.strokeTextCluster-baseline.tentative.html (4310B)

      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-baseline.tentative-expected.html">
      6 <title>Canvas test: 2d.text.measure.strokeTextCluster-baseline.tentative</title>
      7 <h1>2d.text.measure.strokeTextCluster-baseline.tentative</h1>
      8 <p class="desc">Test that strokeTextCluster() correctly positions the text, taking into account the textBaseline from the context at the time the text was measured.</p>
      9 
     10 <div class="grid-container" style="--grid-width: 4">
     11 <span>
     12  <div>ctx_baseline_top</div>
     13  <canvas class="grid-cell-content" id="canvas0" width="180" height="43">
     14    <p class="fallback">FAIL (fallback content)</p>
     15  </canvas>
     16  <script type="module">
     17    const canvas = new OffscreenCanvas(180, 43);
     18    const ctx = canvas.getContext('2d');
     19 
     20    ctx.font = '20px serif';
     21    const text = 'Test ☺️ א';
     22    const x = 20;
     23    const y = canvas.height / 2;
     24 
     25    ctx.textBaseline = 'top';
     26    let tm = ctx.measureText(text);
     27    const clusters = tm.getTextClusters();
     28 
     29    // Rendering all clusters with the same (x, y) parameters must be
     30    // equivalent to a strokeText() call at (x, y).
     31    for (const cluster of clusters) {
     32        ctx.strokeTextCluster(cluster, x, y);
     33    }
     34 
     35    const outputCanvas = document.getElementById("canvas0");
     36    const outputCtx = outputCanvas.getContext('2d');
     37    outputCtx.drawImage(canvas, 0, 0);
     38  </script>
     39 </span>
     40 
     41 <span>
     42  <div>ctx_baseline_middle</div>
     43  <canvas class="grid-cell-content" id="canvas1" width="180" height="43">
     44    <p class="fallback">FAIL (fallback content)</p>
     45  </canvas>
     46  <script type="module">
     47    const canvas = new OffscreenCanvas(180, 43);
     48    const ctx = canvas.getContext('2d');
     49 
     50    ctx.font = '20px serif';
     51    const text = 'Test ☺️ א';
     52    const x = 20;
     53    const y = canvas.height / 2;
     54 
     55    ctx.textBaseline = 'middle';
     56    let tm = ctx.measureText(text);
     57    const clusters = tm.getTextClusters();
     58 
     59    // Rendering all clusters with the same (x, y) parameters must be
     60    // equivalent to a strokeText() call at (x, y).
     61    for (const cluster of clusters) {
     62        ctx.strokeTextCluster(cluster, x, y);
     63    }
     64 
     65    const outputCanvas = document.getElementById("canvas1");
     66    const outputCtx = outputCanvas.getContext('2d');
     67    outputCtx.drawImage(canvas, 0, 0);
     68  </script>
     69 </span>
     70 
     71 <span>
     72  <div>ctx_baseline_bottom</div>
     73  <canvas class="grid-cell-content" id="canvas2" width="180" height="43">
     74    <p class="fallback">FAIL (fallback content)</p>
     75  </canvas>
     76  <script type="module">
     77    const canvas = new OffscreenCanvas(180, 43);
     78    const ctx = canvas.getContext('2d');
     79 
     80    ctx.font = '20px serif';
     81    const text = 'Test ☺️ א';
     82    const x = 20;
     83    const y = canvas.height / 2;
     84 
     85    ctx.textBaseline = 'bottom';
     86    let tm = ctx.measureText(text);
     87    const clusters = tm.getTextClusters();
     88 
     89    // Rendering all clusters with the same (x, y) parameters must be
     90    // equivalent to a strokeText() call at (x, y).
     91    for (const cluster of clusters) {
     92        ctx.strokeTextCluster(cluster, x, y);
     93    }
     94 
     95    const outputCanvas = document.getElementById("canvas2");
     96    const outputCtx = outputCanvas.getContext('2d');
     97    outputCtx.drawImage(canvas, 0, 0);
     98  </script>
     99 </span>
    100 
    101 <span>
    102  <div>ctx_baseline_alphabetic</div>
    103  <canvas class="grid-cell-content" id="canvas3" width="180" height="43">
    104    <p class="fallback">FAIL (fallback content)</p>
    105  </canvas>
    106  <script type="module">
    107    const canvas = new OffscreenCanvas(180, 43);
    108    const ctx = canvas.getContext('2d');
    109 
    110    ctx.font = '20px serif';
    111    const text = 'Test ☺️ א';
    112    const x = 20;
    113    const y = canvas.height / 2;
    114 
    115    ctx.textBaseline = 'alphabetic';
    116    let tm = ctx.measureText(text);
    117    const clusters = tm.getTextClusters();
    118 
    119    // Rendering all clusters with the same (x, y) parameters must be
    120    // equivalent to a strokeText() call at (x, y).
    121    for (const cluster of clusters) {
    122        ctx.strokeTextCluster(cluster, x, y);
    123    }
    124 
    125    const outputCanvas = document.getElementById("canvas3");
    126    const outputCtx = outputCanvas.getContext('2d');
    127    outputCtx.drawImage(canvas, 0, 0);
    128  </script>
    129 </span>
    130 
    131 </div>