tor-browser

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

browser_changes_iframes.js (3715B)

      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 updating declarations on pages with iframes works fine.
      7 
      8 const TEST_URI = `
      9  <h1 style="color: red">test</h1>
     10  <iframe src="data:text/html,${encodeURIComponent(`<h2 style="background-color: hotpink">iframe</h2>`)}"></iframe>
     11 `;
     12 
     13 add_task(async function () {
     14  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     15  const { inspector, view: ruleView } = await openRuleView();
     16  const { document: doc, store } = selectChangesView(inspector);
     17 
     18  info("Change the top-level h1 inline style color from red to blue");
     19  await selectNode("h1", inspector);
     20  await editDeclarationValue({
     21    ruleView,
     22    store,
     23    ruleIndex: 0,
     24    declaration: { color: "red" },
     25    newValue: "blue",
     26  });
     27 
     28  info("Check that the changes are properly displayed");
     29  await waitFor(() => getAddedDeclarations(doc).at(-1)?.value === "blue");
     30 
     31  Assert.deepEqual(
     32    getRemovedDeclarations(doc).map(declaration => ({
     33      property: declaration.property,
     34      value: declaration.value,
     35    })),
     36    [
     37      {
     38        property: "color",
     39        value: "red",
     40      },
     41    ],
     42    "Only one declaration was tracked as removed (color: red)"
     43  );
     44 
     45  Assert.deepEqual(
     46    getAddedDeclarations(doc).map(declaration => ({
     47      property: declaration.property,
     48      value: declaration.value,
     49    })),
     50    [
     51      {
     52        property: "color",
     53        value: "blue",
     54      },
     55    ],
     56    "Only one declaration was tracked as added (color: blue)"
     57  );
     58 
     59  info(
     60    "Change the iframe h2 inline style background-color from hotpink to green"
     61  );
     62  await selectNodeInFrames(["iframe", "h2"], inspector);
     63  await editDeclarationValue({
     64    ruleView,
     65    store,
     66    ruleIndex: 0,
     67    declaration: { "background-color": "hotpink" },
     68    newValue: "green",
     69  });
     70 
     71  info("Check that the changes in the iframe are properly displayed");
     72  await waitFor(() => getAddedDeclarations(doc).at(-1)?.value === "green");
     73 
     74  Assert.deepEqual(
     75    getRemovedDeclarations(doc).map(declaration => ({
     76      property: declaration.property,
     77      value: declaration.value,
     78    })),
     79    [
     80      {
     81        property: "color",
     82        value: "red",
     83      },
     84      {
     85        property: "background-color",
     86        value: "hotpink",
     87      },
     88    ],
     89    "The iframe declaration was tracked as removed (background-color: hotpink)"
     90  );
     91 
     92  Assert.deepEqual(
     93    getAddedDeclarations(doc).map(declaration => ({
     94      property: declaration.property,
     95      value: declaration.value,
     96    })),
     97    [
     98      {
     99        property: "color",
    100        value: "blue",
    101      },
    102      {
    103        property: "background-color",
    104        value: "green",
    105      },
    106    ],
    107    "The iframe declaration was tracked as added (background-color: green)"
    108  );
    109 });
    110 
    111 async function editDeclarationValue({
    112  ruleView,
    113  store,
    114  ruleIndex,
    115  declaration,
    116  newValue,
    117 }) {
    118  const h1ColorProp = getTextProperty(ruleView, ruleIndex, declaration);
    119 
    120  // Focus the value input
    121  focusEditableField(ruleView, h1ColorProp.editor.valueSpan);
    122 
    123  // Type one letter at a time and wait for the TRACK_CHANGE action
    124  for (const letter of newValue) {
    125    const onTrackChange = waitForDispatch(store, "TRACK_CHANGE");
    126    const onRuleViewChanged = ruleView.once("ruleview-changed");
    127    EventUtils.sendString(letter, ruleView.styleWindow);
    128    // Flush the debounce for the preview text.
    129    ruleView.debounce.flush();
    130    await onTrackChange;
    131    await onRuleViewChanged;
    132  }
    133 
    134  const onRuleViewChanged = ruleView.once("ruleview-changed");
    135  EventUtils.synthesizeKey("VK_RETURN", {}, ruleView.styleWindow);
    136  ruleView.debounce.flush();
    137  await onRuleViewChanged;
    138 }