The Tor Browser / file comparison
comparison: browser/devtools/styleinspector/test/browser_ruleview_user-property-reset.js
browser/devtools/styleinspector/test/browser_ruleview_user-property-reset.js
- branch
- TOR_BUG_9701
- changeset 14
- 925c144e1f1f
equal
deleted
inserted
replaced
| -1:000000000000 | 0:40293983ae22 |
|---|---|
| 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 that user set style properties can be changed from the markup-view and | |
| 8 // don't survive page reload | |
| 9 | |
| 10 let TEST_PAGE = [ | |
| 11 "data:text/html,", | |
| 12 "<p id='id1' style='width:200px;'>element 1</p>", | |
| 13 "<p id='id2' style='width:100px;'>element 2</p>" | |
| 14 ].join(""); | |
| 15 | |
| 16 let test = asyncTest(function*() { | |
| 17 yield addTab(TEST_PAGE); | |
| 18 let {toolbox, inspector, view} = yield openRuleView(); | |
| 19 | |
| 20 yield selectNode("#id1", inspector); | |
| 21 yield modifyRuleViewWidth("300px", view, inspector); | |
| 22 assertRuleAndMarkupViewWidth("id1", "300px", view, inspector); | |
| 23 | |
| 24 yield selectNode("#id2", inspector); | |
| 25 assertRuleAndMarkupViewWidth("id2", "100px", view, inspector); | |
| 26 yield modifyRuleViewWidth("50px", view, inspector); | |
| 27 assertRuleAndMarkupViewWidth("id2", "50px", view, inspector); | |
| 28 | |
| 29 yield reloadPage(inspector); | |
| 30 | |
| 31 yield selectNode("#id1", inspector); | |
| 32 assertRuleAndMarkupViewWidth("id1", "200px", view, inspector); | |
| 33 yield selectNode("#id2", inspector); | |
| 34 assertRuleAndMarkupViewWidth("id2", "100px", view, inspector); | |
| 35 }); | |
| 36 | |
| 37 function getStyleRule(ruleView) { | |
| 38 return ruleView.doc.querySelector(".ruleview-rule"); | |
| 39 } | |
| 40 | |
| 41 function* modifyRuleViewWidth(value, ruleView, inspector) { | |
| 42 info("Getting the property value element"); | |
| 43 let valueSpan = getStyleRule(ruleView).querySelector(".ruleview-propertyvalue"); | |
| 44 | |
| 45 info("Focusing the property value to set it to edit mode"); | |
| 46 let editor = yield focusEditableField(valueSpan.parentNode); | |
| 47 | |
| 48 ok(editor.input, "The inplace-editor field is ready"); | |
| 49 info("Setting the new value"); | |
| 50 editor.input.value = value; | |
| 51 | |
| 52 info("Pressing return and waiting for the field to blur and for the markup-view to show the mutation"); | |
| 53 let onBlur = once(editor.input, "blur", true); | |
| 54 let onMutation = inspector.once("markupmutation"); | |
| 55 EventUtils.sendKey("return"); | |
| 56 yield onBlur; | |
| 57 yield onMutation; | |
| 58 | |
| 59 info("Escaping out of the new property field that has been created after the value was edited"); | |
| 60 let onNewFieldBlur = once(ruleView.doc.activeElement, "blur", true); | |
| 61 EventUtils.sendKey("escape"); | |
| 62 yield onNewFieldBlur; | |
| 63 } | |
| 64 | |
| 65 function getContainerStyleAttrValue(id, {markup}) { | |
| 66 let front = markup.walker.frontForRawNode(content.document.getElementById(id)); | |
| 67 let container = markup.getContainer(front); | |
| 68 | |
| 69 let attrIndex = 0; | |
| 70 for (let attrName of container.elt.querySelectorAll(".attr-name")) { | |
| 71 if (attrName.textContent === "style") { | |
| 72 return container.elt.querySelectorAll(".attr-value")[attrIndex]; | |
| 73 } | |
| 74 attrIndex ++; | |
| 75 } | |
| 76 } | |
| 77 | |
| 78 function assertRuleAndMarkupViewWidth(id, value, ruleView, inspector) { | |
| 79 let valueSpan = getStyleRule(ruleView).querySelector(".ruleview-propertyvalue"); | |
| 80 is(valueSpan.textContent, value, "Rule-view style width is " + value + " as expected"); | |
| 81 | |
| 82 let attr = getContainerStyleAttrValue(id, inspector); | |
| 83 is(attr.textContent.replace(/\s/g, ""), "width:" + value + ";", "Markup-view style attribute width is " + value); | |
| 84 } | |
| 85 | |
| 86 function reloadPage(inspector) { | |
| 87 let onNewRoot = inspector.once("new-root"); | |
| 88 content.location.reload(); | |
| 89 return onNewRoot.then(inspector.markup._waitForChildren); | |
| 90 } |
