tor-browser

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

browser_markup_pseudo_view-transition.js (3684B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 const TEST_URL = `data:text/html,<!DOCTYPE html><meta charset=utf8>${encodeURIComponent(`
      7  <style>
      8    ::view-transition-group(root) {
      9       /* large number so the view-transition pseudo elements are available during the whole test */
     10       animation-duration: 3600s;
     11    }
     12    header {
     13      view-transition-name: main-header;
     14    }
     15 
     16    header h1 {
     17      view-transition-name: main-header-text;
     18    }
     19  </style>
     20  <header>
     21    <h1>::view-transition</h1>
     22  </header>
     23 `)}`;
     24 
     25 add_task(async function () {
     26  const { inspector } = await openInspectorForURL(TEST_URL);
     27 
     28  await selectNode("html", inspector);
     29 
     30  const onMarkupMutation = inspector.once("markupmutation");
     31  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async () => {
     32    const document = content.document;
     33    content.testTransition = document.startViewTransition(() => {
     34      document.querySelector("h1").replaceChildren("updated");
     35    });
     36    await content.testTransition.ready;
     37    await content.testTransition.updateCallbackDone;
     38  });
     39  await onMarkupMutation;
     40 
     41  const htmlNodeFront = await getNodeFront("html", inspector);
     42  const htmlContainer = await getContainerForNodeFront(
     43    htmlNodeFront,
     44    inspector
     45  );
     46 
     47  const viewTransitionMarkupNodeEl = htmlContainer.children.childNodes[2];
     48  is(
     49    viewTransitionMarkupNodeEl.textContent,
     50    "::view-transition",
     51    "::view-transition node is displayed"
     52  );
     53 
     54  const viewTransitionContainer = viewTransitionMarkupNodeEl.container;
     55  is(
     56    viewTransitionContainer.type,
     57    "readonlycontainer",
     58    "The ::view-transition container is read-only"
     59  );
     60 
     61  info("Expand the whole ::view-transition subtree");
     62  await toggleContainerByClick(inspector, viewTransitionContainer, {
     63    altKey: true,
     64  });
     65 
     66  let tree = `
     67    html
     68      head!ignore-children
     69      body!ignore-children
     70      ::view-transition
     71        ::view-transition-group(root)
     72          ::view-transition-image-pair(root)
     73            ::view-transition-old(root)
     74            ::view-transition-new(root)
     75        ::view-transition-group(main-header)
     76          ::view-transition-image-pair(main-header)
     77            ::view-transition-old(main-header)
     78            ::view-transition-new(main-header)
     79        ::view-transition-group(main-header-text)
     80          ::view-transition-image-pair(main-header-text)
     81            ::view-transition-old(main-header-text)
     82            ::view-transition-new(main-header-text)
     83      `.trim();
     84  await assertMarkupViewAsTree(tree, "html", inspector);
     85 
     86  info(
     87    "Check that html element is selected back when view transition is over and pseudo elements removed"
     88  );
     89 
     90  const htmlChildren = await inspector.markup.walker.children(htmlNodeFront);
     91  const viewTransitionNodeFront = htmlChildren.nodes[2];
     92  await selectNode(viewTransitionNodeFront, inspector);
     93  is(
     94    inspector.selection.nodeFront.displayName,
     95    "::view-transition",
     96    "::view-transition element is properly selected"
     97  );
     98 
     99  info("Stop the view transition");
    100  const onSelection = inspector.selection.once("new-node-front");
    101  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async () => {
    102    content.testTransition.skipTransition();
    103    delete content.testTransition;
    104  });
    105  await onSelection;
    106 
    107  is(
    108    inspector.selection.nodeFront.displayName,
    109    "html",
    110    "html element was selected after the view transition was skipped"
    111  );
    112 
    113  // Check that the ::view-transition elements are removed
    114  tree = `
    115    html
    116      head!ignore-children
    117      body!ignore-children
    118      `.trim();
    119  await assertMarkupViewAsTree(tree, "html", inspector);
    120 });