tor-browser

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

browser_computed_style-editor-link.js (6016B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Tests the links from the computed view to the style editor.
      7 
      8 const STYLESHEET_URL =
      9  "data:text/css," + encodeURIComponent(".highlight {color: blue}");
     10 
     11 const DOCUMENT_URL =
     12  "data:text/html;charset=utf-8," +
     13  encodeURIComponent(
     14    `<html>
     15   <head>
     16   <title>Computed view style editor link test</title>
     17   <style type="text/css">
     18   html { color: #000000; }
     19   span { font-variant: small-caps; color: #000000; }
     20   .nomatches {color: #ff0000;}</style> <div id="first" style="margin: 10em;
     21   font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
     22   </style>
     23   <style>
     24   div { color: #f06; }
     25   </style>
     26   <link rel="stylesheet" type="text/css" href="${STYLESHEET_URL}">
     27   <script>
     28     const sheet = new CSSStyleSheet();
     29     sheet.replaceSync(".highlight { color: tomato; }");
     30     document.adoptedStyleSheets.push(sheet);
     31   </script>
     32   </head>
     33   <body>
     34   <h1>Some header text</h1>
     35   <p id="salutation" style="font-size: 12pt">hi.</p>
     36   <p id="body" style="font-size: 12pt">I am a test-case. This text exists
     37   solely to provide some things to
     38   <span style="color: yellow" class="highlight">
     39   highlight</span> and <span style="font-weight: bold">count</span>
     40   style list-items in the box at right. If you are reading this,
     41   you should go do something else instead. Maybe read a book. Or better
     42   yet, write some test-cases for another bit of code.
     43   <span style="font-style: italic">some text</span></p>
     44   <p id="closing">more text</p>
     45   <p>even more text</p>
     46   </div>
     47   </body>
     48   </html>`
     49  );
     50 
     51 add_task(async function () {
     52  await addTab(DOCUMENT_URL);
     53  const { toolbox, inspector, view } = await openComputedView();
     54  await selectNode("span", inspector);
     55 
     56  await testInlineStyle(view);
     57  await testFirstInlineStyleSheet(view, toolbox);
     58  await testSecondInlineStyleSheet(view, toolbox);
     59  await testExternalStyleSheet(view, toolbox);
     60  await testConstructedStyleSheet(view, toolbox);
     61 });
     62 
     63 async function testInlineStyle(view) {
     64  info("Testing inline style");
     65 
     66  await expandComputedViewPropertyByIndex(view, 0);
     67 
     68  info(
     69    "Check that we don't display a link for style attribute declaration in the computed-view"
     70  );
     71  checkComputedViewLink(view, {
     72    index: 0,
     73    expectedText: null,
     74  });
     75 }
     76 
     77 async function testFirstInlineStyleSheet(view, toolbox) {
     78  info("Testing inline stylesheet");
     79 
     80  info("Listening for toolbox switch to the styleeditor");
     81  const onSwitch = waitForStyleEditor(toolbox);
     82 
     83  info("Clicking an inline stylesheet");
     84  checkComputedViewLink(view, {
     85    index: 3,
     86    expectedText: "inline:3",
     87    expectedTitle: "inline:3",
     88  });
     89  const editor = await onSwitch;
     90 
     91  ok(true, "Switched to the style-editor panel in the toolbox");
     92 
     93  await validateStyleEditorSheet(editor, 0);
     94 }
     95 
     96 async function testSecondInlineStyleSheet(view, toolbox) {
     97  info("Testing second inline stylesheet");
     98 
     99  const panel = toolbox.getCurrentPanel();
    100  const onSelected = panel.UI.once("editor-selected");
    101 
    102  info("Switching back to the inspector panel in the toolbox");
    103  await toolbox.selectTool("inspector");
    104 
    105  info("Clicking on second inline stylesheet link");
    106  checkComputedViewLink(view, {
    107    index: 5,
    108    expectedText: "inline:2",
    109    expectedTitle: "inline:2",
    110  });
    111 
    112  info("Waiting for an editor to be selected in StyleEditor");
    113  const editor = await onSelected;
    114 
    115  is(
    116    toolbox.currentToolId,
    117    "styleeditor",
    118    "The style editor is selected again"
    119  );
    120  await validateStyleEditorSheet(editor, 1);
    121 }
    122 
    123 async function testExternalStyleSheet(view, toolbox) {
    124  info("Testing external stylesheet");
    125 
    126  const panel = toolbox.getCurrentPanel();
    127  const onSelected = panel.UI.once("editor-selected");
    128 
    129  info("Switching back to the inspector panel in the toolbox");
    130  await toolbox.selectTool("inspector");
    131 
    132  info("Clicking on an external stylesheet link");
    133  checkComputedViewLink(view, {
    134    index: 2,
    135    expectedText: `.highlight {color: blue}:1`,
    136    expectedTitle: `${STYLESHEET_URL}:1`,
    137  });
    138 
    139  info("Waiting for an editor to be selected in StyleEditor");
    140  const editor = await onSelected;
    141 
    142  is(
    143    toolbox.currentToolId,
    144    "styleeditor",
    145    "The style editor is selected again"
    146  );
    147  await validateStyleEditorSheet(editor, 2);
    148 }
    149 
    150 async function testConstructedStyleSheet(view, toolbox) {
    151  info("Testing constructed stylesheet");
    152 
    153  const panel = toolbox.getCurrentPanel();
    154  const onSelected = panel.UI.once("editor-selected");
    155 
    156  info("Switching back to the inspector panel in the toolbox");
    157  await toolbox.selectTool("inspector");
    158 
    159  info("Clicking on an constructed stylesheet link");
    160 
    161  checkComputedViewLink(view, {
    162    index: 1,
    163    expectedText: "constructed:1",
    164    expectedTitle: "constructed:1",
    165  });
    166 
    167  info("Waiting for an editor to be selected in StyleEditor");
    168  const editor = await onSelected;
    169 
    170  is(
    171    toolbox.currentToolId,
    172    "styleeditor",
    173    "The style editor is selected again"
    174  );
    175  ok(editor.styleSheet.constructed, "The constructed stylesheet is selected");
    176 }
    177 
    178 async function validateStyleEditorSheet(editor, expectedSheetIndex) {
    179  info("Validating style editor stylesheet");
    180  const expectedHref = await SpecialPowers.spawn(
    181    gBrowser.selectedBrowser,
    182    [expectedSheetIndex],
    183    _expectedSheetIndex =>
    184      content.document.styleSheets[_expectedSheetIndex].href
    185  );
    186  is(
    187    editor.styleSheet.href,
    188    expectedHref,
    189    "loaded stylesheet matches document stylesheet"
    190  );
    191 }
    192 
    193 function checkComputedViewLink(view, { index, expectedText, expectedTitle }) {
    194  const link = getComputedViewLinkByIndex(view, index);
    195 
    196  if (expectedText === null) {
    197    is(link, null, `There's no link for matched selector #${index}`);
    198    return;
    199  }
    200 
    201  is(link.innerText, expectedText, `Link #${index} has expected label`);
    202  is(
    203    link.getAttribute("title"),
    204    expectedTitle,
    205    `Link #${index} has expected title attribute`
    206  );
    207  link.scrollIntoView();
    208  link.click();
    209 }