tor-browser

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

2d.text.measure.getActualBoundingBox.tentative.html (16237B)

      1 <!DOCTYPE html>
      2 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
      3 <meta charset="UTF-8">
      4 <title>Canvas test: 2d.text.measure.getActualBoundingBox.tentative</title>
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="/html/canvas/resources/canvas-tests.js"></script>
      8 <link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
      9 
     10 <h1>2d.text.measure.getActualBoundingBox.tentative</h1>
     11 
     12 <style>
     13  @font-face {
     14    font-family: CanvasTest;
     15    src: url("/fonts/CanvasTest.ttf");
     16  }
     17 </style>
     18 <span style="font-family: CanvasTest;
     19             position: absolute; visibility: hidden">A</span>
     20 <script>
     21 
     22 promise_test(async t => {
     23  const canvas = document.createElement('canvas');
     24  canvas.width = 800;
     25  canvas.height = 200;
     26  const ctx = canvas.getContext('2d');
     27 
     28  // Use measureText to create a rect for the whole text
     29  function getFullTextBoundingBox(text) {
     30    const tm = ctx.measureText(text);
     31    return {
     32      x: -tm.actualBoundingBoxLeft,
     33      y: -tm.actualBoundingBoxAscent,
     34      width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight,
     35      height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent
     36    };
     37  }
     38 
     39  // Returns a string a replaces the characters in text that are not in the
     40  // range [start, end) with spaces.
     41  function buildTestString(text, start, end) {
     42    let ret = '';
     43    for (let i = 0; i < text.length; ++i) {
     44      if (start <= i && i < end)
     45        ret += text[i];
     46      else
     47        ret += ' ';
     48    }
     49    return ret;
     50  }
     51 
     52  function checkRectsMatch(rect_a, rect_b, text, start, end) {
     53    assert_approx_equals(rect_a.x, rect_b.x, 1.0, `${text} :: x :: ${start} to ${end}`);
     54    assert_approx_equals(rect_a.y, rect_b.y, 1.0, `${text} :: y :: ${start} to ${end}`);
     55    assert_approx_equals(rect_a.width, rect_b.width, 1.0, `${text} :: width :: ${start} to ${end}`);
     56    assert_approx_equals(rect_a.height, rect_b.height, 1.0, `${text} :: height :: ${start} to ${end}`);
     57  }
     58 
     59  function testForSubstring(text, start, end) {
     60    const textMetrics = ctx.measureText(text);
     61    const rect_from_api = textMetrics.getActualBoundingBox(start, end);
     62    const rect_from_full_bounds = getFullTextBoundingBox(
     63                                    buildTestString(text, start, end));
     64    checkRectsMatch(rect_from_api, rect_from_full_bounds, buildTestString(text, start, end), start, end);
     65  }
     66 
     67  await document.fonts.ready;
     68  ctx.textAlign = 'left';
     69  ctx.letterSpacing = '0px';
     70 
     71  const kAligns = [
     72    'left',
     73    'center',
     74    'right',
     75  ];
     76 
     77  const kBaselines = [
     78    'top',
     79    'hanging',
     80    'middle',
     81    'alphabetic',
     82    'ideographic',
     83    'bottom',
     84  ];
     85 
     86  ctx.font = '50px CanvasTest';
     87  const text = 'ABCDE';
     88  for (const align of kAligns) {
     89    for (const baseline of kBaselines) {
     90      ctx.textAlign = align;
     91      ctx.textBaseline = baseline;
     92      // Full string.
     93      testForSubstring(text, 0, text.length);
     94      // Intermediate string.
     95      testForSubstring(text, 1, text.length - 1);
     96      // First character.
     97      testForSubstring(text, 0, 1);
     98      // Intermediate character.
     99      testForSubstring(text, 2, 3);
    100    }
    101  }
    102 }, "Test TextMetrics::getActualBoundingBox(), with text align left , and 0px letter spacing.");
    103 
    104 promise_test(async t => {
    105  const canvas = document.createElement('canvas');
    106  canvas.width = 800;
    107  canvas.height = 200;
    108  const ctx = canvas.getContext('2d');
    109 
    110  // Use measureText to create a rect for the whole text
    111  function getFullTextBoundingBox(text) {
    112    const tm = ctx.measureText(text);
    113    return {
    114      x: -tm.actualBoundingBoxLeft,
    115      y: -tm.actualBoundingBoxAscent,
    116      width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight,
    117      height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent
    118    };
    119  }
    120 
    121  // Returns a string a replaces the characters in text that are not in the
    122  // range [start, end) with spaces.
    123  function buildTestString(text, start, end) {
    124    let ret = '';
    125    for (let i = 0; i < text.length; ++i) {
    126      if (start <= i && i < end)
    127        ret += text[i];
    128      else
    129        ret += ' ';
    130    }
    131    return ret;
    132  }
    133 
    134  function checkRectsMatch(rect_a, rect_b, text, start, end) {
    135    assert_approx_equals(rect_a.x, rect_b.x, 1.0, `${text} :: x :: ${start} to ${end}`);
    136    assert_approx_equals(rect_a.y, rect_b.y, 1.0, `${text} :: y :: ${start} to ${end}`);
    137    assert_approx_equals(rect_a.width, rect_b.width, 1.0, `${text} :: width :: ${start} to ${end}`);
    138    assert_approx_equals(rect_a.height, rect_b.height, 1.0, `${text} :: height :: ${start} to ${end}`);
    139  }
    140 
    141  function testForSubstring(text, start, end) {
    142    const textMetrics = ctx.measureText(text);
    143    const rect_from_api = textMetrics.getActualBoundingBox(start, end);
    144    const rect_from_full_bounds = getFullTextBoundingBox(
    145                                    buildTestString(text, start, end));
    146    checkRectsMatch(rect_from_api, rect_from_full_bounds, buildTestString(text, start, end), start, end);
    147  }
    148 
    149  await document.fonts.ready;
    150  ctx.textAlign = 'center';
    151  ctx.letterSpacing = '0px';
    152 
    153  const kAligns = [
    154    'left',
    155    'center',
    156    'right',
    157  ];
    158 
    159  const kBaselines = [
    160    'top',
    161    'hanging',
    162    'middle',
    163    'alphabetic',
    164    'ideographic',
    165    'bottom',
    166  ];
    167 
    168  ctx.font = '50px CanvasTest';
    169  const text = 'ABCDE';
    170  for (const align of kAligns) {
    171    for (const baseline of kBaselines) {
    172      ctx.textAlign = align;
    173      ctx.textBaseline = baseline;
    174      // Full string.
    175      testForSubstring(text, 0, text.length);
    176      // Intermediate string.
    177      testForSubstring(text, 1, text.length - 1);
    178      // First character.
    179      testForSubstring(text, 0, 1);
    180      // Intermediate character.
    181      testForSubstring(text, 2, 3);
    182    }
    183  }
    184 }, "Test TextMetrics::getActualBoundingBox(), with text align center , and 0px letter spacing.");
    185 
    186 promise_test(async t => {
    187  const canvas = document.createElement('canvas');
    188  canvas.width = 800;
    189  canvas.height = 200;
    190  const ctx = canvas.getContext('2d');
    191 
    192  // Use measureText to create a rect for the whole text
    193  function getFullTextBoundingBox(text) {
    194    const tm = ctx.measureText(text);
    195    return {
    196      x: -tm.actualBoundingBoxLeft,
    197      y: -tm.actualBoundingBoxAscent,
    198      width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight,
    199      height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent
    200    };
    201  }
    202 
    203  // Returns a string a replaces the characters in text that are not in the
    204  // range [start, end) with spaces.
    205  function buildTestString(text, start, end) {
    206    let ret = '';
    207    for (let i = 0; i < text.length; ++i) {
    208      if (start <= i && i < end)
    209        ret += text[i];
    210      else
    211        ret += ' ';
    212    }
    213    return ret;
    214  }
    215 
    216  function checkRectsMatch(rect_a, rect_b, text, start, end) {
    217    assert_approx_equals(rect_a.x, rect_b.x, 1.0, `${text} :: x :: ${start} to ${end}`);
    218    assert_approx_equals(rect_a.y, rect_b.y, 1.0, `${text} :: y :: ${start} to ${end}`);
    219    assert_approx_equals(rect_a.width, rect_b.width, 1.0, `${text} :: width :: ${start} to ${end}`);
    220    assert_approx_equals(rect_a.height, rect_b.height, 1.0, `${text} :: height :: ${start} to ${end}`);
    221  }
    222 
    223  function testForSubstring(text, start, end) {
    224    const textMetrics = ctx.measureText(text);
    225    const rect_from_api = textMetrics.getActualBoundingBox(start, end);
    226    const rect_from_full_bounds = getFullTextBoundingBox(
    227                                    buildTestString(text, start, end));
    228    checkRectsMatch(rect_from_api, rect_from_full_bounds, buildTestString(text, start, end), start, end);
    229  }
    230 
    231  await document.fonts.ready;
    232  ctx.textAlign = 'right';
    233  ctx.letterSpacing = '0px';
    234 
    235  const kAligns = [
    236    'left',
    237    'center',
    238    'right',
    239  ];
    240 
    241  const kBaselines = [
    242    'top',
    243    'hanging',
    244    'middle',
    245    'alphabetic',
    246    'ideographic',
    247    'bottom',
    248  ];
    249 
    250  ctx.font = '50px CanvasTest';
    251  const text = 'ABCDE';
    252  for (const align of kAligns) {
    253    for (const baseline of kBaselines) {
    254      ctx.textAlign = align;
    255      ctx.textBaseline = baseline;
    256      // Full string.
    257      testForSubstring(text, 0, text.length);
    258      // Intermediate string.
    259      testForSubstring(text, 1, text.length - 1);
    260      // First character.
    261      testForSubstring(text, 0, 1);
    262      // Intermediate character.
    263      testForSubstring(text, 2, 3);
    264    }
    265  }
    266 }, "Test TextMetrics::getActualBoundingBox(), with text align right , and 0px letter spacing.");
    267 
    268 promise_test(async t => {
    269  const canvas = document.createElement('canvas');
    270  canvas.width = 800;
    271  canvas.height = 200;
    272  const ctx = canvas.getContext('2d');
    273 
    274  // Use measureText to create a rect for the whole text
    275  function getFullTextBoundingBox(text) {
    276    const tm = ctx.measureText(text);
    277    return {
    278      x: -tm.actualBoundingBoxLeft,
    279      y: -tm.actualBoundingBoxAscent,
    280      width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight,
    281      height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent
    282    };
    283  }
    284 
    285  // Returns a string a replaces the characters in text that are not in the
    286  // range [start, end) with spaces.
    287  function buildTestString(text, start, end) {
    288    let ret = '';
    289    for (let i = 0; i < text.length; ++i) {
    290      if (start <= i && i < end)
    291        ret += text[i];
    292      else
    293        ret += ' ';
    294    }
    295    return ret;
    296  }
    297 
    298  function checkRectsMatch(rect_a, rect_b, text, start, end) {
    299    assert_approx_equals(rect_a.x, rect_b.x, 1.0, `${text} :: x :: ${start} to ${end}`);
    300    assert_approx_equals(rect_a.y, rect_b.y, 1.0, `${text} :: y :: ${start} to ${end}`);
    301    assert_approx_equals(rect_a.width, rect_b.width, 1.0, `${text} :: width :: ${start} to ${end}`);
    302    assert_approx_equals(rect_a.height, rect_b.height, 1.0, `${text} :: height :: ${start} to ${end}`);
    303  }
    304 
    305  function testForSubstring(text, start, end) {
    306    const textMetrics = ctx.measureText(text);
    307    const rect_from_api = textMetrics.getActualBoundingBox(start, end);
    308    const rect_from_full_bounds = getFullTextBoundingBox(
    309                                    buildTestString(text, start, end));
    310    checkRectsMatch(rect_from_api, rect_from_full_bounds, buildTestString(text, start, end), start, end);
    311  }
    312 
    313  await document.fonts.ready;
    314  ctx.textAlign = 'left';
    315  ctx.letterSpacing = '10px';
    316 
    317  const kAligns = [
    318    'left',
    319    'center',
    320    'right',
    321  ];
    322 
    323  const kBaselines = [
    324    'top',
    325    'hanging',
    326    'middle',
    327    'alphabetic',
    328    'ideographic',
    329    'bottom',
    330  ];
    331 
    332  ctx.font = '50px CanvasTest';
    333  const text = 'ABCDE';
    334  for (const align of kAligns) {
    335    for (const baseline of kBaselines) {
    336      ctx.textAlign = align;
    337      ctx.textBaseline = baseline;
    338      // Full string.
    339      testForSubstring(text, 0, text.length);
    340      // Intermediate string.
    341      testForSubstring(text, 1, text.length - 1);
    342      // First character.
    343      testForSubstring(text, 0, 1);
    344      // Intermediate character.
    345      testForSubstring(text, 2, 3);
    346    }
    347  }
    348 }, "Test TextMetrics::getActualBoundingBox(), with text align left , and 10px letter spacing.");
    349 
    350 promise_test(async t => {
    351  const canvas = document.createElement('canvas');
    352  canvas.width = 800;
    353  canvas.height = 200;
    354  const ctx = canvas.getContext('2d');
    355 
    356  // Use measureText to create a rect for the whole text
    357  function getFullTextBoundingBox(text) {
    358    const tm = ctx.measureText(text);
    359    return {
    360      x: -tm.actualBoundingBoxLeft,
    361      y: -tm.actualBoundingBoxAscent,
    362      width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight,
    363      height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent
    364    };
    365  }
    366 
    367  // Returns a string a replaces the characters in text that are not in the
    368  // range [start, end) with spaces.
    369  function buildTestString(text, start, end) {
    370    let ret = '';
    371    for (let i = 0; i < text.length; ++i) {
    372      if (start <= i && i < end)
    373        ret += text[i];
    374      else
    375        ret += ' ';
    376    }
    377    return ret;
    378  }
    379 
    380  function checkRectsMatch(rect_a, rect_b, text, start, end) {
    381    assert_approx_equals(rect_a.x, rect_b.x, 1.0, `${text} :: x :: ${start} to ${end}`);
    382    assert_approx_equals(rect_a.y, rect_b.y, 1.0, `${text} :: y :: ${start} to ${end}`);
    383    assert_approx_equals(rect_a.width, rect_b.width, 1.0, `${text} :: width :: ${start} to ${end}`);
    384    assert_approx_equals(rect_a.height, rect_b.height, 1.0, `${text} :: height :: ${start} to ${end}`);
    385  }
    386 
    387  function testForSubstring(text, start, end) {
    388    const textMetrics = ctx.measureText(text);
    389    const rect_from_api = textMetrics.getActualBoundingBox(start, end);
    390    const rect_from_full_bounds = getFullTextBoundingBox(
    391                                    buildTestString(text, start, end));
    392    checkRectsMatch(rect_from_api, rect_from_full_bounds, buildTestString(text, start, end), start, end);
    393  }
    394 
    395  await document.fonts.ready;
    396  ctx.textAlign = 'center';
    397  ctx.letterSpacing = '10px';
    398 
    399  const kAligns = [
    400    'left',
    401    'center',
    402    'right',
    403  ];
    404 
    405  const kBaselines = [
    406    'top',
    407    'hanging',
    408    'middle',
    409    'alphabetic',
    410    'ideographic',
    411    'bottom',
    412  ];
    413 
    414  ctx.font = '50px CanvasTest';
    415  const text = 'ABCDE';
    416  for (const align of kAligns) {
    417    for (const baseline of kBaselines) {
    418      ctx.textAlign = align;
    419      ctx.textBaseline = baseline;
    420      // Full string.
    421      testForSubstring(text, 0, text.length);
    422      // Intermediate string.
    423      testForSubstring(text, 1, text.length - 1);
    424      // First character.
    425      testForSubstring(text, 0, 1);
    426      // Intermediate character.
    427      testForSubstring(text, 2, 3);
    428    }
    429  }
    430 }, "Test TextMetrics::getActualBoundingBox(), with text align center , and 10px letter spacing.");
    431 
    432 promise_test(async t => {
    433  const canvas = document.createElement('canvas');
    434  canvas.width = 800;
    435  canvas.height = 200;
    436  const ctx = canvas.getContext('2d');
    437 
    438  // Use measureText to create a rect for the whole text
    439  function getFullTextBoundingBox(text) {
    440    const tm = ctx.measureText(text);
    441    return {
    442      x: -tm.actualBoundingBoxLeft,
    443      y: -tm.actualBoundingBoxAscent,
    444      width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight,
    445      height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent
    446    };
    447  }
    448 
    449  // Returns a string a replaces the characters in text that are not in the
    450  // range [start, end) with spaces.
    451  function buildTestString(text, start, end) {
    452    let ret = '';
    453    for (let i = 0; i < text.length; ++i) {
    454      if (start <= i && i < end)
    455        ret += text[i];
    456      else
    457        ret += ' ';
    458    }
    459    return ret;
    460  }
    461 
    462  function checkRectsMatch(rect_a, rect_b, text, start, end) {
    463    assert_approx_equals(rect_a.x, rect_b.x, 1.0, `${text} :: x :: ${start} to ${end}`);
    464    assert_approx_equals(rect_a.y, rect_b.y, 1.0, `${text} :: y :: ${start} to ${end}`);
    465    assert_approx_equals(rect_a.width, rect_b.width, 1.0, `${text} :: width :: ${start} to ${end}`);
    466    assert_approx_equals(rect_a.height, rect_b.height, 1.0, `${text} :: height :: ${start} to ${end}`);
    467  }
    468 
    469  function testForSubstring(text, start, end) {
    470    const textMetrics = ctx.measureText(text);
    471    const rect_from_api = textMetrics.getActualBoundingBox(start, end);
    472    const rect_from_full_bounds = getFullTextBoundingBox(
    473                                    buildTestString(text, start, end));
    474    checkRectsMatch(rect_from_api, rect_from_full_bounds, buildTestString(text, start, end), start, end);
    475  }
    476 
    477  await document.fonts.ready;
    478  ctx.textAlign = 'right';
    479  ctx.letterSpacing = '10px';
    480 
    481  const kAligns = [
    482    'left',
    483    'center',
    484    'right',
    485  ];
    486 
    487  const kBaselines = [
    488    'top',
    489    'hanging',
    490    'middle',
    491    'alphabetic',
    492    'ideographic',
    493    'bottom',
    494  ];
    495 
    496  ctx.font = '50px CanvasTest';
    497  const text = 'ABCDE';
    498  for (const align of kAligns) {
    499    for (const baseline of kBaselines) {
    500      ctx.textAlign = align;
    501      ctx.textBaseline = baseline;
    502      // Full string.
    503      testForSubstring(text, 0, text.length);
    504      // Intermediate string.
    505      testForSubstring(text, 1, text.length - 1);
    506      // First character.
    507      testForSubstring(text, 0, 1);
    508      // Intermediate character.
    509      testForSubstring(text, 2, 3);
    510    }
    511  }
    512 }, "Test TextMetrics::getActualBoundingBox(), with text align right , and 10px letter spacing.");
    513 
    514 </script>