tor-browser

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

browser_rules_edit-selector-nested-rules.js (1932B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Testing editing nested rules selector in the rule view.
      7 
      8 const STYLE = `
      9    h1 {
     10      color: lime;
     11      &.foo {
     12        color: red;
     13      }
     14    }`;
     15 
     16 const HTML = `<h1 class=foo>Nested</h1>`;
     17 
     18 const TEST_URI_INLINE_SHEET = `
     19  <style>${STYLE}</style>
     20  ${HTML}`;
     21 
     22 const TEST_URI_CONSTRUCTED_SHEET = `
     23  ${HTML}
     24  <script>
     25    const sheet = new CSSStyleSheet();
     26    sheet.replaceSync(\`${STYLE}\`);
     27    document.adoptedStyleSheets.push(sheet);
     28  </script>
     29 `;
     30 
     31 add_task(async function test_inline_sheet() {
     32  info("Run test with inline stylesheet");
     33  await runTest(TEST_URI_INLINE_SHEET);
     34 });
     35 
     36 add_task(async function test_constructed_sheet() {
     37  info("Run test with constructed stylesheet");
     38  await runTest(TEST_URI_CONSTRUCTED_SHEET);
     39 });
     40 
     41 async function runTest(uri) {
     42  await addTab(`data:text/html,<meta charset=utf8>${encodeURIComponent(uri)}`);
     43  const { inspector, view } = await openRuleView();
     44 
     45  await selectNode("h1", inspector);
     46 
     47  is(
     48    await getComputedStyleProperty("h1", null, "color"),
     49    "rgb(255, 0, 0)",
     50    "h1 color is red initially"
     51  );
     52 
     53  info(`Modify "&.foo" selector into "&.bar"`);
     54  const ruleEditor = getRuleViewRuleEditor(view, 1);
     55  const editor = await focusEditableField(view, ruleEditor.selectorText);
     56  const onRuleViewChanged = view.once("ruleview-changed");
     57  editor.input.value = "&.bar";
     58  EventUtils.synthesizeKey("KEY_Enter");
     59  await onRuleViewChanged;
     60 
     61  is(
     62    await getComputedStyleProperty("h1", null, "color"),
     63    "rgb(0, 255, 0)",
     64    "h1 color is now lime, as the new selector does not match the element"
     65  );
     66 
     67  info(`Modify color in "h1" rule to blue`);
     68  await updateDeclaration(view, 2, { color: "lime" }, { color: "blue" });
     69  is(
     70    await getComputedStyleProperty("h1", null, "color"),
     71    "rgb(0, 0, 255)",
     72    "h1 color is now blue"
     73  );
     74 }