tor-browser

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

browser_computed_matched-selectors-toggle.js (3864B)

      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 computed view properties can be expanded and collapsed with
      7 // either the twisty or by dbl-clicking on the container.
      8 
      9 const TEST_URI = `
     10  <style type="text/css"> ,
     11    html { color: #000000; font-size: 15pt; }
     12    h1 { color: red; }
     13  </style>
     14  <h1>Some header text</h1>
     15 `;
     16 
     17 add_task(async function () {
     18  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     19  const { inspector, view } = await openComputedView();
     20  await selectNode("h1", inspector);
     21 
     22  await testExpandOnTwistyClick(view, inspector);
     23  await testCollapseOnTwistyClick(view, inspector);
     24  await testExpandOnDblClick(view, inspector);
     25  await testCollapseOnDblClick(view, inspector);
     26 });
     27 
     28 async function testExpandOnTwistyClick({ styleDocument }, inspector) {
     29  info("Testing that a property expands on twisty click");
     30 
     31  info("Getting twisty element");
     32  const twisty = styleDocument.querySelector(".computed-expandable");
     33  ok(twisty, "Twisty found");
     34 
     35  const onExpand = inspector.once("computed-view-property-expanded");
     36  info("Clicking on the twisty element");
     37  twisty.click();
     38 
     39  await onExpand;
     40 
     41  // Expanded means the matchedselectors div is not empty
     42  const matchedSelectorsEl = twisty
     43    .closest(".computed-property-view")
     44    .querySelector(".matchedselectors");
     45  ok(
     46    !!matchedSelectorsEl.childNodes.length,
     47    "Matched selectors are expanded on twisty click"
     48  );
     49 }
     50 
     51 async function testCollapseOnTwistyClick({ styleDocument }, inspector) {
     52  info("Testing that a property collapses on twisty click");
     53 
     54  info("Getting twisty element");
     55  const twisty = styleDocument.querySelector(".computed-expandable");
     56  ok(twisty, "Twisty found");
     57 
     58  const onCollapse = inspector.once("computed-view-property-collapsed");
     59  info("Clicking on the twisty element");
     60  twisty.click();
     61 
     62  await onCollapse;
     63 
     64  // Collapsed means the matchedselectors div is empty
     65  const matchedSelectorsEl = twisty
     66    .closest(".computed-property-view")
     67    .querySelector(".matchedselectors");
     68  is(
     69    matchedSelectorsEl.childNodes.length,
     70    0,
     71    "Matched selectors are collapsed on twisty click"
     72  );
     73 }
     74 
     75 async function testExpandOnDblClick({ styleDocument, styleWindow }, inspector) {
     76  info("Testing that a property expands on container dbl-click");
     77 
     78  info("Getting computed property container");
     79  const container = styleDocument.querySelector(
     80    "#computed-container .computed-property-view"
     81  );
     82  ok(container, "Container found");
     83 
     84  container.scrollIntoView();
     85 
     86  const onExpand = inspector.once("computed-view-property-expanded");
     87  info("Dbl-clicking on the container");
     88  EventUtils.synthesizeMouseAtCenter(container, { clickCount: 2 }, styleWindow);
     89 
     90  await onExpand;
     91 
     92  // Expanded means the matchedselectors div is not empty
     93  const matchedSelectorsEl = container.querySelector(".matchedselectors");
     94  ok(
     95    !!matchedSelectorsEl.childNodes.length,
     96    "Matched selectors are expanded on dblclick"
     97  );
     98 }
     99 
    100 async function testCollapseOnDblClick(
    101  { styleDocument, styleWindow },
    102  inspector
    103 ) {
    104  info("Testing that a property collapses on container dbl-click");
    105 
    106  info("Getting computed property container");
    107  const container = styleDocument.querySelector(
    108    "#computed-container .computed-property-view"
    109  );
    110  ok(container, "Container found");
    111 
    112  const onCollapse = inspector.once("computed-view-property-collapsed");
    113  info("Dbl-clicking on the container");
    114  EventUtils.synthesizeMouseAtCenter(container, { clickCount: 2 }, styleWindow);
    115 
    116  await onCollapse;
    117 
    118  // Collapsed means the matchedselectors div is empty
    119  const matchedSelectorsEl = container.querySelector(".matchedselectors");
    120  is(
    121    matchedSelectorsEl.childNodes.length,
    122    0,
    123    "Matched selectors are collapsed on dblclick"
    124  );
    125 }