tor-browser

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

browser_rules_livepreview.js (2566B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test that changes are previewed when editing a property value.
      7 
      8 const TEST_URI = `
      9  <style type="text/css">
     10    #testid {
     11      display:block;
     12    }
     13  </style>
     14  <div id="testid">Styled Node</div><span>inline element</span>
     15 `;
     16 
     17 // Format
     18 // {
     19 //   value : what to type in the field
     20 //   expected : expected computed style on the targeted element
     21 // }
     22 const TEST_DATA = [
     23  { value: "inline", expected: "inline" },
     24  { value: "inline-block", expected: "inline-block" },
     25 
     26  // Invalid property values should not apply, and should fall back to default
     27  { value: "red", expected: "block" },
     28  { value: "something", expected: "block" },
     29 
     30  { escape: true, value: "inline", expected: "block" },
     31 ];
     32 
     33 add_task(async function () {
     34  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     35  const { inspector, view } = await openRuleView();
     36  await selectNode("#testid", inspector);
     37 
     38  for (const data of TEST_DATA) {
     39    await testLivePreviewData(data, view, "#testid");
     40  }
     41 });
     42 
     43 async function testLivePreviewData(data, ruleView, selector) {
     44  const rule = getRuleViewRuleEditor(ruleView, 1).rule;
     45  const propEditor = rule.textProps[0].editor;
     46 
     47  info("Focusing the property value inplace-editor");
     48  const editor = await focusEditableField(ruleView, propEditor.valueSpan);
     49  is(
     50    inplaceEditor(propEditor.valueSpan),
     51    editor,
     52    "The focused editor is the value"
     53  );
     54 
     55  info("Entering value in the editor: " + data.value);
     56  const onPreviewDone = ruleView.once("ruleview-changed");
     57  EventUtils.sendString(data.value, ruleView.styleWindow);
     58  ruleView.debounce.flush();
     59  await onPreviewDone;
     60 
     61  const onValueDone = ruleView.once("ruleview-changed");
     62  if (data.escape) {
     63    // First, close the popup
     64    await waitFor(() => ruleView.popup && ruleView.popup.isOpen);
     65    ok(true, "Popup was opened");
     66    const onPopupClosed = once(ruleView.popup, "popup-closed");
     67    EventUtils.synthesizeKey("VK_ESCAPE", {}, ruleView.styleWindow);
     68    await onPopupClosed;
     69    ok(true, "Popup was closed");
     70 
     71    // Then hit escape a second time to cancel the change
     72    EventUtils.synthesizeKey("KEY_Escape");
     73  } else {
     74    EventUtils.synthesizeKey("KEY_Enter");
     75  }
     76  await onValueDone;
     77 
     78  // While the editor is still focused in, the display should have
     79  // changed already
     80  is(
     81    await getComputedStyleProperty(selector, null, "display"),
     82    data.expected,
     83    "Element should be previewed as " + data.expected
     84  );
     85 }