tor-browser

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

browser_rules_highlight-property.js (2881B)

      1 /* Any copyright is dedicated to the Public Domain.
      2  http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Tests that the rule view's highlightProperty scrolls to the specified declaration.
      7 
      8 const TEST_URI = `
      9  <style type="text/css">
     10    .test {
     11      margin: 5px;
     12      font-size: 12px;
     13      border: 1px solid blue;
     14      margin-top: 20px;
     15    }
     16 
     17    .test::after {
     18      content: "!";
     19      color: red;
     20    }
     21  </style>
     22  <div class="test">Hello this is a test</div>
     23 `;
     24 
     25 add_task(async function () {
     26  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     27  const { inspector, view } = await openRuleView();
     28 
     29  await selectNode(".test", inspector);
     30  const { rules, styleWindow } = view;
     31 
     32  info(
     33    "Highlight the computed border-left-width declaration in the rule view."
     34  );
     35  const borderLeftWidthStyle = rules[2].textProps[2].computed.find(
     36    ({ name }) => name === "border-left-width"
     37  );
     38 
     39  let onHighlightProperty = view.once("element-highlighted");
     40  let isHighlighted = view.highlightProperty("border-left-width");
     41  await onHighlightProperty;
     42 
     43  ok(isHighlighted, "border-left-property is highlighted.");
     44  ok(
     45    isInViewport(borderLeftWidthStyle.element, styleWindow),
     46    "border-left-width is in view."
     47  );
     48 
     49  info("Highlight the font-size declaration in the rule view.");
     50  const fontSize = rules[2].textProps[1].editor;
     51 
     52  info("Wait for the view to scroll to the property.");
     53  onHighlightProperty = view.once("element-highlighted");
     54  isHighlighted = view.highlightProperty("font-size");
     55  await onHighlightProperty;
     56 
     57  ok(isHighlighted, "font-size property is highlighted.");
     58  ok(isInViewport(fontSize.element, styleWindow), "font-size is in view.");
     59 
     60  info("Highlight the pseudo-element's color declaration in the rule view.");
     61  const color = rules[0].textProps[1].editor;
     62 
     63  info("Wait for the view to scroll to the property.");
     64  onHighlightProperty = view.once("element-highlighted");
     65  isHighlighted = view.highlightProperty("color");
     66  await onHighlightProperty;
     67 
     68  ok(isHighlighted, "color property is highlighted.");
     69  ok(isInViewport(color.element, styleWindow), "color property is in view.");
     70 
     71  info("Highlight margin-top declaration in the rules view.");
     72  const marginTop = rules[2].textProps[3].editor;
     73 
     74  info("Wait for the view to scroll to the property.");
     75  onHighlightProperty = view.once("element-highlighted");
     76  isHighlighted = view.highlightProperty("margin-top");
     77  await onHighlightProperty;
     78 
     79  ok(isHighlighted, "margin-top property is highlighted.");
     80  ok(
     81    isInViewport(marginTop.element, styleWindow),
     82    "margin-top property is in view."
     83  );
     84 });
     85 
     86 function isInViewport(element, win) {
     87  const { top, left, bottom, right } = element.getBoundingClientRect();
     88  return (
     89    top >= 0 &&
     90    bottom <= win.innerHeight &&
     91    left >= 0 &&
     92    right <= win.innerWidth
     93  );
     94 }