tor-browser

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

browser_fontinspector_all-fonts.js (10197B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 "use strict";
      4 
      5 // Check that the font editor has a section for "All fonts" which shows all fonts
      6 // used on the page.
      7 
      8 const TEST_URI = URL_ROOT_SSL + "doc_browser_fontinspector.html";
      9 
     10 add_task(async function () {
     11  const { view } = await openFontInspectorForURL(TEST_URI);
     12  const viewDoc = view.document;
     13 
     14  const allFontsAccordion = getFontsAccordion(viewDoc);
     15  ok(allFontsAccordion, "There's an accordion in the panel");
     16  is(
     17    allFontsAccordion.textContent,
     18    "All Fonts on Page",
     19    "It has the right title"
     20  );
     21 
     22  await expandAccordion(allFontsAccordion);
     23  const allFontsEls = getAllFontsEls(viewDoc);
     24 
     25  const ostrichMetadata = [
     26    {
     27      name: "Version:",
     28      value: "1.000",
     29    },
     30    {
     31      name: "Designer:",
     32      value: "Tyler Finck",
     33      // eslint-disable-next-line @microsoft/sdl/no-insecure-url
     34      href: "http://www.sursly.com/",
     35    },
     36    {
     37      name: "Manufacturer:",
     38      value: "Tyler Finck",
     39    },
     40    {
     41      name: "Vendor:",
     42      // eslint-disable-next-line @microsoft/sdl/no-insecure-url
     43      value: "http://www.sursly.com",
     44      // eslint-disable-next-line @microsoft/sdl/no-insecure-url
     45      href: "http://www.sursly.com/",
     46    },
     47    {
     48      name: "Description:",
     49      value: "Copyright (c) 2011 by Tyler Finck. All rights reserved.",
     50    },
     51    {
     52      name: "License:",
     53      value: "Just let me know if and where you use it! Enjoy :)",
     54    },
     55    {
     56      name: "License Info URL:",
     57      // eslint-disable-next-line @microsoft/sdl/no-insecure-url
     58      value: "http://www.sursly.com",
     59      // eslint-disable-next-line @microsoft/sdl/no-insecure-url
     60      href: "http://www.sursly.com/",
     61    },
     62  ];
     63 
     64  const MPLExcerpt =
     65    "The licenses granted in this Section 2 are the only rights granted under this License. No additional rights or licenses will be implied from the distribution or licensing of Covered Software under this License. Notwithstanding Section 2.1(b) above, no patent license is granted by a Contributor:      for any code that a Contributor has removed from Covered Software; or      for infringements caused by: (i) Your and any other third party’s modifications of Covered Software, or (ii) the combination of its Contributions with other software (except as part of its Contributor Version); or      under Patent Claims infringed by Covered Software in the absence of its Contributions.  This License does not grant any rights in the trademarks, service marks, or logos of any Contributor (except as may be necessary to comply with the notice requirements in Section 3.4).";
     66 
     67  const EXPECTED_FONTS = [
     68    {
     69      familyName: "DevToolsMono",
     70      name: "DevToolsMono Regular",
     71      remote: true,
     72      url: URL_ROOT_SSL + "devtools-mono.otf",
     73      metadata: [
     74        {
     75          name: "Version:",
     76          // Font version is `Version 0.1 early alpha`, so this checks that we properly
     77          // strip the "Version" prefix
     78          value: "0.1 early alpha",
     79        },
     80        {
     81          name: "Designer:",
     82          value: "Ötto Land",
     83          // No Designer URL in the font info so we can check that this isn't rendered
     84          // as a link
     85          href: null,
     86        },
     87        {
     88          name: "Manufacturer:",
     89          value: "Mozilla",
     90        },
     91        {
     92          name: "Vendor:",
     93          value: "https://www.mozilla.org",
     94          href: "https://www.mozilla.org/",
     95        },
     96        {
     97          name: "Description:",
     98          value: "This is the font description.".repeat(20),
     99          truncated: true,
    100        },
    101        {
    102          name: "License:",
    103          value: MPLExcerpt,
    104          truncated: true,
    105        },
    106        {
    107          name: "License Info URL:",
    108          value: "https://www.mozilla.org/en-US/MPL/2.0/",
    109          href: "https://www.mozilla.org/en-US/MPL/2.0/",
    110        },
    111      ],
    112    },
    113    {
    114      familyName: "bar",
    115      name: "Ostrich Sans Medium",
    116      remote: true,
    117      url: URL_ROOT_SSL + "ostrich-regular.ttf",
    118      metadata: ostrichMetadata,
    119    },
    120    {
    121      familyName: "bar",
    122      name: "Ostrich Sans Black",
    123      remote: true,
    124      url: URL_ROOT_SSL + "ostrich-black.ttf",
    125      metadata: ostrichMetadata,
    126    },
    127    {
    128      familyName: "bar",
    129      name: "Ostrich Sans Black",
    130      remote: true,
    131      url: URL_ROOT_SSL + "ostrich-black.ttf",
    132      metadata: ostrichMetadata,
    133    },
    134    {
    135      familyName: "barnormal",
    136      name: "Ostrich Sans Medium",
    137      remote: true,
    138      url: URL_ROOT_SSL + "ostrich-regular.ttf",
    139      metadata: ostrichMetadata,
    140    },
    141    {
    142      // On Linux, Arial does not exist. Liberation Sans is used instead.
    143      familyName: ["Arial", "Liberation Sans"],
    144      name: ["Arial", "Liberation Sans"],
    145      remote: false,
    146      url: "system",
    147    },
    148    {
    149      // On Linux, Times New Roman does not exist. Liberation Serif is used instead.
    150      familyName: ["Times New Roman", "Liberation Serif"],
    151      name: ["Times New Roman", "Liberation Serif"],
    152      remote: false,
    153      url: "system",
    154    },
    155  ];
    156 
    157  is(allFontsEls.length, EXPECTED_FONTS.length, "All fonts used are listed");
    158 
    159  for (let i = 0; i < EXPECTED_FONTS.length; i++) {
    160    const li = allFontsEls[i];
    161    const expectedFont = EXPECTED_FONTS[i];
    162 
    163    const fontName = getName(li);
    164    if (Array.isArray(expectedFont.name)) {
    165      ok(
    166        expectedFont.name.includes(fontName),
    167        `The DIV font has the right name - Got "${fontName}", expected one of ${JSON.stringify(expectedFont.name)}`
    168      );
    169    } else {
    170      is(fontName, expectedFont.name, `The DIV font has the right name`);
    171    }
    172 
    173    info(fontName);
    174    const fontFamilyName = getFamilyName(li);
    175    if (Array.isArray(expectedFont.familyName)) {
    176      ok(
    177        expectedFont.familyName.includes(fontFamilyName),
    178        `font has the right family name - Got "${fontFamilyName}", expected one of ${JSON.stringify(expectedFont.familyName)}`
    179      );
    180    } else {
    181      is(
    182        fontFamilyName,
    183        expectedFont.familyName,
    184        `font has the right family name`
    185      );
    186    }
    187 
    188    info(fontFamilyName);
    189    is(isRemote(li), expectedFont.remote, `font remote value correct`);
    190    is(getURL(li), expectedFont.url, `font url correct`);
    191 
    192    if (expectedFont.metadata) {
    193      const dts = li.querySelectorAll("dt");
    194      const dds = li.querySelectorAll("dd");
    195      is(
    196        dts.length,
    197        expectedFont.metadata.length,
    198        `"${expectedFont.name}" - Got expected number of metadata rows`
    199      );
    200      for (let j = 0; j < expectedFont.metadata.length; j++) {
    201        const expectedData = expectedFont.metadata[j];
    202        const dtText = dts[j].textContent;
    203        is(
    204          dtText,
    205          expectedData.name,
    206          `"${expectedFont.name}" - Got expected data for row #${j}`
    207        );
    208        const dd = dds[j];
    209        const linkEl = dd.querySelector("a");
    210        if (expectedData.href) {
    211          isnot(
    212            linkEl,
    213            null,
    214            `"${expectedFont.name}" - Value of row ${j} ("${dtText}") is a link`
    215          );
    216          is(
    217            linkEl.textContent,
    218            expectedData.value,
    219            `"${expectedFont.name}" - Got expected data value for row #${j} ("${dtText}")`
    220          );
    221          const { link } = await simulateLinkClick(linkEl);
    222          is(
    223            link,
    224            expectedData.href,
    225            `"${expectedFont.name}" - Clicking on link on row #${j} ("${dtText}") navigates to expected link`
    226          );
    227        } else {
    228          if (expectedData.truncated) {
    229            is(
    230              dd.textContent,
    231              expectedData.value.substring(0, 250),
    232              `"${expectedFont.name}" - Got expected truncated data value for row #${j} ("${dtText}")`
    233            );
    234            is(
    235              getTwistyToggle(dd).getAttribute("aria-expanded"),
    236              "false",
    237              "The twisty is collapsed by default"
    238            );
    239 
    240            info(
    241              `"${expectedFont.name}" - Click the string expander for row #${j} ("${dtText}")`
    242            );
    243            const expanderEl = getTruncatedStringExpander(dd);
    244            expanderEl.click();
    245            await waitFor(() => !getTruncatedStringExpander(dd));
    246            ok(true, "The expander gets hidden once it's clicked");
    247            is(
    248              getTwistyToggle(dd).getAttribute("aria-expanded"),
    249              "true",
    250              `"${expectedFont.name}" - The twisty is expanded once the expander was clicked`
    251            );
    252            is(
    253              dd.textContent,
    254              expectedData.value,
    255              `"${expectedFont.name}" - Got expected full data value for row #${j} ("${dtText}") after expander was clicked`
    256            );
    257 
    258            info(
    259              `"${expectedFont.name}" - Click the twisty toggle for row #${j} ("${dtText}")`
    260            );
    261            getTwistyToggle(dd).click();
    262            await waitFor(() => getTruncatedStringExpander(dd));
    263            ok(
    264              true,
    265              `"${expectedFont.name}" - The expander gets displayed again after clicking the twisty`
    266            );
    267            is(
    268              getTwistyToggle(dd).getAttribute("aria-expanded"),
    269              "false",
    270              `"${expectedFont.name}" - The twisty is collapsed again`
    271            );
    272            is(
    273              dd.textContent,
    274              expectedData.value.substring(0, 250),
    275              `"${expectedFont.name}" - Got expected truncated data value again for row #${j} ("${dtText}")`
    276            );
    277          } else {
    278            is(
    279              dd.textContent,
    280              expectedData.value,
    281              `"${expectedFont.name}" - Got expected data value for row #${j} ("${dtText}")`
    282            );
    283          }
    284 
    285          is(
    286            linkEl,
    287            null,
    288            `"${expectedFont.name}" - Value of row ${j} ("${dtText}") isn't a link`
    289          );
    290        }
    291      }
    292    }
    293  }
    294 });
    295 
    296 function getTruncatedStringExpander(parentEl) {
    297  return parentEl.querySelector("button.font-truncated-string-expander");
    298 }
    299 
    300 function getTwistyToggle(parentEl) {
    301  return parentEl.querySelector("button.theme-twisty");
    302 }