tor-browser

browser_inspector_highlighter-cssshape_offset-path.js (6237B)

---

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

"use strict";

// Test the creation of the CSS shapes highlighter for offset-path.

const TEST_URL = `data:text/html,<meta charset=utf8>${encodeURIComponent(`
 <style>
   html, body  {margin: 0; padding: 0; }

   .wrapper {
     width: 100px;
     height: 100px;
     background: tomato;
   }

   .target {
     width: 20px;
     height: 20px;
     display: block;
     background: gold;
     offset-path: inset(10% 20%);
   }

   #abs {
     position: absolute;
     background: cyan;
     offset-path: inset(10% 20%);
   }
 </style>
 <div class=wrapper>
   <span id=regular class=target></span>
   <span id=abs class=target></span>
 </div>`)}`;

const { TYPES } = ChromeUtils.importESModule(
 "resource://devtools/shared/highlighters.mjs"
);
const HIGHLIGHTER_TYPE = TYPES.SHAPES;

add_task(async function () {
 const env = await openInspectorForURL(TEST_URL);
 const { highlighterTestFront, inspector } = env;
 const view = selectRuleView(inspector);

 await selectNode("#regular", inspector);

 info(`Show offset-path shape highlighter for regular case`);
 await toggleShapesHighlighter(view, ".target", "offset-path", true);

 info(
   "Check that highlighter is drawn relatively to the selected node parent node"
 );

 const wrapperQuads =
   await getAllAdjustedQuadsForContentPageElement(".wrapper");
 const {
   width: wrapperWidth,
   height: wrapperHeight,
   x: wrapperX,
   y: wrapperY,
 } = wrapperQuads.content[0].bounds;

 const rect = await getShapeHighlighterRect(highlighterTestFront, inspector);
 // SVG stroke seems to impact boundingClientRect differently depending on platform/hardware.
 // Let's assert that the delta is okay, and use it for the different assertions.
 const delta = wrapperX + wrapperWidth * 0.2 - rect.x;
 Assert.lessOrEqual(Math.abs(delta), 1, `delta is <=1 (${Math.abs(delta)})`);

 // Coming from inset(10% 20%)
 let inlineOffset = 0.2 * wrapperWidth - delta;
 let blockOffset = 0.1 * wrapperHeight - delta;

 is(rect.x, wrapperX + inlineOffset, "Rect has expected x");
 is(rect.y, wrapperY + blockOffset, "Rect has expected y");
 is(rect.width, wrapperWidth - inlineOffset * 2, "Rect has expected width");
 is(rect.height, wrapperHeight - blockOffset * 2, "Rect has expected height");

 const x = parseFloat(
   await highlighterTestFront.getHighlighterNodeAttribute(
     "shapes-rect",
     "x",
     inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
   )
 );
 const y = parseFloat(
   await highlighterTestFront.getHighlighterNodeAttribute(
     "shapes-rect",
     "y",
     inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
   )
 );
 const width = parseFloat(
   await highlighterTestFront.getHighlighterNodeAttribute(
     "shapes-rect",
     "width",
     inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE)
   )
 );

 const left = (wrapperWidth * x) / 100;
 const top = (wrapperHeight * y) / 100;
 const right = left + (wrapperWidth * width) / 100;
 const xCenter = (left + right) / 2;
 const dy = wrapperHeight / 10;

 const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(env);
 const { mouse } = helper;

 info("Moving inset top");
 const onShapeChangeApplied = view.highlighters.once(
   "shapes-highlighter-changes-applied"
 );
 await mouse.down(xCenter, top, ".wrapper");
 await mouse.move(xCenter, top + dy, ".wrapper");
 await mouse.up(xCenter, top + dy, ".wrapper");
 await reflowContentPage();
 await onShapeChangeApplied;

 const offsetPathAfterUpdate = await SpecialPowers.spawn(
   gBrowser.selectedBrowser,
   [],
   () =>
     content.getComputedStyle(content.document.getElementById("regular"))
       .offsetPath
 );

 is(
   offsetPathAfterUpdate,
   `inset(${top + dy}% 20% 10%)`,
   "Inset edges successfully moved"
 );

 info(`Hide offset-path shape highlighter`);
 await toggleShapesHighlighter(view, ".target", "offset-path", false);

 info(`Show offset-path shape highlighter for absolutely positioned element`);
 await selectNode("#abs", inspector);
 await toggleShapesHighlighter(view, ".target", "offset-path", true);

 const viewportClientRect = await SpecialPowers.spawn(
   gBrowser.selectedBrowser,
   [],
   () => {
     const [quad] = content.document.getBoxQuads();
     return {
       x: quad.p1.x,
       y: quad.p1.y,
       width: quad.p2.x - quad.p1.x,
       height: quad.p3.y - quad.p2.y,
     };
   }
 );

 const absRect = await getShapeHighlighterRect(
   highlighterTestFront,
   inspector
 );

 inlineOffset = 0.2 * viewportClientRect.width - delta;
 blockOffset = 0.1 * viewportClientRect.height - delta;

 Assert.less(
   Math.abs(absRect.x - (viewportClientRect.x + inlineOffset)),
   1,
   `Rect approximately has expected x (got ${absRect.x}, expected ${
     viewportClientRect.x + inlineOffset
   })`
 );
 Assert.less(
   Math.abs(absRect.y - (viewportClientRect.y + blockOffset)),
   1,
   `Rect approximately has expected y (got ${absRect.y}, expected ${
     viewportClientRect.y + blockOffset
   })`
 );
 Assert.less(
   Math.abs(absRect.width - (viewportClientRect.width - inlineOffset * 2)),
   1,
   `Rect approximately has expected width (got ${absRect.width}, expected ${
     viewportClientRect.width - inlineOffset * 2
   })`
 );
 Assert.less(
   Math.abs(absRect.height - (viewportClientRect.height - blockOffset * 2)),
   1,
   `Rect approximately has expected height (got ${absRect.height}, expected ${
     viewportClientRect.height - blockOffset * 2
   })`
 );

 info(`Hide offset-path shape highlighter for absolutely positioned element`);
 await toggleShapesHighlighter(view, ".target", "offset-path", false);
});

async function getShapeHighlighterRect(highlighterTestFront, inspector) {
 const highlighterFront =
   inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE);
 return highlighterTestFront.getHighlighterBoundingClientRect(
   "shapes-rect",
   highlighterFront.actorID
 );
}