1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/styleinspector/test/browser_ruleview_style-editor-link.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,130 @@
1.4 +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
1.5 +/* Any copyright is dedicated to the Public Domain.
1.6 + http://creativecommons.org/publicdomain/zero/1.0/ */
1.7 +
1.8 +"use strict";
1.9 +
1.10 +// Test the links from the rule-view to the styleeditor
1.11 +
1.12 +const STYLESHEET_URL = "data:text/css,"+encodeURIComponent(
1.13 + ["#first {",
1.14 + "color: blue",
1.15 + "}"].join("\n"));
1.16 +
1.17 +const EXTERNAL_STYLESHEET_FILE_NAME = "doc_style_editor_link.css";
1.18 +const EXTERNAL_STYLESHEET_URL = TEST_URL_ROOT + EXTERNAL_STYLESHEET_FILE_NAME;
1.19 +
1.20 +const DOCUMENT_URL = "data:text/html,"+encodeURIComponent(
1.21 + ['<html>' +
1.22 + '<head>' +
1.23 + '<title>Rule view style editor link test</title>',
1.24 + '<style type="text/css"> ',
1.25 + 'html { color: #000000; } ',
1.26 + 'div { font-variant: small-caps; color: #000000; } ',
1.27 + '.nomatches {color: #ff0000;}</style> <div id="first" style="margin: 10em; ',
1.28 + 'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">',
1.29 + '</style>',
1.30 + '<link rel="stylesheet" type="text/css" href="'+STYLESHEET_URL+'">',
1.31 + '<link rel="stylesheet" type="text/css" href="'+EXTERNAL_STYLESHEET_URL+'">',
1.32 + '</head>',
1.33 + '<body>',
1.34 + '<h1>Some header text</h1>',
1.35 + '<p id="salutation" style="font-size: 12pt">hi.</p>',
1.36 + '<p id="body" style="font-size: 12pt">I am a test-case. This text exists ',
1.37 + 'solely to provide some things to ',
1.38 + '<span style="color: yellow" class="highlight">',
1.39 + 'highlight</span> and <span style="font-weight: bold">count</span> ',
1.40 + 'style list-items in the box at right. If you are reading this, ',
1.41 + 'you should go do something else instead. Maybe read a book. Or better ',
1.42 + 'yet, write some test-cases for another bit of code. ',
1.43 + '<span style="font-style: italic">some text</span></p>',
1.44 + '<p id="closing">more text</p>',
1.45 + '<p>even more text</p>',
1.46 + '</div>',
1.47 + '</body>',
1.48 + '</html>'].join("\n"));
1.49 +
1.50 +let test = asyncTest(function*() {
1.51 + yield addTab(DOCUMENT_URL);
1.52 + let {toolbox, inspector, view} = yield openRuleView();
1.53 +
1.54 + info("Select the test node");
1.55 + yield selectNode("div", inspector);
1.56 +
1.57 + yield testInlineStyle(view, inspector);
1.58 + yield testInlineStyleSheet(view, toolbox);
1.59 + yield testExternalStyleSheet(view, toolbox);
1.60 +});
1.61 +
1.62 +function* testInlineStyle(view, inspector) {
1.63 + info("Testing inline style");
1.64 +
1.65 + let onWindow = waitForWindow();
1.66 + info("Clicking on the first link in the rule-view");
1.67 + let link = getRuleViewLinkByIndex(view, 0);
1.68 + link.scrollIntoView();
1.69 + link.click();
1.70 +
1.71 + let win = yield onWindow;
1.72 +
1.73 + let windowType = win.document.documentElement.getAttribute("windowtype");
1.74 + is(windowType, "navigator:view-source", "View source window is open");
1.75 + info("Closing window");
1.76 + win.close();
1.77 +}
1.78 +
1.79 +function* testInlineStyleSheet(view, toolbox) {
1.80 + info("Testing inline stylesheet");
1.81 +
1.82 + info("Listening for toolbox switch to the styleeditor");
1.83 + let onSwitch = waitForStyleEditor(toolbox);
1.84 +
1.85 + info("Clicking an inline stylesheet");
1.86 + let link = getRuleViewLinkByIndex(view, 4);
1.87 + link.scrollIntoView();
1.88 + link.click();
1.89 + let editor = yield onSwitch;
1.90 +
1.91 + ok(true, "Switched to the style-editor panel in the toolbox");
1.92 +
1.93 + validateStyleEditorSheet(editor, 0);
1.94 +}
1.95 +
1.96 +function* testExternalStyleSheet(view, toolbox) {
1.97 + info("Testing external stylesheet");
1.98 +
1.99 + info("Waiting for the stylesheet editor to be selected");
1.100 + let panel = toolbox.getCurrentPanel();
1.101 + let onSelected = panel.UI.once("editor-selected");
1.102 +
1.103 + info("Switching back to the inspector panel in the toolbox");
1.104 + yield toolbox.selectTool("inspector");
1.105 +
1.106 + info("Clicking on an external stylesheet link");
1.107 + testRuleViewLinkLabel(view);
1.108 + let link = getRuleViewLinkByIndex(view, 1);
1.109 + link.scrollIntoView();
1.110 + link.click();
1.111 + let editor = yield onSelected;
1.112 +
1.113 + is(toolbox.currentToolId, "styleeditor", "The style editor is selected again");
1.114 + validateStyleEditorSheet(editor, 1);
1.115 +}
1.116 +
1.117 +function validateStyleEditorSheet(editor, expectedSheetIndex) {
1.118 + info("validating style editor stylesheet");
1.119 + let sheet = content.document.styleSheets[expectedSheetIndex];
1.120 + is(editor.styleSheet.href, sheet.href, "loaded stylesheet matches document stylesheet");
1.121 +}
1.122 +
1.123 +function testRuleViewLinkLabel(view) {
1.124 + let link = getRuleViewLinkByIndex(view, 2);
1.125 + let labelElem = link.querySelector(".source-link-label");
1.126 + let value = labelElem.getAttribute("value");
1.127 + let tooltipText = labelElem.getAttribute("tooltiptext");
1.128 +
1.129 + is(value, EXTERNAL_STYLESHEET_FILE_NAME + ":1",
1.130 + "rule view stylesheet display value matches filename and line number");
1.131 + is(tooltipText, EXTERNAL_STYLESHEET_URL,
1.132 + "rule view stylesheet tooltip text matches the full URI path");
1.133 +}
