The Tor Browser: browser/devtools/styleinspector/test/browser_ruleview

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

     1 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */

     2 /* Any copyright is dedicated to the Public Domain.

     3  http://creativecommons.org/publicdomain/zero/1.0/ */

     5 "use strict";

     7 // Test the links from the rule-view to the styleeditor

     9 const STYLESHEET_URL = "data:text/css,"+encodeURIComponent(

    10   ["#first {",

    11    "color: blue",

    12    "}"].join("\n"));

    14 const EXTERNAL_STYLESHEET_FILE_NAME = "doc_style_editor_link.css";

    15 const EXTERNAL_STYLESHEET_URL = TEST_URL_ROOT + EXTERNAL_STYLESHEET_FILE_NAME;

    17 const DOCUMENT_URL = "data:text/html,"+encodeURIComponent(

    18   ['<html>' +

    19    '<head>' +

    20    '<title>Rule view style editor link test</title>',

    21    '<style type="text/css"> ',

    22    'html { color: #000000; } ',

    23    'div { font-variant: small-caps; color: #000000; } ',

    24    '.nomatches {color: #ff0000;}</style> <div id="first" style="margin: 10em; ',

    25    'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">',

    26    '</style>',

    27    '<link rel="stylesheet" type="text/css" href="'+STYLESHEET_URL+'">',

    28    '<link rel="stylesheet" type="text/css" href="'+EXTERNAL_STYLESHEET_URL+'">',

    29    '</head>',

    30    '<body>',

    31    '<h1>Some header text</h1>',

    32    '<p id="salutation" style="font-size: 12pt">hi.</p>',

    33    '<p id="body" style="font-size: 12pt">I am a test-case. This text exists ',

    34    'solely to provide some things to ',

    35    '<span style="color: yellow" class="highlight">',

    36    'highlight</span> and <span style="font-weight: bold">count</span> ',

    37    'style list-items in the box at right. If you are reading this, ',

    38    'you should go do something else instead. Maybe read a book. Or better ',

    39    'yet, write some test-cases for another bit of code. ',

    40    '<span style="font-style: italic">some text</span></p>',

    41    '<p id="closing">more text</p>',

    42    '<p>even more text</p>',

    43    '</div>',

    44    '</body>',

    45    '</html>'].join("\n"));

    47 let test = asyncTest(function*() {

    48   yield addTab(DOCUMENT_URL);

    49   let {toolbox, inspector, view} = yield openRuleView();

    51   info("Select the test node");

    52   yield selectNode("div", inspector);

    54   yield testInlineStyle(view, inspector);

    55   yield testInlineStyleSheet(view, toolbox);

    56   yield testExternalStyleSheet(view, toolbox);

    57 });

    59 function* testInlineStyle(view, inspector) {

    60   info("Testing inline style");

    62   let onWindow = waitForWindow();

    63   info("Clicking on the first link in the rule-view");

    64   let link = getRuleViewLinkByIndex(view, 0);

    65   link.scrollIntoView();

    66   link.click();

    68   let win = yield onWindow;

    70   let windowType = win.document.documentElement.getAttribute("windowtype");

    71   is(windowType, "navigator:view-source", "View source window is open");

    72   info("Closing window");

    73   win.close();

    74 }

    76 function* testInlineStyleSheet(view, toolbox) {

    77   info("Testing inline stylesheet");

    79   info("Listening for toolbox switch to the styleeditor");

    80   let onSwitch = waitForStyleEditor(toolbox);

    82   info("Clicking an inline stylesheet");

    83   let link = getRuleViewLinkByIndex(view, 4);

    84   link.scrollIntoView();

    85   link.click();

    86   let editor = yield onSwitch;

    88   ok(true, "Switched to the style-editor panel in the toolbox");

    90   validateStyleEditorSheet(editor, 0);

    91 }

    93 function* testExternalStyleSheet(view, toolbox) {

    94   info("Testing external stylesheet");

    96   info("Waiting for the stylesheet editor to be selected");

    97   let panel = toolbox.getCurrentPanel();

    98   let onSelected = panel.UI.once("editor-selected");

   100   info("Switching back to the inspector panel in the toolbox");

   101   yield toolbox.selectTool("inspector");

   103   info("Clicking on an external stylesheet link");

   104   testRuleViewLinkLabel(view);

   105   let link =  getRuleViewLinkByIndex(view, 1);

   106   link.scrollIntoView();

   107   link.click();

   108   let editor = yield onSelected;

   110   is(toolbox.currentToolId, "styleeditor", "The style editor is selected again");

   111   validateStyleEditorSheet(editor, 1);

   112 }

   114 function validateStyleEditorSheet(editor, expectedSheetIndex) {

   115   info("validating style editor stylesheet");

   116   let sheet = content.document.styleSheets[expectedSheetIndex];

   117   is(editor.styleSheet.href, sheet.href, "loaded stylesheet matches document stylesheet");

   118 }

   120 function testRuleViewLinkLabel(view) {

   121   let link = getRuleViewLinkByIndex(view, 2);

   122   let labelElem = link.querySelector(".source-link-label");

   123   let value = labelElem.getAttribute("value");

   124   let tooltipText = labelElem.getAttribute("tooltiptext");

   126   is(value, EXTERNAL_STYLESHEET_FILE_NAME + ":1",

   127     "rule view stylesheet display value matches filename and line number");

   128   is(tooltipText, EXTERNAL_STYLESHEET_URL,

   129     "rule view stylesheet tooltip text matches the full URI path");

   130 }

The Tor Browser / file revision