tor-browser

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

2d.text.measure.getActualBoundingBox-full-text.tentative.html (8311B)

      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>OffscreenCanvas test: 2d.text.measure.getActualBoundingBox-full-text.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 
      9 <h1>2d.text.measure.getActualBoundingBox-full-text.tentative</h1>
     10 
     11 <script>
     12 
     13 test(t => {
     14  const canvas = new OffscreenCanvas(800, 200);
     15  const ctx = canvas.getContext('2d');
     16 
     17  // Use measureText to create a rect for the whole text
     18  function getFullTextBoundingBox(text) {
     19    const tm = ctx.measureText(text);
     20    return {
     21      x: -tm.actualBoundingBoxLeft,
     22      y: -tm.actualBoundingBoxAscent,
     23      width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight,
     24      height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent
     25    };
     26  }
     27 
     28  function checkRectsMatch(rect_a, rect_b) {
     29    assert_approx_equals(rect_a.x, rect_b.x, 1.0);
     30    assert_approx_equals(rect_a.y, rect_b.y, 1.0);
     31    assert_approx_equals(rect_a.width, rect_b.width, 1.0);
     32    assert_approx_equals(rect_a.height, rect_b.height, 1.0);
     33  }
     34 
     35  const kAligns = [
     36    'left',
     37    'center',
     38    'right',
     39  ];
     40 
     41  const kBaselines = [
     42    'top',
     43    'hanging',
     44    'middle',
     45    'alphabetic',
     46    'ideographic',
     47    'bottom',
     48  ];
     49 
     50  const kTexts = [
     51    'UNAVAILABLE',
     52    '🏁🎶🏁',
     53    '）（あ）（',
     54    '-abcd ',
     55    'اين المكتبة؟',
     56    'bidiالرياضيات'
     57  ]
     58 
     59  ctx.font = '50px sans-serif';
     60  ctx.direction = 'ltr';
     61  for (const align of kAligns) {
     62    for (const baseline of kBaselines) {
     63      ctx.textAlign = align;
     64      ctx.textBaseline = baseline;
     65      for (text of kTexts) {
     66        const tm = ctx.measureText(text);
     67        const rect_from_api = tm.getActualBoundingBox(0, text.length);
     68        const rect_from_full_bounds = getFullTextBoundingBox(text);
     69        checkRectsMatch(rect_from_api, rect_from_full_bounds)
     70      }
     71    }
     72  }
     73 }, "Test TextMetrics::getActualBoundingBox() for the full length of the string for some edge cases, with direction ltr and no-directional-override");
     74 
     75 test(t => {
     76  const canvas = new OffscreenCanvas(800, 200);
     77  const ctx = canvas.getContext('2d');
     78 
     79  // Use measureText to create a rect for the whole text
     80  function getFullTextBoundingBox(text) {
     81    const tm = ctx.measureText(text);
     82    return {
     83      x: -tm.actualBoundingBoxLeft,
     84      y: -tm.actualBoundingBoxAscent,
     85      width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight,
     86      height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent
     87    };
     88  }
     89 
     90  function checkRectsMatch(rect_a, rect_b) {
     91    assert_approx_equals(rect_a.x, rect_b.x, 1.0);
     92    assert_approx_equals(rect_a.y, rect_b.y, 1.0);
     93    assert_approx_equals(rect_a.width, rect_b.width, 1.0);
     94    assert_approx_equals(rect_a.height, rect_b.height, 1.0);
     95  }
     96 
     97  const kAligns = [
     98    'left',
     99    'center',
    100    'right',
    101  ];
    102 
    103  const kBaselines = [
    104    'top',
    105    'hanging',
    106    'middle',
    107    'alphabetic',
    108    'ideographic',
    109    'bottom',
    110  ];
    111 
    112  const kTexts = [
    113    'UNAVAILABLE',
    114    '🏁🎶🏁',
    115    '）（あ）（',
    116    '-abcd ',
    117    'اين المكتبة؟',
    118    'bidiالرياضيات'
    119  ]
    120 
    121  ctx.font = '50px sans-serif';
    122  ctx.direction = 'rtl';
    123  for (const align of kAligns) {
    124    for (const baseline of kBaselines) {
    125      ctx.textAlign = align;
    126      ctx.textBaseline = baseline;
    127      for (text of kTexts) {
    128        const tm = ctx.measureText(text);
    129        const rect_from_api = tm.getActualBoundingBox(0, text.length);
    130        const rect_from_full_bounds = getFullTextBoundingBox(text);
    131        checkRectsMatch(rect_from_api, rect_from_full_bounds)
    132      }
    133    }
    134  }
    135 }, "Test TextMetrics::getActualBoundingBox() for the full length of the string for some edge cases, with direction rtl and no-directional-override");
    136 
    137 test(t => {
    138  const canvas = new OffscreenCanvas(800, 200);
    139  const ctx = canvas.getContext('2d');
    140 
    141  // Use measureText to create a rect for the whole text
    142  function getFullTextBoundingBox(text) {
    143    const tm = ctx.measureText(text);
    144    return {
    145      x: -tm.actualBoundingBoxLeft,
    146      y: -tm.actualBoundingBoxAscent,
    147      width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight,
    148      height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent
    149    };
    150  }
    151 
    152  function checkRectsMatch(rect_a, rect_b) {
    153    assert_approx_equals(rect_a.x, rect_b.x, 1.0);
    154    assert_approx_equals(rect_a.y, rect_b.y, 1.0);
    155    assert_approx_equals(rect_a.width, rect_b.width, 1.0);
    156    assert_approx_equals(rect_a.height, rect_b.height, 1.0);
    157  }
    158 
    159  function addDirectionalOverrideCharacters(text, direction_is_ltr) {
    160    // source: www.w3.org/International/questions/qa-bidi-unicode-controls.en
    161    const LTR_OVERRIDE = '\u202D';
    162    const RTL_OVERRIDE = '\u202E';
    163    const OVERRIDE_END = '\u202C';
    164    if (direction_is_ltr) {
    165      return LTR_OVERRIDE + text + OVERRIDE_END;
    166    }
    167    return RTL_OVERRIDE + text + OVERRIDE_END;
    168  }
    169 
    170  const kAligns = [
    171    'left',
    172    'center',
    173    'right',
    174  ];
    175 
    176  const kBaselines = [
    177    'top',
    178    'hanging',
    179    'middle',
    180    'alphabetic',
    181    'ideographic',
    182    'bottom',
    183  ];
    184 
    185  const kTexts = [
    186    'UNAVAILABLE',
    187    '🏁🎶🏁',
    188    '）（あ）（',
    189    '-abcd ',
    190    'اين المكتبة؟',
    191    'bidiالرياضيات'
    192  ]
    193 
    194  ctx.font = '50px sans-serif';
    195  ctx.direction = 'ltr';
    196  for (const align of kAligns) {
    197    for (const baseline of kBaselines) {
    198      ctx.textAlign = align;
    199      ctx.textBaseline = baseline;
    200      for (text of kTexts) {
    201        text = addDirectionalOverrideCharacters(text, ctx.direction == 'ltr');
    202        const tm = ctx.measureText(text);
    203        const rect_from_api = tm.getActualBoundingBox(0, text.length);
    204        const rect_from_full_bounds = getFullTextBoundingBox(text);
    205        checkRectsMatch(rect_from_api, rect_from_full_bounds)
    206      }
    207    }
    208  }
    209 }, "Test TextMetrics::getActualBoundingBox() for the full length of the string for some edge cases, with direction ltr and directional-override");
    210 
    211 test(t => {
    212  const canvas = new OffscreenCanvas(800, 200);
    213  const ctx = canvas.getContext('2d');
    214 
    215  // Use measureText to create a rect for the whole text
    216  function getFullTextBoundingBox(text) {
    217    const tm = ctx.measureText(text);
    218    return {
    219      x: -tm.actualBoundingBoxLeft,
    220      y: -tm.actualBoundingBoxAscent,
    221      width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight,
    222      height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent
    223    };
    224  }
    225 
    226  function checkRectsMatch(rect_a, rect_b) {
    227    assert_approx_equals(rect_a.x, rect_b.x, 1.0);
    228    assert_approx_equals(rect_a.y, rect_b.y, 1.0);
    229    assert_approx_equals(rect_a.width, rect_b.width, 1.0);
    230    assert_approx_equals(rect_a.height, rect_b.height, 1.0);
    231  }
    232 
    233  function addDirectionalOverrideCharacters(text, direction_is_ltr) {
    234    // source: www.w3.org/International/questions/qa-bidi-unicode-controls.en
    235    const LTR_OVERRIDE = '\u202D';
    236    const RTL_OVERRIDE = '\u202E';
    237    const OVERRIDE_END = '\u202C';
    238    if (direction_is_ltr) {
    239      return LTR_OVERRIDE + text + OVERRIDE_END;
    240    }
    241    return RTL_OVERRIDE + text + OVERRIDE_END;
    242  }
    243 
    244  const kAligns = [
    245    'left',
    246    'center',
    247    'right',
    248  ];
    249 
    250  const kBaselines = [
    251    'top',
    252    'hanging',
    253    'middle',
    254    'alphabetic',
    255    'ideographic',
    256    'bottom',
    257  ];
    258 
    259  const kTexts = [
    260    'UNAVAILABLE',
    261    '🏁🎶🏁',
    262    '）（あ）（',
    263    '-abcd ',
    264    'اين المكتبة؟',
    265    'bidiالرياضيات'
    266  ]
    267 
    268  ctx.font = '50px sans-serif';
    269  ctx.direction = 'rtl';
    270  for (const align of kAligns) {
    271    for (const baseline of kBaselines) {
    272      ctx.textAlign = align;
    273      ctx.textBaseline = baseline;
    274      for (text of kTexts) {
    275        text = addDirectionalOverrideCharacters(text, ctx.direction == 'ltr');
    276        const tm = ctx.measureText(text);
    277        const rect_from_api = tm.getActualBoundingBox(0, text.length);
    278        const rect_from_full_bounds = getFullTextBoundingBox(text);
    279        checkRectsMatch(rect_from_api, rect_from_full_bounds)
    280      }
    281    }
    282  }
    283 }, "Test TextMetrics::getActualBoundingBox() for the full length of the string for some edge cases, with direction rtl and directional-override");
    284 
    285 </script>