tor-browser

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

browser_markup_anchor_badge.js (4436B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Tests that the anchor badge is displayed on element with expected anchor-name values.
      7 
      8 const TEST_URI = `
      9  <style type="text/css">
     10    #not-an-anchor {
     11      anchor-name: none;
     12    }
     13 
     14    #anchor {
     15      anchor-name: --my-anchor;
     16    }
     17 
     18    #anchor-with-multiple-names {
     19      anchor-name: --my-other-anchor, --anchor-alias;
     20    }
     21 
     22    .anchored {
     23      position: fixed;
     24      left: anchor(right);
     25      position-anchor: --my-anchor;
     26      width: 20px;
     27      height: 20px;
     28      background-color: gold;
     29    }
     30  </style>
     31  <span id="anchor">--my-anchor</span>
     32  <span id="anchor-with-multiple-names">--my-other-anchor --anchor-alias</span>
     33  <span id="not-an-anchor">not an anchor</span>
     34  <div class="anchored">A</div>
     35  <div class="anchored" style="position-anchor: --my-other-anchor">B</div>
     36  <div class="anchored" style="position-anchor: --updated-anchor-name">C</div>
     37 `;
     38 
     39 add_task(async function () {
     40  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     41  const { inspector } = await openLayoutView();
     42 
     43  let badge = await getAnchorBadgeForSelector("#anchor", inspector);
     44  ok(!!badge, "anchor badge is displayed for element with valid anchor name");
     45  is(badge.textContent, "anchor", "badge has expected text");
     46  is(badge.title, "anchor-name: --my-anchor", "badge has expected title");
     47 
     48  badge = await getAnchorBadgeForSelector(
     49    "#anchor-with-multiple-names",
     50    inspector
     51  );
     52  ok(
     53    !!badge,
     54    "anchor badge is displayed for element with multiple anchor name"
     55  );
     56  is(badge.textContent, "anchor", "badge has expected text");
     57  is(
     58    badge.title,
     59    "anchor-name: --my-other-anchor, --anchor-alias",
     60    "badge has expected title"
     61  );
     62 
     63  info(
     64    "Change the element anchorName value to see if the badge title is updated"
     65  );
     66  const oldTitle = badge.title;
     67  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
     68    content.document.getElementById(
     69      "anchor-with-multiple-names"
     70    ).style.anchorName = "--updated-anchor-name";
     71  });
     72  await waitFor(() => badge.title !== oldTitle);
     73 
     74  badge = await getAnchorBadgeForSelector(
     75    "#anchor-with-multiple-names",
     76    inspector
     77  );
     78  ok(!!badge, "anchor badge is still displayed after changing the anchor name");
     79  is(
     80    badge.textContent,
     81    "anchor",
     82    "badge has expected text after changing the anchor name"
     83  );
     84  is(
     85    badge.title,
     86    "anchor-name: --updated-anchor-name",
     87    "badge has expected title after changing the anchor name"
     88  );
     89 
     90  info("Set the element anchorName to none to see if the badge gets hidden");
     91  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
     92    content.document.getElementById(
     93      "anchor-with-multiple-names"
     94    ).style.anchorName = "none";
     95  });
     96  await waitFor(
     97    async () =>
     98      (await getAnchorBadgeForSelector(
     99        "#anchor-with-multiple-names",
    100        inspector
    101      )) === null,
    102    "wait for badge to be hidden",
    103    // interval
    104    500,
    105    // max tries
    106    10
    107  );
    108  ok(true, "The badge was hidden when setting anchorName to none");
    109 
    110  info(
    111    "Change the element anchorName value back to a dashed ident to see if the badge is shown again"
    112  );
    113  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
    114    content.document.getElementById(
    115      "anchor-with-multiple-names"
    116    ).style.anchorName = "--my-other-anchor";
    117  });
    118  badge = await waitFor(
    119    async () =>
    120      await getAnchorBadgeForSelector("#anchor-with-multiple-names", inspector),
    121    "wait for badge to be visible",
    122    // interval
    123    500,
    124    // max tries
    125    10
    126  );
    127 
    128  ok(
    129    !!badge,
    130    "anchor badge is displayed again after setting a valid anchor name"
    131  );
    132  is(
    133    badge.textContent,
    134    "anchor",
    135    "badge has expected text after setting a valid anchor name"
    136  );
    137  is(
    138    badge.title,
    139    "anchor-name: --my-other-anchor",
    140    "badge has expected title after setting a valid anchor name"
    141  );
    142 
    143  badge = await getAnchorBadgeForSelector("#not-an-anchor", inspector);
    144  ok(
    145    !badge,
    146    "anchor badge is not displayed for element with anchor-name: none"
    147  );
    148 });
    149 
    150 async function getAnchorBadgeForSelector(selector, inspector) {
    151  const container = await getContainerForSelector(selector, inspector);
    152  return container.elt.querySelector(".inspector-badge[data-anchor]");
    153 }