The Tor Browser / file comparison
comparison: browser/devtools/styleinspector/test/browser_ruleview_style-editor-link.js
browser/devtools/styleinspector/test/browser_ruleview_style-editor-link.js
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:e506e375bb9a |
|---|---|
| 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/ */ | |
| 4 | |
| 5 "use strict"; | |
| 6 | |
| 7 // Test the links from the rule-view to the styleeditor | |
| 8 | |
| 9 const STYLESHEET_URL = "data:text/css,"+encodeURIComponent( | |
| 10 ["#first {", | |
| 11 "color: blue", | |
| 12 "}"].join("\n")); | |
| 13 | |
| 14 const EXTERNAL_STYLESHEET_FILE_NAME = "doc_style_editor_link.css"; | |
| 15 const EXTERNAL_STYLESHEET_URL = TEST_URL_ROOT + EXTERNAL_STYLESHEET_FILE_NAME; | |
| 16 | |
| 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")); | |
| 46 | |
| 47 let test = asyncTest(function*() { | |
| 48 yield addTab(DOCUMENT_URL); | |
| 49 let {toolbox, inspector, view} = yield openRuleView(); | |
| 50 | |
| 51 info("Select the test node"); | |
| 52 yield selectNode("div", inspector); | |
| 53 | |
| 54 yield testInlineStyle(view, inspector); | |
| 55 yield testInlineStyleSheet(view, toolbox); | |
| 56 yield testExternalStyleSheet(view, toolbox); | |
| 57 }); | |
| 58 | |
| 59 function* testInlineStyle(view, inspector) { | |
| 60 info("Testing inline style"); | |
| 61 | |
| 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(); | |
| 67 | |
| 68 let win = yield onWindow; | |
| 69 | |
| 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 } | |
| 75 | |
| 76 function* testInlineStyleSheet(view, toolbox) { | |
| 77 info("Testing inline stylesheet"); | |
| 78 | |
| 79 info("Listening for toolbox switch to the styleeditor"); | |
| 80 let onSwitch = waitForStyleEditor(toolbox); | |
| 81 | |
| 82 info("Clicking an inline stylesheet"); | |
| 83 let link = getRuleViewLinkByIndex(view, 4); | |
| 84 link.scrollIntoView(); | |
| 85 link.click(); | |
| 86 let editor = yield onSwitch; | |
| 87 | |
| 88 ok(true, "Switched to the style-editor panel in the toolbox"); | |
| 89 | |
| 90 validateStyleEditorSheet(editor, 0); | |
| 91 } | |
| 92 | |
| 93 function* testExternalStyleSheet(view, toolbox) { | |
| 94 info("Testing external stylesheet"); | |
| 95 | |
| 96 info("Waiting for the stylesheet editor to be selected"); | |
| 97 let panel = toolbox.getCurrentPanel(); | |
| 98 let onSelected = panel.UI.once("editor-selected"); | |
| 99 | |
| 100 info("Switching back to the inspector panel in the toolbox"); | |
| 101 yield toolbox.selectTool("inspector"); | |
| 102 | |
| 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; | |
| 109 | |
| 110 is(toolbox.currentToolId, "styleeditor", "The style editor is selected again"); | |
| 111 validateStyleEditorSheet(editor, 1); | |
| 112 } | |
| 113 | |
| 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 } | |
| 119 | |
| 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"); | |
| 125 | |
| 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 } |
