tor-browser

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

browser_inspector_highlighter-eyedropper-frames.js (2725B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 "use strict";
      5 
      6 // Test that the eyedropper works on a page with iframes.
      7 
      8 const TOP_LEVEL_BACKGROUND_COLOR = "#ff0000";
      9 const SAME_ORIGIN_FRAME_BACKGROUND_COLOR = "#00ee00";
     10 const REMOTE_FRAME_BACKGROUND_COLOR = "#0000dd";
     11 
     12 const HTML = `
     13 <style>
     14  body {
     15    height: 100vh;
     16    background: ${TOP_LEVEL_BACKGROUND_COLOR};
     17    margin: 0;
     18  }
     19 
     20  div, iframe {
     21    border: none;
     22    display: block;
     23    height: 100px;
     24    text-align: center;
     25  }
     26 </style>
     27 <div>top-level element</div>
     28 <iframe src="https://example.com/document-builder.sjs?html=<style>body {background:${encodeURIComponent(
     29  SAME_ORIGIN_FRAME_BACKGROUND_COLOR
     30 )};text-align: center;}</style><body>same origin iframe</body>"></iframe>
     31 <iframe src="https://example.org/document-builder.sjs?html=<style>body {background:${encodeURIComponent(
     32  REMOTE_FRAME_BACKGROUND_COLOR
     33 )};text-align: center;}</style><body>remote iframe</body>"></iframe>
     34 `;
     35 const TEST_URI = `https://example.com/document-builder.sjs?html=${encodeURIComponent(
     36  HTML
     37 )}`;
     38 
     39 add_task(async function () {
     40  const { inspector, highlighterTestFront } =
     41    await openInspectorForURL(TEST_URI);
     42 
     43  const toggleButton = inspector.panelDoc.querySelector(
     44    "#inspector-eyedropper-toggle"
     45  );
     46  toggleButton.click();
     47  await TestUtils.waitForCondition(() =>
     48    highlighterTestFront.isEyeDropperVisible()
     49  );
     50 
     51  ok(true, "Eye dropper is visible");
     52 
     53  const checkColorAt = (...args) =>
     54    checkEyeDropperColorAt(highlighterTestFront, ...args);
     55 
     56  //   The content page has the following layout:
     57  //
     58  //  +------------------------------------+
     59  //  |   top level div (#ff0000)          | 100px
     60  //  +------------------------------------+
     61  //  |   same origin iframe (#00ee00)     | 100px
     62  //  +------------------------------------+
     63  //  |   remote iframe (#0000dd)          | 100px
     64  //  +------------------------------------+
     65 
     66  await checkColorAt(
     67    50,
     68    50,
     69    TOP_LEVEL_BACKGROUND_COLOR,
     70    "The eyedropper holds the expected color for the top-level element"
     71  );
     72 
     73  await checkColorAt(
     74    50,
     75    150,
     76    SAME_ORIGIN_FRAME_BACKGROUND_COLOR,
     77    "The eyedropper holds the expected color for the same-origin iframe"
     78  );
     79 
     80  await checkColorAt(
     81    50,
     82    250,
     83    REMOTE_FRAME_BACKGROUND_COLOR,
     84    "The eyedropper holds the expected color for the remote iframe"
     85  );
     86 
     87  info("Hide the eyedropper");
     88  toggleButton.click();
     89  await TestUtils.waitForCondition(async () => {
     90    const visible = await highlighterTestFront.isEyeDropperVisible();
     91    return !visible;
     92  });
     93 });