tor-browser

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

browser_rules_edit-value-after-name_03.js (2478B)

      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 clicking on color swatch while editing the property name
      7 // will show the color tooltip with the correct value. See also Bug 1248274.
      8 
      9 const TEST_URI = `
     10  <style type="text/css">
     11  #testid {
     12    color: red;
     13    background: linear-gradient(
     14      90deg,
     15      rgb(183,222,237),
     16      rgb(33,180,226),
     17      rgb(31,170,217),
     18      rgba(200,170,140,0.5));
     19  }
     20  </style>
     21  <div id="testid">Styled Node</div>
     22 `;
     23 
     24 add_task(async function () {
     25  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     26  const { inspector, view } = await openRuleView();
     27 
     28  info("Test click on color swatch while editing property name");
     29 
     30  await selectNode("#testid", inspector);
     31  const prop = getTextProperty(view, 1, {
     32    background:
     33      "linear-gradient( 90deg, rgb(183,222,237), rgb(33,180,226), rgb(31,170,217), rgba(200,170,140,0.5))",
     34  });
     35  const propEditor = prop.editor;
     36 
     37  const swatchSpan = propEditor.valueSpan.querySelectorAll(
     38    ".inspector-colorswatch"
     39  )[3];
     40  const colorPicker = view.tooltips.getTooltip("colorPicker");
     41 
     42  info("Focus the background name span");
     43  await focusEditableField(view, propEditor.nameSpan);
     44  const editor = inplaceEditor(propEditor.doc.activeElement);
     45 
     46  info(
     47    "Modify the background property to background-image to trigger the " +
     48      "property-value-updated event"
     49  );
     50  editor.input.value = "background-image";
     51 
     52  const onRuleViewChanged = view.once("ruleview-changed");
     53  const onPropertyValueUpdate = view.once("property-value-updated");
     54  const onReady = colorPicker.once("ready");
     55 
     56  info("blur propEditor.nameSpan by clicking on the color swatch");
     57  EventUtils.synthesizeMouseAtCenter(
     58    swatchSpan,
     59    {},
     60    propEditor.doc.defaultView
     61  );
     62 
     63  info(
     64    "wait for ruleview-changed event to be triggered to prevent pending requests"
     65  );
     66  await onRuleViewChanged;
     67 
     68  info("wait for the property value to be updated");
     69  await onPropertyValueUpdate;
     70 
     71  info("wait for the color picker to be shown");
     72  await onReady;
     73 
     74  ok(true, "The color picker was shown on click of the color swatch");
     75  ok(
     76    !inplaceEditor(propEditor.valueSpan),
     77    "The inplace editor wasn't shown as a result of the color swatch click"
     78  );
     79 
     80  const spectrum = colorPicker.spectrum;
     81  is(
     82    `"${spectrum.rgb}"`,
     83    '"200,170,140,0.5"',
     84    "The correct color picker was shown"
     85  );
     86 });