tor-browser

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

browser_animation_iframe.js (2566B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test that the animation inspector does display animations from iframes
      7 const TEST_URI = `https://example.org/document-builder.sjs?html=
      8  <style>
      9    h1, h2 {
     10      color: gold;
     11      animation: top-level-animation 10s infinite;
     12    }
     13 
     14    @keyframes top-level-animation {
     15      100% {
     16        color: tomato;
     17      }
     18    }
     19  </style>
     20  <main>
     21    <h1>Hello</h1>
     22    <h2>top-level world</h2>
     23    <iframe src="${URL_ROOT_SSL + "doc_special_colors.html"}"></iframe>
     24  </main>
     25 `;
     26 
     27 add_task(async function () {
     28  await pushPref("devtools.inspector.three-pane-enabled", false);
     29 
     30  await addTab(TEST_URI);
     31 
     32  const { inspector, panel } = await openAnimationInspector();
     33 
     34  await selectNode("body", inspector);
     35  await checkAnimationTargetNameElements(
     36    panel,
     37    ["h1", "h2"],
     38    "Got expected animation targets when top level <body> is selected"
     39  );
     40 
     41  // wait until we can retrieve the node front in the iframe (it might not be loaded at first)
     42  const iframeBodyNode = await waitFor(async () => {
     43    const res = await getNodeFrontInFrames(["iframe", "body"], inspector);
     44    return res;
     45  });
     46  await selectNode(iframeBodyNode, inspector);
     47  await checkAnimationTargetNameElements(
     48    panel,
     49    ["div"],
     50    "Got expected animation targets when iframe <body> is selected"
     51  );
     52 
     53  await selectNode("h2", inspector);
     54  await checkAnimationTargetNameElements(
     55    panel,
     56    ["h2"],
     57    "Got expected animation targets when top level <h2> is selected"
     58  );
     59 
     60  await selectNodeInFrames(["iframe", "div"], inspector);
     61  await checkAnimationTargetNameElements(
     62    panel,
     63    ["div"],
     64    "Got expected animation targets when iframe <div> is selected"
     65  );
     66 });
     67 
     68 async function checkAnimationTargetNameElements(
     69  panel,
     70  expectedTargets,
     71  assertionMessage
     72 ) {
     73  // wrap in a try/catch so even if `waitFor` throws, we'll hit Assert.deepEqual that
     74  // will better feedback for the developers if the test fails.
     75  try {
     76    await waitFor(() => {
     77      const els = getAnimationTargetElements(panel);
     78      return (
     79        els.length === expectedTargets.length &&
     80        els.every((el, i) => el.textContent === expectedTargets[i])
     81      );
     82    });
     83  } catch (e) {}
     84 
     85  Assert.deepEqual(
     86    getAnimationTargetElements(panel).map(el => el.textContent),
     87    expectedTargets,
     88    assertionMessage
     89  );
     90 }
     91 
     92 function getAnimationTargetElements(panel) {
     93  return [
     94    ...panel.querySelectorAll(".animation-list .animation-item .tag-name"),
     95  ];
     96 }