tor-browser

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

ch-recalc-on-font-load.html (2330B)

      1 <!DOCTYPE html>
      2 <title>Length unit 'ch' should be recalculated after loading a web font</title>
      3 <link rel="help" href="https://www.w3.org/TR/css-font-loading-3/#font-face-load">
      4 <link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
      5 <link rel="author" href="mailto:xiaochengh@chromium.org">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <style>
      9 .container {
     10  font: 25px/1 "custom font", monospace;
     11 }
     12 
     13 .test {
     14  width: 1ch;
     15 }
     16 </style>
     17 
     18 <div class="container">
     19  <div class="test"></div>
     20 </div>
     21 
     22 <div class="container" style="display: contents">
     23  <div class="test"></div>
     24 </div>
     25 
     26 <div class="container" style="display: none">
     27  <div class="test"></div>
     28 </div>
     29 
     30 <script>
     31 function parseWidthInPx(element) {
     32  const value = getComputedStyle(element).width;
     33  if (!value.endsWith('px'))
     34    return NaN;
     35  return parseFloat(value);
     36 }
     37 
     38 const testCases = document.querySelectorAll('.test');
     39 
     40 const asyncTests = [
     41  async_test('ch in a normal div should be recalculated after loading a web font'),
     42  async_test('ch in display:contents should be recalculated after loading a web font'),
     43  async_test('ch in display:none should be recalculated after loading a web font')
     44 ];
     45 
     46 // Before loading custom font, tests should be rendered with monospace
     47 // fallback and have a '1ch' measurement much shorter than 25px.
     48 for (let i = 0; i < testCases.length; ++i) {
     49  asyncTests[i].step(() => {
     50    const widthPx = parseWidthInPx(testCases[i]);
     51    assert_less_than(widthPx, 24);
     52  });
     53 }
     54 
     55 // Insert custom font into style sheet and load it
     56 const customFont = new FontFace('custom font', 'url(/fonts/Ahem.ttf)');
     57 document.fonts.add(customFont);
     58 
     59 // After loading custom font, tests should be rendered with the custom font,
     60 // which is Ahem, and have a '1ch' measurement that equals 25px.
     61 customFont.load().then(
     62    () => {
     63      for (let i = 0; i < testCases.length; ++i) {
     64        asyncTests[i].step(() => {
     65          const widthPx = parseWidthInPx(testCases[i]);
     66          assert_approx_equals(widthPx, 25, 0.1);
     67          asyncTests[i].done();
     68        });
     69      }
     70    },
     71    () => {
     72      for (let i = 0; i < testCases.length; ++i) {
     73        asyncTests[i].step(() => {
     74          assert_unreached('Failed to load font');
     75        });
     76      }
     77    }
     78 );
     79 </script>