diff options
author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
---|---|---|
committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
tree | 10027f336435511475e392454359edea8e25895d /devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js | |
parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip |
Add m-esr52 at 52.6.0
Diffstat (limited to 'devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js | 260 |
1 files changed, 260 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js new file mode 100644 index 000000000..e98b5437c --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js @@ -0,0 +1,260 @@ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that pseudoelements are displayed correctly in the rule view + +const TEST_URI = URL_ROOT + "doc_pseudoelement.html"; +const PSEUDO_PREF = "devtools.inspector.show_pseudo_elements"; + +add_task(function* () { + yield pushPref(PSEUDO_PREF, true); + + yield addTab(TEST_URI); + let {inspector, view} = yield openRuleView(); + + yield testTopLeft(inspector, view); + yield testTopRight(inspector, view); + yield testBottomRight(inspector, view); + yield testBottomLeft(inspector, view); + yield testParagraph(inspector, view); + yield testBody(inspector, view); +}); + +function* testTopLeft(inspector, view) { + let id = "#topleft"; + let rules = yield assertPseudoElementRulesNumbers(id, + inspector, view, { + elementRulesNb: 4, + firstLineRulesNb: 2, + firstLetterRulesNb: 1, + selectionRulesNb: 0, + afterRulesNb: 1, + beforeRulesNb: 2 + } + ); + + let gutters = assertGutters(view); + + info("Make sure that clicking on the twisty hides pseudo elements"); + let expander = gutters[0].querySelector(".ruleview-expander"); + ok(!view.element.children[1].hidden, "Pseudo Elements are expanded"); + + expander.click(); + ok(view.element.children[1].hidden, + "Pseudo Elements are collapsed by twisty"); + + expander.click(); + ok(!view.element.children[1].hidden, "Pseudo Elements are expanded again"); + + info("Make sure that dblclicking on the header container also toggles " + + "the pseudo elements"); + EventUtils.synthesizeMouseAtCenter(gutters[0], {clickCount: 2}, + view.styleWindow); + ok(view.element.children[1].hidden, + "Pseudo Elements are collapsed by dblclicking"); + + let elementRuleView = getRuleViewRuleEditor(view, 3); + + let elementFirstLineRule = rules.firstLineRules[0]; + let elementFirstLineRuleView = + [...view.element.children[1].children].filter(e => { + return e._ruleEditor && e._ruleEditor.rule === elementFirstLineRule; + })[0]._ruleEditor; + + is(convertTextPropsToString(elementFirstLineRule.textProps), + "color: orange", + "TopLeft firstLine properties are correct"); + + let onAdded = view.once("ruleview-changed"); + let firstProp = elementFirstLineRuleView.addProperty("background-color", + "rgb(0, 255, 0)", "", true); + yield onAdded; + + onAdded = view.once("ruleview-changed"); + let secondProp = elementFirstLineRuleView.addProperty("font-style", + "italic", "", true); + yield onAdded; + + is(firstProp, + elementFirstLineRule.textProps[elementFirstLineRule.textProps.length - 2], + "First added property is on back of array"); + is(secondProp, + elementFirstLineRule.textProps[elementFirstLineRule.textProps.length - 1], + "Second added property is on back of array"); + + is((yield getComputedStyleProperty(id, ":first-line", "background-color")), + "rgb(0, 255, 0)", "Added property should have been used."); + is((yield getComputedStyleProperty(id, ":first-line", "font-style")), + "italic", "Added property should have been used."); + is((yield getComputedStyleProperty(id, null, "text-decoration")), + "none", "Added property should not apply to element"); + + yield togglePropStatus(view, firstProp); + + is((yield getComputedStyleProperty(id, ":first-line", "background-color")), + "rgb(255, 0, 0)", "Disabled property should now have been used."); + is((yield getComputedStyleProperty(id, null, "background-color")), + "rgb(221, 221, 221)", "Added property should not apply to element"); + + yield togglePropStatus(view, firstProp); + + is((yield getComputedStyleProperty(id, ":first-line", "background-color")), + "rgb(0, 255, 0)", "Added property should have been used."); + is((yield getComputedStyleProperty(id, null, "text-decoration")), + "none", "Added property should not apply to element"); + + onAdded = view.once("ruleview-changed"); + firstProp = elementRuleView.addProperty("background-color", + "rgb(0, 0, 255)", "", true); + yield onAdded; + + is((yield getComputedStyleProperty(id, null, "background-color")), + "rgb(0, 0, 255)", "Added property should have been used."); + is((yield getComputedStyleProperty(id, ":first-line", "background-color")), + "rgb(0, 255, 0)", "Added prop does not apply to pseudo"); +} + +function* testTopRight(inspector, view) { + yield assertPseudoElementRulesNumbers("#topright", inspector, view, { + elementRulesNb: 4, + firstLineRulesNb: 1, + firstLetterRulesNb: 1, + selectionRulesNb: 0, + beforeRulesNb: 2, + afterRulesNb: 1 + }); + + let gutters = assertGutters(view); + + let expander = gutters[0].querySelector(".ruleview-expander"); + ok(!view.element.firstChild.classList.contains("show-expandable-container"), + "Pseudo Elements remain collapsed after switching element"); + + expander.scrollIntoView(); + expander.click(); + ok(!view.element.children[1].hidden, + "Pseudo Elements are shown again after clicking twisty"); +} + +function* testBottomRight(inspector, view) { + yield assertPseudoElementRulesNumbers("#bottomright", inspector, view, { + elementRulesNb: 4, + firstLineRulesNb: 1, + firstLetterRulesNb: 1, + selectionRulesNb: 0, + beforeRulesNb: 3, + afterRulesNb: 1 + }); +} + +function* testBottomLeft(inspector, view) { + yield assertPseudoElementRulesNumbers("#bottomleft", inspector, view, { + elementRulesNb: 4, + firstLineRulesNb: 1, + firstLetterRulesNb: 1, + selectionRulesNb: 0, + beforeRulesNb: 2, + afterRulesNb: 1 + }); +} + +function* testParagraph(inspector, view) { + let rules = + yield assertPseudoElementRulesNumbers("#bottomleft p", inspector, view, { + elementRulesNb: 3, + firstLineRulesNb: 1, + firstLetterRulesNb: 1, + selectionRulesNb: 1, + beforeRulesNb: 0, + afterRulesNb: 0 + }); + + assertGutters(view); + + let elementFirstLineRule = rules.firstLineRules[0]; + is(convertTextPropsToString(elementFirstLineRule.textProps), + "background: blue", + "Paragraph first-line properties are correct"); + + let elementFirstLetterRule = rules.firstLetterRules[0]; + is(convertTextPropsToString(elementFirstLetterRule.textProps), + "color: red; font-size: 130%", + "Paragraph first-letter properties are correct"); + + let elementSelectionRule = rules.selectionRules[0]; + is(convertTextPropsToString(elementSelectionRule.textProps), + "color: white; background: black", + "Paragraph first-letter properties are correct"); +} + +function* testBody(inspector, view) { + yield testNode("body", inspector, view); + + let gutters = getGutters(view); + is(gutters.length, 0, "There are no gutter headings"); +} + +function convertTextPropsToString(textProps) { + return textProps.map(t => t.name + ": " + t.value).join("; "); +} + +function* testNode(selector, inspector, view) { + yield selectNode(selector, inspector); + let elementStyle = view._elementStyle; + return elementStyle; +} + +function* assertPseudoElementRulesNumbers(selector, inspector, view, ruleNbs) { + let elementStyle = yield testNode(selector, inspector, view); + + let rules = { + elementRules: elementStyle.rules.filter(rule => !rule.pseudoElement), + firstLineRules: elementStyle.rules.filter(rule => + rule.pseudoElement === ":first-line"), + firstLetterRules: elementStyle.rules.filter(rule => + rule.pseudoElement === ":first-letter"), + selectionRules: elementStyle.rules.filter(rule => + rule.pseudoElement === ":-moz-selection"), + beforeRules: elementStyle.rules.filter(rule => + rule.pseudoElement === ":before"), + afterRules: elementStyle.rules.filter(rule => + rule.pseudoElement === ":after"), + }; + + is(rules.elementRules.length, ruleNbs.elementRulesNb, + selector + " has the correct number of non pseudo element rules"); + is(rules.firstLineRules.length, ruleNbs.firstLineRulesNb, + selector + " has the correct number of :first-line rules"); + is(rules.firstLetterRules.length, ruleNbs.firstLetterRulesNb, + selector + " has the correct number of :first-letter rules"); + is(rules.selectionRules.length, ruleNbs.selectionRulesNb, + selector + " has the correct number of :selection rules"); + is(rules.beforeRules.length, ruleNbs.beforeRulesNb, + selector + " has the correct number of :before rules"); + is(rules.afterRules.length, ruleNbs.afterRulesNb, + selector + " has the correct number of :after rules"); + + return rules; +} + +function getGutters(view) { + return view.element.querySelectorAll(".theme-gutter"); +} + +function assertGutters(view) { + let gutters = getGutters(view); + + is(gutters.length, 3, + "There are 3 gutter headings"); + is(gutters[0].textContent, "Pseudo-elements", + "Gutter heading is correct"); + is(gutters[1].textContent, "This Element", + "Gutter heading is correct"); + is(gutters[2].textContent, "Inherited from body", + "Gutter heading is correct"); + + return gutters; +} |