tor-browser

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

2d.text.measure.fillTextCluster-align.tentative.w.html (5136B)

      1 <!DOCTYPE html>
      2 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
      3 <meta charset="UTF-8">
      4 <html class="reftest-wait">
      5 <link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
      6 <link rel="match" href="2d.text.measure.fillTextCluster-align.tentative-expected.html">
      7 <title>Canvas test: 2d.text.measure.fillTextCluster-align.tentative</title>
      8 <h1>2d.text.measure.fillTextCluster-align.tentative</h1>
      9 <p class="desc">Test that fillTextCluster() correctly positions the text, taking into account the textAlign from the context at the time the text was measured.</p>
     10 <script>pending_tests = 3;</script>
     11 
     12 <div class="grid-container" style="--grid-width: 3">
     13 <span>
     14  <div>ctx_align_left</div>
     15  <canvas class="grid-cell-content" id="canvas0" width="250" height="43">
     16    <p class="fallback">FAIL (fallback content)</p>
     17  </canvas>
     18  <script id="myWorker0" type="text/worker">
     19    self.onmessage = function(e) {
     20      const canvas = new OffscreenCanvas(250, 43);
     21      const ctx = canvas.getContext('2d');
     22 
     23      ctx.font = '20px serif';
     24      const text = 'Test ☺️ א';
     25      const x = canvas.width / 2;
     26      const y = canvas.height / 2;
     27 
     28      ctx.textAlign = 'left';
     29      let tm = ctx.measureText(text);
     30      const clusters = tm.getTextClusters();
     31 
     32      // Rendering all clusters with the same (x, y) parameters must be
     33      // equivalent to a fillText() call at (x, y).
     34      for (const cluster of clusters) {
     35          ctx.fillTextCluster(cluster, x, y);
     36      }
     37 
     38      const bitmap = canvas.transferToImageBitmap();
     39      self.postMessage(bitmap, bitmap);
     40    };
     41  </script>
     42  <script type="module">
     43    const blob = new Blob([document.getElementById('myWorker0').textContent]);
     44    const worker = new Worker(URL.createObjectURL(blob));
     45    worker.addEventListener('message', msg => {
     46      const outputCanvas = document.getElementById('canvas0');
     47      const outputCtx = outputCanvas.getContext('2d');
     48      outputCtx.drawImage(msg.data, 0, 0);
     49      if (--pending_tests == 0) {
     50        document.documentElement.classList.remove('reftest-wait');
     51      }
     52    });
     53    worker.postMessage(null);
     54  </script>
     55 </span>
     56 
     57 <span>
     58  <div>ctx_align_center</div>
     59  <canvas class="grid-cell-content" id="canvas1" width="250" height="43">
     60    <p class="fallback">FAIL (fallback content)</p>
     61  </canvas>
     62  <script id="myWorker1" type="text/worker">
     63    self.onmessage = function(e) {
     64      const canvas = new OffscreenCanvas(250, 43);
     65      const ctx = canvas.getContext('2d');
     66 
     67      ctx.font = '20px serif';
     68      const text = 'Test ☺️ א';
     69      const x = canvas.width / 2;
     70      const y = canvas.height / 2;
     71 
     72      ctx.textAlign = 'center';
     73      let tm = ctx.measureText(text);
     74      const clusters = tm.getTextClusters();
     75 
     76      // Rendering all clusters with the same (x, y) parameters must be
     77      // equivalent to a fillText() call at (x, y).
     78      for (const cluster of clusters) {
     79          ctx.fillTextCluster(cluster, x, y);
     80      }
     81 
     82      const bitmap = canvas.transferToImageBitmap();
     83      self.postMessage(bitmap, bitmap);
     84    };
     85  </script>
     86  <script type="module">
     87    const blob = new Blob([document.getElementById('myWorker1').textContent]);
     88    const worker = new Worker(URL.createObjectURL(blob));
     89    worker.addEventListener('message', msg => {
     90      const outputCanvas = document.getElementById('canvas1');
     91      const outputCtx = outputCanvas.getContext('2d');
     92      outputCtx.drawImage(msg.data, 0, 0);
     93      if (--pending_tests == 0) {
     94        document.documentElement.classList.remove('reftest-wait');
     95      }
     96    });
     97    worker.postMessage(null);
     98  </script>
     99 </span>
    100 
    101 <span>
    102  <div>ctx_align_right</div>
    103  <canvas class="grid-cell-content" id="canvas2" width="250" height="43">
    104    <p class="fallback">FAIL (fallback content)</p>
    105  </canvas>
    106  <script id="myWorker2" type="text/worker">
    107    self.onmessage = function(e) {
    108      const canvas = new OffscreenCanvas(250, 43);
    109      const ctx = canvas.getContext('2d');
    110 
    111      ctx.font = '20px serif';
    112      const text = 'Test ☺️ א';
    113      const x = canvas.width / 2;
    114      const y = canvas.height / 2;
    115 
    116      ctx.textAlign = 'right';
    117      let tm = ctx.measureText(text);
    118      const clusters = tm.getTextClusters();
    119 
    120      // Rendering all clusters with the same (x, y) parameters must be
    121      // equivalent to a fillText() call at (x, y).
    122      for (const cluster of clusters) {
    123          ctx.fillTextCluster(cluster, x, y);
    124      }
    125 
    126      const bitmap = canvas.transferToImageBitmap();
    127      self.postMessage(bitmap, bitmap);
    128    };
    129  </script>
    130  <script type="module">
    131    const blob = new Blob([document.getElementById('myWorker2').textContent]);
    132    const worker = new Worker(URL.createObjectURL(blob));
    133    worker.addEventListener('message', msg => {
    134      const outputCanvas = document.getElementById('canvas2');
    135      const outputCtx = outputCanvas.getContext('2d');
    136      outputCtx.drawImage(msg.data, 0, 0);
    137      if (--pending_tests == 0) {
    138        document.documentElement.classList.remove('reftest-wait');
    139      }
    140    });
    141    worker.postMessage(null);
    142  </script>
    143 </span>
    144 
    145 </div>
    146 </html>