tor-browser

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

browser_inspector_highlighter-inline.js (3091B)

      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 
      5 "use strict";
      6 
      7 requestLongerTimeout(2);
      8 
      9 // Test that highlighting various inline boxes displays the right number of
     10 // polygons in the page.
     11 
     12 const TEST_URL = URL_ROOT + "doc_inspector_highlighter_inline.html";
     13 const TEST_DATA = [
     14  "body",
     15  "h1",
     16  "h2",
     17  "h2 em",
     18  "p",
     19  "p span",
     20  // The following test case used to fail. See bug 1139925.
     21  "[dir=rtl] > span",
     22 ];
     23 
     24 add_task(async function () {
     25  info("Loading the test document and opening the inspector");
     26  const { inspector, highlighterTestFront } =
     27    await openInspectorForURL(TEST_URL);
     28 
     29  for (const selector of TEST_DATA) {
     30    info("Selecting and highlighting node " + selector);
     31    await selectAndHighlightNode(selector, inspector);
     32 
     33    info("Get all quads for this node");
     34    const data = await getAllAdjustedQuadsForContentPageElement(selector);
     35 
     36    info(
     37      "Iterate over the box-model regions and verify that the highlighter " +
     38        "is correct"
     39    );
     40    for (const region of ["margin", "border", "padding", "content"]) {
     41      const { points } =
     42        await highlighterTestFront.getHighlighterRegionPath(region);
     43      is(
     44        points.length,
     45        data[region].length,
     46        "The highlighter's " +
     47          region +
     48          " path defines the correct number of boxes"
     49      );
     50    }
     51 
     52    info(
     53      "Verify that the guides define a rectangle that contains all " +
     54        "content boxes"
     55    );
     56 
     57    const expectedContentRect = {
     58      p1: { x: Infinity, y: Infinity },
     59      p2: { x: -Infinity, y: Infinity },
     60      p3: { x: -Infinity, y: -Infinity },
     61      p4: { x: Infinity, y: -Infinity },
     62    };
     63    for (const { p1, p2, p3, p4 } of data.content) {
     64      expectedContentRect.p1.x = Math.min(expectedContentRect.p1.x, p1.x);
     65      expectedContentRect.p1.y = Math.min(expectedContentRect.p1.y, p1.y);
     66      expectedContentRect.p2.x = Math.max(expectedContentRect.p2.x, p2.x);
     67      expectedContentRect.p2.y = Math.min(expectedContentRect.p2.y, p2.y);
     68      expectedContentRect.p3.x = Math.max(expectedContentRect.p3.x, p3.x);
     69      expectedContentRect.p3.y = Math.max(expectedContentRect.p3.y, p3.y);
     70      expectedContentRect.p4.x = Math.min(expectedContentRect.p4.x, p4.x);
     71      expectedContentRect.p4.y = Math.max(expectedContentRect.p4.y, p4.y);
     72    }
     73 
     74    const contentRect = await highlighterTestFront.getGuidesRectangle();
     75 
     76    for (const point of ["p1", "p2", "p3", "p4"]) {
     77      is(
     78        Math.round(contentRect[point].x),
     79        Math.round(expectedContentRect[point].x),
     80        "x coordinate of point " +
     81          point +
     82          " of the content rectangle defined by the outer guides is correct"
     83      );
     84      is(
     85        Math.round(contentRect[point].y),
     86        Math.round(expectedContentRect[point].y),
     87        "y coordinate of point " +
     88          point +
     89          " of the content rectangle defined by the outer guides is correct"
     90      );
     91    }
     92  }
     93 });