90 lines
3.1 KiB
JavaScript
90 lines
3.1 KiB
JavaScript
/* Any copyright is dedicated to the Public Domain.
|
|
http://creativecommons.org/publicdomain/zero/1.0/ */
|
|
|
|
"use strict";
|
|
|
|
// Test that user set style properties can be changed from the markup-view and
|
|
// don't survive page reload
|
|
|
|
const TEST_URI = `
|
|
<p id='id1' style='width:200px;'>element 1</p>
|
|
<p id='id2' style='width:100px;'>element 2</p>
|
|
`;
|
|
|
|
add_task(function* () {
|
|
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
|
|
let {inspector, view, testActor} = yield openRuleView();
|
|
|
|
yield selectNode("#id1", inspector);
|
|
yield modifyRuleViewWidth("300px", view, inspector);
|
|
yield assertRuleAndMarkupViewWidth("id1", "300px", view, inspector);
|
|
|
|
yield selectNode("#id2", inspector);
|
|
yield assertRuleAndMarkupViewWidth("id2", "100px", view, inspector);
|
|
yield modifyRuleViewWidth("50px", view, inspector);
|
|
yield assertRuleAndMarkupViewWidth("id2", "50px", view, inspector);
|
|
|
|
yield reloadPage(inspector, testActor);
|
|
|
|
yield selectNode("#id1", inspector);
|
|
yield assertRuleAndMarkupViewWidth("id1", "200px", view, inspector);
|
|
yield selectNode("#id2", inspector);
|
|
yield assertRuleAndMarkupViewWidth("id2", "100px", view, inspector);
|
|
});
|
|
|
|
function getStyleRule(ruleView) {
|
|
return ruleView.styleDocument.querySelector(".ruleview-rule");
|
|
}
|
|
|
|
function* modifyRuleViewWidth(value, ruleView, inspector) {
|
|
info("Getting the property value element");
|
|
let valueSpan = getStyleRule(ruleView)
|
|
.querySelector(".ruleview-propertyvalue");
|
|
|
|
info("Focusing the property value to set it to edit mode");
|
|
let editor = yield focusEditableField(ruleView, valueSpan.parentNode);
|
|
|
|
ok(editor.input, "The inplace-editor field is ready");
|
|
info("Setting the new value");
|
|
editor.input.value = value;
|
|
|
|
info("Pressing return and waiting for the field to blur and for the " +
|
|
"markup-view to show the mutation");
|
|
let onBlur = once(editor.input, "blur", true);
|
|
let onStyleChanged = waitForStyleModification(inspector);
|
|
EventUtils.sendKey("return");
|
|
yield onBlur;
|
|
yield onStyleChanged;
|
|
|
|
info("Escaping out of the new property field that has been created after " +
|
|
"the value was edited");
|
|
let onNewFieldBlur = once(ruleView.styleDocument.activeElement, "blur", true);
|
|
EventUtils.sendKey("escape");
|
|
yield onNewFieldBlur;
|
|
}
|
|
|
|
function* getContainerStyleAttrValue(id, {walker, markup}) {
|
|
let front = yield walker.querySelector(walker.rootNode, "#" + id);
|
|
let container = markup.getContainer(front);
|
|
|
|
let attrIndex = 0;
|
|
for (let attrName of container.elt.querySelectorAll(".attr-name")) {
|
|
if (attrName.textContent === "style") {
|
|
return container.elt.querySelectorAll(".attr-value")[attrIndex];
|
|
}
|
|
attrIndex++;
|
|
}
|
|
return undefined;
|
|
}
|
|
|
|
function* assertRuleAndMarkupViewWidth(id, value, ruleView, inspector) {
|
|
let valueSpan = getStyleRule(ruleView)
|
|
.querySelector(".ruleview-propertyvalue");
|
|
is(valueSpan.textContent, value,
|
|
"Rule-view style width is " + value + " as expected");
|
|
|
|
let attr = yield getContainerStyleAttrValue(id, inspector);
|
|
is(attr.textContent.replace(/\s/g, ""),
|
|
"width:" + value + ";", "Markup-view style attribute width is " + value);
|
|
}
|