tor-browser

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

browser_inspector_highlighter-03.js (3727B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 "use strict";
      4 
      5 // Test that iframes are correctly highlighted.
      6 
      7 const IFRAME_SRC = `<style>
      8    body {
      9      margin:0;
     10      height:100%;
     11      background-color:tomato;
     12    }
     13  </style>
     14  <body class=remote>hello from iframe</body>`;
     15 
     16 const DOCUMENT_SRC = `<style>
     17    iframe {
     18      height:200px;
     19      border: 11px solid black;
     20      padding: 13px;
     21    }
     22    body,iframe,h1 {
     23      margin:0;
     24      padding: 0;
     25    }
     26  </style>
     27  <body>
     28    <iframe src='https://example.com/document-builder.sjs?html=${encodeURIComponent(
     29      IFRAME_SRC
     30    )}'></iframe>
     31  </body>`;
     32 
     33 const TEST_URI = "data:text/html;charset=utf-8," + DOCUMENT_SRC;
     34 
     35 add_task(async function () {
     36  const { inspector, toolbox, highlighterTestFront } =
     37    await openInspectorForURL(TEST_URI);
     38 
     39  info("Waiting for box mode to show.");
     40  const topLevelBodyNodeFront = await getNodeFront("body", inspector);
     41  await inspector.highlighters.showHighlighterTypeForNode(
     42    inspector.highlighters.TYPES.BOXMODEL,
     43    topLevelBodyNodeFront
     44  );
     45 
     46  info("Waiting for element picker to become active.");
     47  await startPicker(toolbox);
     48 
     49  info("Check that hovering iframe padding does highlight the iframe element");
     50  // the iframe has 13px of padding, so hovering at [1,1] should be enough.
     51  await hoverElement(inspector, "iframe", 1, 1);
     52 
     53  await isNodeCorrectlyHighlighted(highlighterTestFront, "iframe");
     54 
     55  info("Scrolling the document");
     56  await setContentPageElementProperty(
     57    "iframe",
     58    "style",
     59    "margin-bottom: 2000px"
     60  );
     61  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
     62    content.scrollBy(0, 40)
     63  );
     64 
     65  // target the body within the iframe
     66  const iframeBodySelector = ["iframe", "body"];
     67  let iframeHighlighterTestFront = highlighterTestFront;
     68  let bodySelectorWithinHighlighterEnv = iframeBodySelector;
     69 
     70  const target = toolbox.commands.targetCommand
     71    .getAllTargets([toolbox.commands.targetCommand.TYPES.FRAME])
     72    .find(t => t.url.startsWith("https://example.com"));
     73 
     74  // We need to retrieve the highlighterTestFront for the frame target.
     75  iframeHighlighterTestFront = await getHighlighterTestFront(toolbox, {
     76    target,
     77  });
     78 
     79  bodySelectorWithinHighlighterEnv = ["body"];
     80 
     81  info("Check that hovering the iframe <body> highlights the expected element");
     82  await hoverElement(inspector, iframeBodySelector, 40, 40);
     83 
     84  ok(
     85    await iframeHighlighterTestFront.assertHighlightedNode(
     86      bodySelectorWithinHighlighterEnv
     87    ),
     88    "highlighter is shown on the iframe body"
     89  );
     90  await isNodeCorrectlyHighlighted(
     91    iframeHighlighterTestFront,
     92    iframeBodySelector
     93  );
     94 
     95  info("Scrolling the document up");
     96  // scroll up so we can inspect the top level document again
     97  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
     98    content.scrollTo(0, 0)
     99  );
    100 
    101  info("Check that hovering iframe padding again does work");
    102  // the iframe has 13px of padding, so hovering at [1,1] should be enough.
    103  await hoverElement(inspector, "iframe", 1, 1);
    104  await isNodeCorrectlyHighlighted(highlighterTestFront, "iframe");
    105 
    106  info("And finally check that hovering the iframe <body> again does work");
    107  info("Check that hovering the iframe <body> highlights the expected element");
    108  await hoverElement(inspector, iframeBodySelector, 40, 40);
    109 
    110  ok(
    111    await iframeHighlighterTestFront.assertHighlightedNode(
    112      bodySelectorWithinHighlighterEnv
    113    ),
    114    "highlighter is shown on the iframe body"
    115  );
    116  await isNodeCorrectlyHighlighted(
    117    iframeHighlighterTestFront,
    118    iframeBodySelector
    119  );
    120 
    121  info("Stop the element picker.");
    122  await toolbox.nodePicker.stop({ canceled: true });
    123 });