зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1336198 - Part 9: Use existing box model tests with the new react/redux box model. r=jdescottes
MozReview-Commit-ID: HrqeP2X35t --HG-- rename : devtools/client/inspector/components/test/.eslintrc.js => devtools/client/inspector/boxmodel/test/.eslintrc.js rename : devtools/client/inspector/components/test/browser.ini => devtools/client/inspector/boxmodel/test/browser.ini rename : devtools/client/inspector/components/test/browser_boxmodel.js => devtools/client/inspector/boxmodel/test/browser_boxmodel.js rename : devtools/client/inspector/components/test/browser_boxmodel_editablemodel.js => devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel.js rename : devtools/client/inspector/components/test/browser_boxmodel_editablemodel_allproperties.js => devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_allproperties.js rename : devtools/client/inspector/components/test/browser_boxmodel_editablemodel_bluronclick.js => devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js rename : devtools/client/inspector/components/test/browser_boxmodel_editablemodel_border.js => devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_border.js rename : devtools/client/inspector/components/test/browser_boxmodel_editablemodel_stylerules.js => devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_stylerules.js rename : devtools/client/inspector/components/test/browser_boxmodel_guides.js => devtools/client/inspector/boxmodel/test/browser_boxmodel_guides.js rename : devtools/client/inspector/components/test/browser_boxmodel_navigation.js => devtools/client/inspector/boxmodel/test/browser_boxmodel_navigation.js rename : devtools/client/inspector/components/test/browser_boxmodel_rotate-labels-on-sides.js => devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js rename : devtools/client/inspector/components/test/browser_boxmodel_sync.js => devtools/client/inspector/boxmodel/test/browser_boxmodel_sync.js rename : devtools/client/inspector/components/test/browser_boxmodel_tooltips.js => devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js rename : devtools/client/inspector/components/test/browser_boxmodel_update-after-navigation.js => devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-navigation.js rename : devtools/client/inspector/components/test/browser_boxmodel_update-after-reload.js => devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-reload.js rename : devtools/client/inspector/components/test/browser_boxmodel_update-in-iframes.js => devtools/client/inspector/boxmodel/test/browser_boxmodel_update-in-iframes.js rename : devtools/client/inspector/components/test/doc_boxmodel_iframe1.html => devtools/client/inspector/boxmodel/test/doc_boxmodel_iframe1.html rename : devtools/client/inspector/components/test/doc_boxmodel_iframe2.html => devtools/client/inspector/boxmodel/test/doc_boxmodel_iframe2.html rename : devtools/client/inspector/components/test/head.js => devtools/client/inspector/boxmodel/test/head.js
This commit is contained in:
Gabriel Luong
Родитель
febfd604f0
Коммит
0e26022e8e
|
|
@ -37,7 +37,23 @@ module.exports = createClass({
|
|||
return layout[property] ? parseFloat(layout[property]) : "-";
|
||||
},
|
||||
|
||||
getHeightOrWidthValue(property) {
|
||||
getHeightValue(property) {
|
||||
let { layout } = this.props.boxModel;
|
||||
|
||||
if (property == undefined) {
|
||||
return "-";
|
||||
}
|
||||
|
||||
property -= parseFloat(layout["border-top-width"]) +
|
||||
parseFloat(layout["border-bottom-width"]) +
|
||||
parseFloat(layout["padding-top"]) +
|
||||
parseFloat(layout["padding-bottom"]);
|
||||
property = parseFloat(property.toPrecision(6));
|
||||
|
||||
return property;
|
||||
},
|
||||
|
||||
getWidthValue(property) {
|
||||
let { layout } = this.props.boxModel;
|
||||
|
||||
if (property == undefined) {
|
||||
|
|
@ -83,7 +99,7 @@ module.exports = createClass({
|
|||
render() {
|
||||
let { boxModel, onShowBoxModelEditor } = this.props;
|
||||
let { layout } = boxModel;
|
||||
let { width, height } = layout;
|
||||
let { height, width } = layout;
|
||||
|
||||
let borderTop = this.getBorderOrPaddingValue("border-top-width");
|
||||
let borderRight = this.getBorderOrPaddingValue("border-right-width");
|
||||
|
|
@ -100,8 +116,8 @@ module.exports = createClass({
|
|||
let marginBottom = this.getMarginValue("margin-bottom", "bottom");
|
||||
let marginLeft = this.getMarginValue("margin-left", "left");
|
||||
|
||||
width = this.getHeightOrWidthValue(width);
|
||||
height = this.getHeightOrWidthValue(height);
|
||||
height = this.getHeightValue(height);
|
||||
width = this.getWidthValue(width);
|
||||
|
||||
return dom.div(
|
||||
{
|
||||
|
|
|
|||
|
|
@ -15,3 +15,5 @@ DevToolsModules(
|
|||
'box-model.js',
|
||||
'types.js',
|
||||
)
|
||||
|
||||
BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
|
||||
|
|
|
|||
|
|
@ -21,9 +21,11 @@ support-files =
|
|||
[browser_boxmodel_editablemodel_stylerules.js]
|
||||
[browser_boxmodel_guides.js]
|
||||
[browser_boxmodel_navigation.js]
|
||||
skip-if = true # Bug 1336198
|
||||
[browser_boxmodel_rotate-labels-on-sides.js]
|
||||
[browser_boxmodel_sync.js]
|
||||
[browser_boxmodel_tooltips.js]
|
||||
skip-if = true # Bug 1336198
|
||||
[browser_boxmodel_update-after-navigation.js]
|
||||
[browser_boxmodel_update-after-reload.js]
|
||||
# [browser_boxmodel_update-in-iframes.js]
|
||||
|
|
@ -10,118 +10,118 @@
|
|||
// Expected values:
|
||||
var res1 = [
|
||||
{
|
||||
selector: "#old-boxmodel-element-size",
|
||||
selector: ".boxmodel-element-size",
|
||||
value: "160" + "\u00D7" + "160.117"
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-size > span",
|
||||
selector: ".boxmodel-size > span",
|
||||
value: "100" + "\u00D7" + "100.117"
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-margin.old-boxmodel-top > span",
|
||||
selector: ".boxmodel-margin.boxmodel-top > span",
|
||||
value: 30
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-margin.old-boxmodel-left > span",
|
||||
selector: ".boxmodel-margin.boxmodel-left > span",
|
||||
value: "auto"
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-margin.old-boxmodel-bottom > span",
|
||||
selector: ".boxmodel-margin.boxmodel-bottom > span",
|
||||
value: 30
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-margin.old-boxmodel-right > span",
|
||||
selector: ".boxmodel-margin.boxmodel-right > span",
|
||||
value: "auto"
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-padding.old-boxmodel-top > span",
|
||||
selector: ".boxmodel-padding.boxmodel-top > span",
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-padding.old-boxmodel-left > span",
|
||||
selector: ".boxmodel-padding.boxmodel-left > span",
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-padding.old-boxmodel-bottom > span",
|
||||
selector: ".boxmodel-padding.boxmodel-bottom > span",
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-padding.old-boxmodel-right > span",
|
||||
selector: ".boxmodel-padding.boxmodel-right > span",
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-border.old-boxmodel-top > span",
|
||||
selector: ".boxmodel-border.boxmodel-top > span",
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-border.old-boxmodel-left > span",
|
||||
selector: ".boxmodel-border.boxmodel-left > span",
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-border.old-boxmodel-bottom > span",
|
||||
selector: ".boxmodel-border.boxmodel-bottom > span",
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-border.old-boxmodel-right > span",
|
||||
selector: ".boxmodel-border.boxmodel-right > span",
|
||||
value: 10
|
||||
},
|
||||
];
|
||||
|
||||
var res2 = [
|
||||
{
|
||||
selector: "#old-boxmodel-element-size",
|
||||
selector: ".boxmodel-element-size",
|
||||
value: "190" + "\u00D7" + "210"
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-size > span",
|
||||
selector: ".boxmodel-size > span",
|
||||
value: "100" + "\u00D7" + "150"
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-margin.old-boxmodel-top > span",
|
||||
selector: ".boxmodel-margin.boxmodel-top > span",
|
||||
value: 30
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-margin.old-boxmodel-left > span",
|
||||
selector: ".boxmodel-margin.boxmodel-left > span",
|
||||
value: "auto"
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-margin.old-boxmodel-bottom > span",
|
||||
selector: ".boxmodel-margin.boxmodel-bottom > span",
|
||||
value: 30
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-margin.old-boxmodel-right > span",
|
||||
selector: ".boxmodel-margin.boxmodel-right > span",
|
||||
value: "auto"
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-padding.old-boxmodel-top > span",
|
||||
selector: ".boxmodel-padding.boxmodel-top > span",
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-padding.old-boxmodel-left > span",
|
||||
selector: ".boxmodel-padding.boxmodel-left > span",
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-padding.old-boxmodel-bottom > span",
|
||||
selector: ".boxmodel-padding.boxmodel-bottom > span",
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-padding.old-boxmodel-right > span",
|
||||
selector: ".boxmodel-padding.boxmodel-right > span",
|
||||
value: 50
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-border.old-boxmodel-top > span",
|
||||
selector: ".boxmodel-border.boxmodel-top > span",
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-border.old-boxmodel-left > span",
|
||||
selector: ".boxmodel-border.boxmodel-left > span",
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-border.old-boxmodel-bottom > span",
|
||||
selector: ".boxmodel-border.boxmodel-bottom > span",
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
selector: ".old-boxmodel-border.old-boxmodel-right > span",
|
||||
selector: ".boxmodel-border.boxmodel-right > span",
|
||||
value: 10
|
||||
},
|
||||
];
|
||||
|
|
@ -142,7 +142,7 @@ add_task(function* () {
|
|||
|
||||
function* testInitialValues(inspector, view) {
|
||||
info("Test that the initial values of the box model are correct");
|
||||
let viewdoc = view.doc;
|
||||
let viewdoc = view.document;
|
||||
|
||||
for (let i = 0; i < res1.length; i++) {
|
||||
let elt = viewdoc.querySelector(res1[i].selector);
|
||||
|
|
@ -153,7 +153,7 @@ function* testInitialValues(inspector, view) {
|
|||
|
||||
function* testChangingValues(inspector, view, testActor) {
|
||||
info("Test that changing the document updates the box model");
|
||||
let viewdoc = view.doc;
|
||||
let viewdoc = view.document;
|
||||
|
||||
let onUpdated = waitForUpdate(inspector);
|
||||
yield testActor.setAttribute("div", "style",
|
||||
|
|
@ -36,21 +36,21 @@ function* testEditingMargins(inspector, view, testActor) {
|
|||
"Should be no margin-top on the element.");
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".old-boxmodel-margin.old-boxmodel-top > span");
|
||||
let span = view.document.querySelector(".boxmodel-margin.boxmodel-top > span");
|
||||
is(span.textContent, 5, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
|
||||
let editor = view.document.querySelector(".styleinspector-propertyeditor");
|
||||
ok(editor, "Should have opened the editor.");
|
||||
is(editor.value, "5px", "Should have the right value in the editor.");
|
||||
|
||||
EventUtils.synthesizeKey("3", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("3", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is((yield getStyle(testActor, "#div1", "margin-top")), "3px",
|
||||
"Should have updated the margin.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is((yield getStyle(testActor, "#div1", "margin-top")), "",
|
||||
|
|
@ -66,35 +66,35 @@ function* testKeyBindings(inspector, view, testActor) {
|
|||
"Should be no margin-top on the element.");
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".old-boxmodel-margin.old-boxmodel-left > span");
|
||||
let span = view.document.querySelector(".boxmodel-margin.boxmodel-left > span");
|
||||
is(span.textContent, 10, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
|
||||
let editor = view.document.querySelector(".styleinspector-propertyeditor");
|
||||
ok(editor, "Should have opened the editor.");
|
||||
is(editor.value, "10px", "Should have the right value in the editor.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_UP", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_UP", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is(editor.value, "11px", "Should have the right value in the editor.");
|
||||
is((yield getStyle(testActor, "#div1", "margin-left")), "11px",
|
||||
"Should have updated the margin.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_DOWN", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_DOWN", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is(editor.value, "10px", "Should have the right value in the editor.");
|
||||
is((yield getStyle(testActor, "#div1", "margin-left")), "10px",
|
||||
"Should have updated the margin.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_UP", { shiftKey: true }, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_UP", { shiftKey: true }, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is(editor.value, "20px", "Should have the right value in the editor.");
|
||||
is((yield getStyle(testActor, "#div1", "margin-left")), "20px",
|
||||
"Should have updated the margin.");
|
||||
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
|
||||
|
||||
is((yield getStyle(testActor, "#div1", "margin-left")), "20px",
|
||||
"Should be the right margin-top on the element.");
|
||||
|
|
@ -109,22 +109,22 @@ function* testEscapeToUndo(inspector, view, testActor) {
|
|||
"Should be the right margin-top on the element.");
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".old-boxmodel-margin.old-boxmodel-left > span");
|
||||
let span = view.document.querySelector(".boxmodel-margin.boxmodel-left > span");
|
||||
is(span.textContent, 20, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
|
||||
let editor = view.document.querySelector(".styleinspector-propertyeditor");
|
||||
ok(editor, "Should have opened the editor.");
|
||||
is(editor.value, "20px", "Should have the right value in the editor.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_DELETE", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_DELETE", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is(editor.value, "", "Should have the right value in the editor.");
|
||||
is((yield getStyle(testActor, "#div1", "margin-left")), "",
|
||||
"Should have updated the margin.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is((yield getStyle(testActor, "#div1", "margin-left")), "20px",
|
||||
|
|
@ -140,22 +140,22 @@ function* testDeletingValue(inspector, view, testActor) {
|
|||
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".old-boxmodel-margin.old-boxmodel-right > span");
|
||||
let span = view.document.querySelector(".boxmodel-margin.boxmodel-right > span");
|
||||
is(span.textContent, 15, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
|
||||
let editor = view.document.querySelector(".styleinspector-propertyeditor");
|
||||
ok(editor, "Should have opened the editor.");
|
||||
is(editor.value, "15px", "Should have the right value in the editor.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_DELETE", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_DELETE", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is(editor.value, "", "Should have the right value in the editor.");
|
||||
is((yield getStyle(testActor, "#div1", "margin-right")), "",
|
||||
"Should have updated the margin.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
|
||||
|
||||
is((yield getStyle(testActor, "#div1", "margin-right")), "",
|
||||
"Should be the right margin-top on the element.");
|
||||
|
|
@ -167,26 +167,26 @@ function* testRefocusingOnClick(inspector, view, testActor) {
|
|||
|
||||
yield selectNode("#div4", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".old-boxmodel-margin.old-boxmodel-top > span");
|
||||
let span = view.document.querySelector(".boxmodel-margin.boxmodel-top > span");
|
||||
is(span.textContent, 1, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
|
||||
let editor = view.document.querySelector(".styleinspector-propertyeditor");
|
||||
ok(editor, "Should have opened the editor.");
|
||||
|
||||
info("Click in the already opened editor input");
|
||||
EventUtils.synthesizeMouseAtCenter(editor, {}, view.doc.defaultView);
|
||||
is(editor, view.doc.activeElement,
|
||||
EventUtils.synthesizeMouseAtCenter(editor, {}, view.document.defaultView);
|
||||
is(editor, view.document.activeElement,
|
||||
"Inplace editor input should still have focus.");
|
||||
|
||||
info("Check the input can still be used as expected");
|
||||
EventUtils.synthesizeKey("VK_UP", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_UP", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is(editor.value, "2px", "Should have the right value in the editor.");
|
||||
is((yield getStyle(testActor, "#div4", "margin-top")), "2px",
|
||||
"Should have updated the margin.");
|
||||
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
|
||||
|
||||
is((yield getStyle(testActor, "#div4", "margin-top")), "2px",
|
||||
"Should be the right margin-top on the element.");
|
||||
|
|
@ -32,22 +32,22 @@ function* testEditing(inspector, view, testActor) {
|
|||
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".old-boxmodel-padding.old-boxmodel-bottom > span");
|
||||
let span = view.document.querySelector(".boxmodel-padding.boxmodel-bottom > span");
|
||||
is(span.textContent, 5, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
|
||||
let editor = view.document.querySelector(".styleinspector-propertyeditor");
|
||||
ok(editor, "Should have opened the editor.");
|
||||
is(editor.value, "5px", "Should have the right value in the editor.");
|
||||
|
||||
EventUtils.synthesizeKey("7", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("7", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is(editor.value, "7", "Should have the right value in the editor.");
|
||||
is((yield getStyle(testActor, "#div1", "padding-bottom")), "7px",
|
||||
"Should have updated the padding");
|
||||
|
||||
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
|
||||
|
||||
is((yield getStyle(testActor, "#div1", "padding-bottom")), "7px",
|
||||
"Should be the right padding.");
|
||||
|
|
@ -63,22 +63,22 @@ function* testEditingAndCanceling(inspector, view, testActor) {
|
|||
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".old-boxmodel-padding.old-boxmodel-left > span");
|
||||
let span = view.document.querySelector(".boxmodel-padding.boxmodel-left > span");
|
||||
is(span.textContent, 5, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
|
||||
let editor = view.document.querySelector(".styleinspector-propertyeditor");
|
||||
ok(editor, "Should have opened the editor.");
|
||||
is(editor.value, "5px", "Should have the right value in the editor.");
|
||||
|
||||
EventUtils.synthesizeKey("8", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("8", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is(editor.value, "8", "Should have the right value in the editor.");
|
||||
is((yield getStyle(testActor, "#div1", "padding-left")), "8px",
|
||||
"Should have updated the padding");
|
||||
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is((yield getStyle(testActor, "#div1", "padding-left")), "5px",
|
||||
|
|
@ -91,22 +91,22 @@ function* testDeleting(inspector, view, testActor) {
|
|||
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".old-boxmodel-padding.old-boxmodel-left > span");
|
||||
let span = view.document.querySelector(".boxmodel-padding.boxmodel-left > span");
|
||||
is(span.textContent, 5, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
|
||||
let editor = view.document.querySelector(".styleinspector-propertyeditor");
|
||||
ok(editor, "Should have opened the editor.");
|
||||
is(editor.value, "5px", "Should have the right value in the editor.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_DELETE", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_DELETE", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is(editor.value, "", "Should have the right value in the editor.");
|
||||
is((yield getStyle(testActor, "#div1", "padding-left")), "",
|
||||
"Should have updated the padding");
|
||||
|
||||
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
|
||||
|
||||
is((yield getStyle(testActor, "#div1", "padding-left")), "",
|
||||
"Should be the right padding.");
|
||||
|
|
@ -122,22 +122,22 @@ function* testDeletingAndCanceling(inspector, view, testActor) {
|
|||
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".old-boxmodel-padding.old-boxmodel-left > span");
|
||||
let span = view.document.querySelector(".boxmodel-padding.boxmodel-left > span");
|
||||
is(span.textContent, 5, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
|
||||
let editor = view.document.querySelector(".styleinspector-propertyeditor");
|
||||
ok(editor, "Should have opened the editor.");
|
||||
is(editor.value, "5px", "Should have the right value in the editor.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_DELETE", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_DELETE", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is(editor.value, "", "Should have the right value in the editor.");
|
||||
is((yield getStyle(testActor, "#div1", "padding-left")), "",
|
||||
"Should have updated the padding");
|
||||
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is((yield getStyle(testActor, "#div1", "padding-left")), "5px",
|
||||
|
|
@ -30,45 +30,45 @@ add_task(function* () {
|
|||
|
||||
function* testClickingOutsideEditor(view) {
|
||||
info("Test that clicking outside the editor blurs it");
|
||||
let span = view.doc.querySelector(".old-boxmodel-margin.old-boxmodel-top > span");
|
||||
let span = view.document.querySelector(".boxmodel-margin.boxmodel-top > span");
|
||||
is(span.textContent, 10, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
|
||||
let editor = view.document.querySelector(".styleinspector-propertyeditor");
|
||||
ok(editor, "Should have opened the editor.");
|
||||
|
||||
info("Click next to the opened editor input.");
|
||||
let onBlur = once(editor, "blur");
|
||||
let rect = editor.getBoundingClientRect();
|
||||
EventUtils.synthesizeMouse(editor, rect.width + 10, rect.height / 2, {},
|
||||
view.doc.defaultView);
|
||||
view.document.defaultView);
|
||||
yield onBlur;
|
||||
|
||||
is(view.doc.querySelector(".styleinspector-propertyeditor"), null,
|
||||
is(view.document.querySelector(".styleinspector-propertyeditor"), null,
|
||||
"Inplace editor has been removed.");
|
||||
}
|
||||
|
||||
function* testClickingBelowContainer(view) {
|
||||
info("Test that clicking below the box-model container blurs it");
|
||||
let span = view.doc.querySelector(".old-boxmodel-margin.old-boxmodel-top > span");
|
||||
let span = view.document.querySelector(".boxmodel-margin.boxmodel-top > span");
|
||||
is(span.textContent, 10, "Should have the right value in the box model.");
|
||||
|
||||
info("Test that clicking below the old-boxmodel-container blurs the opened editor");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
|
||||
info("Test that clicking below the boxmodel-container blurs the opened editor");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
|
||||
let editor = view.document.querySelector(".styleinspector-propertyeditor");
|
||||
ok(editor, "Should have opened the editor.");
|
||||
|
||||
let onBlur = once(editor, "blur");
|
||||
let container = view.doc.querySelector("#old-boxmodel-container");
|
||||
let container = view.document.querySelector(".boxmodel-container");
|
||||
// Using getBoxQuads here because getBoundingClientRect (and therefore synthesizeMouse)
|
||||
// use an erroneous height of ~50px for the boxmodel-container.
|
||||
let bounds = container.getBoxQuads({relativeTo: view.doc})[0].bounds;
|
||||
EventUtils.synthesizeMouseAtPoint(
|
||||
bounds.left + 10,
|
||||
bounds.top + bounds.height + 10,
|
||||
{}, view.doc.defaultView);
|
||||
{}, view.document.defaultView);
|
||||
yield onBlur;
|
||||
|
||||
is(view.doc.querySelector(".styleinspector-propertyeditor"), null,
|
||||
is(view.document.querySelector(".styleinspector-propertyeditor"), null,
|
||||
"Inplace editor has been removed.");
|
||||
}
|
||||
|
|
@ -24,15 +24,15 @@ add_task(function* () {
|
|||
"Should have the right border");
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".old-boxmodel-border.old-boxmodel-top > span");
|
||||
let span = view.document.querySelector(".boxmodel-border.boxmodel-top > span");
|
||||
is(span.textContent, 0, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
|
||||
let editor = view.document.querySelector(".styleinspector-propertyeditor");
|
||||
ok(editor, "Should have opened the editor.");
|
||||
is(editor.value, "0", "Should have the right value in the editor.");
|
||||
|
||||
EventUtils.synthesizeKey("1", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("1", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is(editor.value, "1", "Should have the right value in the editor.");
|
||||
|
|
@ -41,7 +41,7 @@ add_task(function* () {
|
|||
is((yield getStyle(testActor, "#div1", "border-top-style")), "solid",
|
||||
"Should have the right border");
|
||||
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is((yield getStyle(testActor, "#div1", "border-top-width")), "",
|
||||
|
|
@ -31,30 +31,30 @@ function* testUnits(inspector, view, testActor) {
|
|||
"Should have the right padding");
|
||||
yield selectNode("#div1", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".old-boxmodel-padding.old-boxmodel-top > span");
|
||||
let span = view.document.querySelector(".boxmodel-padding.boxmodel-top > span");
|
||||
is(span.textContent, 3, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
|
||||
let editor = view.document.querySelector(".styleinspector-propertyeditor");
|
||||
ok(editor, "Should have opened the editor.");
|
||||
is(editor.value, "3px", "Should have the right value in the editor.");
|
||||
|
||||
EventUtils.synthesizeKey("1", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("1", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
EventUtils.synthesizeKey("e", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("e", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is((yield getStyle(testActor, "#div1", "padding-top")), "",
|
||||
"An invalid value is handled cleanly");
|
||||
|
||||
EventUtils.synthesizeKey("m", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("m", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is(editor.value, "1em", "Should have the right value in the editor.");
|
||||
is((yield getStyle(testActor, "#div1", "padding-top")),
|
||||
"1em", "Should have updated the padding.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
|
||||
|
||||
is((yield getStyle(testActor, "#div1", "padding-top")), "1em",
|
||||
"Should be the right padding.");
|
||||
|
|
@ -68,22 +68,22 @@ function* testValueComesFromStyleRule(inspector, view, testActor) {
|
|||
"Should have the right border-bottom-width");
|
||||
yield selectNode("#div2", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".old-boxmodel-border.old-boxmodel-bottom > span");
|
||||
let span = view.document.querySelector(".boxmodel-border.boxmodel-bottom > span");
|
||||
is(span.textContent, 16, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
|
||||
let editor = view.document.querySelector(".styleinspector-propertyeditor");
|
||||
ok(editor, "Should have opened the editor.");
|
||||
is(editor.value, "1em", "Should have the right value in the editor.");
|
||||
|
||||
EventUtils.synthesizeKey("0", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("0", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
|
||||
is(editor.value, "0", "Should have the right value in the editor.");
|
||||
is((yield getStyle(testActor, "#div2", "border-bottom-width")), "0px",
|
||||
"Should have updated the border.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
|
||||
|
||||
is((yield getStyle(testActor, "#div2", "border-bottom-width")), "0px",
|
||||
"Should be the right border-bottom-width.");
|
||||
|
|
@ -97,15 +97,15 @@ function* testShorthandsAreParsed(inspector, view, testActor) {
|
|||
"Should have the right padding");
|
||||
yield selectNode("#div3", inspector);
|
||||
|
||||
let span = view.doc.querySelector(".old-boxmodel-padding.old-boxmodel-right > span");
|
||||
let span = view.document.querySelector(".boxmodel-padding.boxmodel-right > span");
|
||||
is(span.textContent, 32, "Should have the right value in the box model.");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
|
||||
let editor = view.document.querySelector(".styleinspector-propertyeditor");
|
||||
ok(editor, "Should have opened the editor.");
|
||||
is(editor.value, "2em", "Should have the right value in the editor.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
|
||||
|
||||
is((yield getStyle(testActor, "#div3", "padding-right")), "",
|
||||
"Should be the right padding.");
|
||||
|
|
@ -28,16 +28,16 @@ add_task(function* () {
|
|||
highlighterOptions = options;
|
||||
};
|
||||
|
||||
let elt = view.doc.getElementById("old-boxmodel-margins");
|
||||
let elt = view.document.querySelector(".boxmodel-margins");
|
||||
yield testGuideOnLayoutHover(elt, "margin", inspector, view);
|
||||
|
||||
elt = view.doc.getElementById("old-boxmodel-borders");
|
||||
elt = view.document.querySelector(".boxmodel-borders");
|
||||
yield testGuideOnLayoutHover(elt, "border", inspector, view);
|
||||
|
||||
elt = view.doc.getElementById("old-boxmodel-padding");
|
||||
elt = view.document.querySelector(".boxmodel-paddings");
|
||||
yield testGuideOnLayoutHover(elt, "padding", inspector, view);
|
||||
|
||||
elt = view.doc.getElementById("old-boxmodel-content");
|
||||
elt = view.document.querySelector(".boxmodel-content");
|
||||
yield testGuideOnLayoutHover(elt, "content", inspector, view);
|
||||
});
|
||||
|
||||
|
|
@ -29,50 +29,50 @@ add_task(function* () {
|
|||
function* testInitialFocus(inspector, view) {
|
||||
info("Test that the focus is on margin layout.");
|
||||
let viewdoc = view.doc;
|
||||
let boxmodel = viewdoc.getElementById("old-boxmodel-wrapper");
|
||||
let boxmodel = viewdoc.getElementById("boxmodel-wrapper");
|
||||
boxmodel.focus();
|
||||
EventUtils.synthesizeKey("VK_RETURN", {});
|
||||
|
||||
is(boxmodel.getAttribute("aria-activedescendant"), "old-boxmodel-margins",
|
||||
is(boxmodel.getAttribute("aria-activedescendant"), "boxmodel-margins",
|
||||
"Should be set to the margin layout.");
|
||||
}
|
||||
|
||||
function* testChangingLevels(inspector, view) {
|
||||
info("Test that using arrow keys updates level.");
|
||||
let viewdoc = view.doc;
|
||||
let boxmodel = viewdoc.getElementById("old-boxmodel-wrapper");
|
||||
let boxmodel = viewdoc.getElementById("boxmodel-wrapper");
|
||||
boxmodel.focus();
|
||||
EventUtils.synthesizeKey("VK_RETURN", {});
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {});
|
||||
|
||||
EventUtils.synthesizeKey("VK_DOWN", {});
|
||||
is(boxmodel.getAttribute("aria-activedescendant"), "old-boxmodel-borders",
|
||||
is(boxmodel.getAttribute("aria-activedescendant"), "boxmodel-borders",
|
||||
"Should be set to the border layout.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_DOWN", {});
|
||||
is(boxmodel.getAttribute("aria-activedescendant"), "old-boxmodel-padding",
|
||||
is(boxmodel.getAttribute("aria-activedescendant"), "boxmodel-padding",
|
||||
"Should be set to the padding layout.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_UP", {});
|
||||
is(boxmodel.getAttribute("aria-activedescendant"), "old-boxmodel-borders",
|
||||
is(boxmodel.getAttribute("aria-activedescendant"), "boxmodel-borders",
|
||||
"Should be set to the border layout.");
|
||||
|
||||
EventUtils.synthesizeKey("VK_UP", {});
|
||||
is(boxmodel.getAttribute("aria-activedescendant"), "old-boxmodel-margins",
|
||||
is(boxmodel.getAttribute("aria-activedescendant"), "boxmodel-margins",
|
||||
"Should be set to the margin layout.");
|
||||
}
|
||||
|
||||
function* testTabbingWrapAround(inspector, view) {
|
||||
info("Test that using arrow keys updates level.");
|
||||
let viewdoc = view.doc;
|
||||
let boxmodel = viewdoc.getElementById("old-boxmodel-wrapper");
|
||||
let boxmodel = viewdoc.getElementById("boxmodel-wrapper");
|
||||
boxmodel.focus();
|
||||
EventUtils.synthesizeKey("VK_RETURN", {});
|
||||
|
||||
let editLevel = boxmodel.getAttribute("aria-activedescendant");
|
||||
let dataLevel = viewdoc.getElementById(editLevel).getAttribute("data-box");
|
||||
let editBoxes = [...viewdoc.querySelectorAll(
|
||||
`[data-box="${dataLevel}"].old-boxmodel-editable`)];
|
||||
`[data-box="${dataLevel}"].boxmodel-editable`)];
|
||||
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {});
|
||||
editBoxes[3].focus();
|
||||
|
|
@ -87,12 +87,12 @@ function* testTabbingWrapAround(inspector, view) {
|
|||
function* testChangingLevelsByClicking(inspector, view) {
|
||||
info("Test that clicking on levels updates level.");
|
||||
let viewdoc = view.doc;
|
||||
let boxmodel = viewdoc.getElementById("old-boxmodel-wrapper");
|
||||
let boxmodel = viewdoc.getElementById("boxmodel-wrapper");
|
||||
boxmodel.focus();
|
||||
|
||||
let marginLayout = viewdoc.getElementById("old-boxmodel-margins");
|
||||
let borderLayout = viewdoc.getElementById("old-boxmodel-borders");
|
||||
let paddingLayout = viewdoc.getElementById("old-boxmodel-padding");
|
||||
let marginLayout = viewdoc.getElementById("boxmodel-margins");
|
||||
let borderLayout = viewdoc.getElementById("boxmodel-borders");
|
||||
let paddingLayout = viewdoc.getElementById("boxmodel-padding");
|
||||
let layouts = [paddingLayout, borderLayout, marginLayout];
|
||||
|
||||
layouts.forEach(layout => {
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/* vim: set 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 longer values are rotated on the side
|
||||
|
||||
const res1 = [
|
||||
{selector: ".boxmodel-margin.boxmodel-top > span", value: 30},
|
||||
{selector: ".boxmodel-margin.boxmodel-left > span", value: "auto"},
|
||||
{selector: ".boxmodel-margin.boxmodel-bottom > span", value: 30},
|
||||
{selector: ".boxmodel-margin.boxmodel-right > span", value: "auto"},
|
||||
{selector: ".boxmodel-padding.boxmodel-top > span", value: 20},
|
||||
{selector: ".boxmodel-padding.boxmodel-left > span", value: 2000000},
|
||||
{selector: ".boxmodel-padding.boxmodel-bottom > span", value: 20},
|
||||
{selector: ".boxmodel-padding.boxmodel-right > span", value: 20},
|
||||
{selector: ".boxmodel-border.boxmodel-top > span", value: 10},
|
||||
{selector: ".boxmodel-border.boxmodel-left > span", value: 10},
|
||||
{selector: ".boxmodel-border.boxmodel-bottom > span", value: 10},
|
||||
{selector: ".boxmodel-border.boxmodel-right > span", value: 10},
|
||||
];
|
||||
|
||||
const TEST_URI = encodeURIComponent([
|
||||
"<style>",
|
||||
"div { border:10px solid black; padding: 20px 20px 20px 2000000px; " +
|
||||
"margin: 30px auto; }",
|
||||
"</style>",
|
||||
"<div></div>"
|
||||
].join(""));
|
||||
const LONG_TEXT_ROTATE_LIMIT = 3;
|
||||
|
||||
add_task(function* () {
|
||||
yield addTab("data:text/html," + TEST_URI);
|
||||
let {inspector, view} = yield openBoxModelView();
|
||||
yield selectNode("div", inspector);
|
||||
|
||||
for (let i = 0; i < res1.length; i++) {
|
||||
let elt = view.document.querySelector(res1[i].selector);
|
||||
let isLong = elt.textContent.length > LONG_TEXT_ROTATE_LIMIT;
|
||||
let classList = elt.parentNode.classList;
|
||||
let canBeRotated = classList.contains("boxmodel-left") ||
|
||||
classList.contains("boxmodel-right");
|
||||
let isRotated = classList.contains("boxmodel-rotate");
|
||||
|
||||
is(canBeRotated && isLong,
|
||||
isRotated, res1[i].selector + " correctly rotated.");
|
||||
}
|
||||
});
|
||||
|
|
@ -17,14 +17,14 @@ add_task(function* () {
|
|||
yield selectNode("p", inspector);
|
||||
|
||||
info("Modify padding-bottom in box model view");
|
||||
let span = view.doc.querySelector(".old-boxmodel-padding.old-boxmodel-bottom > span");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
|
||||
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
|
||||
let span = view.document.querySelector(".boxmodel-padding.boxmodel-bottom > span");
|
||||
EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
|
||||
let editor = view.document.querySelector(".styleinspector-propertyeditor");
|
||||
|
||||
EventUtils.synthesizeKey("7", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("7", {}, view.document.defaultView);
|
||||
yield waitForUpdate(inspector);
|
||||
is(editor.value, "7", "Should have the right value in the editor.");
|
||||
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
|
||||
EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
|
||||
|
||||
let onRuleViewRefreshed = once(inspector, "rule-view-refreshed");
|
||||
let onRuleViewSelected = once(inspector.sidebar, "ruleview-selected");
|
||||
|
|
@ -76,24 +76,24 @@ add_task(function* () {
|
|||
|
||||
info("Checking the regions tooltips");
|
||||
|
||||
ok(view.doc.querySelector("#old-boxmodel-margins").hasAttribute("title"),
|
||||
ok(view.document.querySelector(".boxmodel-margins").hasAttribute("title"),
|
||||
"The margin region has a tooltip");
|
||||
is(view.doc.querySelector("#old-boxmodel-margins").getAttribute("title"), "margin",
|
||||
is(view.document.querySelector(".boxmodel-margins").getAttribute("title"), "margin",
|
||||
"The margin region has the correct tooltip content");
|
||||
|
||||
ok(view.doc.querySelector("#old-boxmodel-borders").hasAttribute("title"),
|
||||
ok(view.document.querySelector(".boxmodel-borders").hasAttribute("title"),
|
||||
"The border region has a tooltip");
|
||||
is(view.doc.querySelector("#old-boxmodel-borders").getAttribute("title"), "border",
|
||||
is(view.document.querySelector(".boxmodel-borders").getAttribute("title"), "border",
|
||||
"The border region has the correct tooltip content");
|
||||
|
||||
ok(view.doc.querySelector("#old-boxmodel-padding").hasAttribute("title"),
|
||||
ok(view.document.querySelector(".boxmodel-paddings").hasAttribute("title"),
|
||||
"The padding region has a tooltip");
|
||||
is(view.doc.querySelector("#old-boxmodel-padding").getAttribute("title"), "padding",
|
||||
is(view.document.querySelector(".boxmodel-paddings").getAttribute("title"), "padding",
|
||||
"The padding region has the correct tooltip content");
|
||||
|
||||
ok(view.doc.querySelector("#old-boxmodel-content").hasAttribute("title"),
|
||||
ok(view.document.querySelector(".boxmodel-content").hasAttribute("title"),
|
||||
"The content region has a tooltip");
|
||||
is(view.doc.querySelector("#old-boxmodel-content").getAttribute("title"), "content",
|
||||
is(view.document.querySelector(".boxmodel-content").getAttribute("title"), "content",
|
||||
"The content region has the correct tooltip content");
|
||||
|
||||
for (let {selector, values} of VALUES_TEST_DATA) {
|
||||
|
|
@ -108,7 +108,7 @@ add_task(function* () {
|
|||
|
||||
let name = view.map[key].property;
|
||||
let expectedTooltipData = values.find(o => o.name === name);
|
||||
let el = view.doc.querySelector(view.map[key].selector);
|
||||
let el = view.document.querySelector(view.map[key].selector);
|
||||
|
||||
ok(el.hasAttribute("title"), "The " + name + " value has a tooltip");
|
||||
|
||||
|
|
@ -32,12 +32,11 @@ add_task(function* () {
|
|||
function* testFirstPage(inspector, view, testActor) {
|
||||
info("Test that the box model view works on the first page");
|
||||
|
||||
info("Selecting the test node");
|
||||
yield selectNode("p", inspector);
|
||||
|
||||
info("Checking that the box model view shows the right value");
|
||||
let paddingElt = view.doc.querySelector(
|
||||
".old-boxmodel-padding.old-boxmodel-top > span");
|
||||
let paddingElt = view.document.querySelector(
|
||||
".boxmodel-padding.boxmodel-top > span");
|
||||
is(paddingElt.textContent, "50");
|
||||
|
||||
info("Listening for box model view changes and modifying the padding");
|
||||
|
|
@ -53,11 +52,10 @@ function* testFirstPage(inspector, view, testActor) {
|
|||
function* testSecondPage(inspector, view, testActor) {
|
||||
info("Test that the box model view works on the second page");
|
||||
|
||||
info("Selecting the test node");
|
||||
yield selectNode("p", inspector);
|
||||
|
||||
info("Checking that the box model view shows the right value");
|
||||
let sizeElt = view.doc.querySelector(".old-boxmodel-size > span");
|
||||
let sizeElt = view.document.querySelector(".boxmodel-size > span");
|
||||
is(sizeElt.textContent, "100" + "\u00D7" + "100");
|
||||
|
||||
info("Listening for box model view changes and modifying the size");
|
||||
|
|
@ -73,13 +71,12 @@ function* testSecondPage(inspector, view, testActor) {
|
|||
function* testBackToFirstPage(inspector, view, testActor) {
|
||||
info("Test that the box model view works on the first page after going back");
|
||||
|
||||
info("Selecting the test node");
|
||||
yield selectNode("p", inspector);
|
||||
|
||||
info("Checking that the box model view shows the right value, which is the" +
|
||||
"modified value from step one because of the bfcache");
|
||||
let paddingElt = view.doc.querySelector(
|
||||
".old-boxmodel-padding.old-boxmodel-top > span");
|
||||
let paddingElt = view.document.querySelector(
|
||||
".boxmodel-padding.boxmodel-top > span");
|
||||
is(paddingElt.textContent, "20");
|
||||
|
||||
info("Listening for box model view changes and modifying the padding");
|
||||
|
|
@ -22,12 +22,11 @@ add_task(function* () {
|
|||
});
|
||||
|
||||
function* assertBoxModelView(inspector, view, testActor) {
|
||||
info("Selecting the test node");
|
||||
yield selectNode("p", inspector);
|
||||
|
||||
info("Checking that the box model view shows the right value");
|
||||
let paddingElt = view.doc.querySelector(
|
||||
".old-boxmodel-padding.old-boxmodel-top > span");
|
||||
let paddingElt = view.document.querySelector(
|
||||
".boxmodel-padding.boxmodel-top > span");
|
||||
is(paddingElt.textContent, "50");
|
||||
|
||||
info("Listening for box model view changes and modifying the padding");
|
||||
|
|
@ -22,7 +22,7 @@ function* testResizingInIframe(inspector, view, testActor) {
|
|||
yield selectNodeInIframe2("div", inspector);
|
||||
|
||||
info("Checking that the box model view shows the right value");
|
||||
let sizeElt = view.doc.querySelector(".old-boxmodel-size > span");
|
||||
let sizeElt = view.document.querySelector(".boxmodel-size > span");
|
||||
is(sizeElt.textContent, "400\u00D7200");
|
||||
|
||||
info("Listening for box model view changes and modifying its size");
|
||||
|
|
@ -47,7 +47,7 @@ function* testReflowsAfterIframeDeletion(inspector, view, testActor) {
|
|||
yield selectNodeInIframe1("p", inspector);
|
||||
|
||||
info("Checking that the box model view shows the right value");
|
||||
let sizeElt = view.doc.querySelector(".old-boxmodel-size > span");
|
||||
let sizeElt = view.document.querySelector(".boxmodel-size > span");
|
||||
is(sizeElt.textContent, "100\u00D7100");
|
||||
|
||||
info("Listening for box model view changes and modifying its size");
|
||||
|
|
@ -58,7 +58,7 @@ function openBoxModelView() {
|
|||
return {
|
||||
toolbox: data.toolbox,
|
||||
inspector: data.inspector,
|
||||
view: data.inspector.computedview.boxModelView,
|
||||
view: data.inspector.computedview,
|
||||
testActor: data.testActor
|
||||
};
|
||||
});
|
||||
|
|
@ -85,3 +85,14 @@ function setStyle(testActor, selector, propertyName, value) {
|
|||
.style.${propertyName} = "${value}";
|
||||
`);
|
||||
}
|
||||
|
||||
/**
|
||||
* The box model doesn't participate in the inspector's update mechanism, so simply
|
||||
* calling the default selectNode isn't enough to guarantee that the box model view has
|
||||
* finished updating. We also need to wait for the "boxmodel-view-updated" event.
|
||||
*/
|
||||
var _selectNode = selectNode;
|
||||
selectNode = function* (node, inspector, reason) {
|
||||
yield _selectNode(node, inspector, reason);
|
||||
yield waitForUpdate(inspector);
|
||||
};
|
||||
|
|
@ -8,5 +8,3 @@ DevToolsModules(
|
|||
'inspector-tab-panel.css',
|
||||
'inspector-tab-panel.js',
|
||||
)
|
||||
|
||||
BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
/* vim: set 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 longer values are rotated on the side
|
||||
|
||||
const res1 = [
|
||||
{selector: ".old-boxmodel-margin.old-boxmodel-top > span", value: 30},
|
||||
{selector: ".old-boxmodel-margin.old-boxmodel-left > span", value: "auto"},
|
||||
{selector: ".old-boxmodel-margin.old-boxmodel-bottom > span", value: 30},
|
||||
{selector: ".old-boxmodel-margin.old-boxmodel-right > span", value: "auto"},
|
||||
{selector: ".old-boxmodel-padding.old-boxmodel-top > span", value: 20},
|
||||
{selector: ".old-boxmodel-padding.old-boxmodel-left > span", value: 2000000},
|
||||
{selector: ".old-boxmodel-padding.old-boxmodel-bottom > span", value: 20},
|
||||
{selector: ".old-boxmodel-padding.old-boxmodel-right > span", value: 20},
|
||||
{selector: ".old-boxmodel-border.old-boxmodel-top > span", value: 10},
|
||||
{selector: ".old-boxmodel-border.old-boxmodel-left > span", value: 10},
|
||||
{selector: ".old-boxmodel-border.old-boxmodel-bottom > span", value: 10},
|
||||
{selector: ".old-boxmodel-border.old-boxmodel-right > span", value: 10},
|
||||
];
|
||||
|
||||
const TEST_URI = encodeURIComponent([
|
||||
"<style>",
|
||||
"div { border:10px solid black; padding: 20px 20px 20px 2000000px; " +
|
||||
"margin: 30px auto; }",
|
||||
"</style>",
|
||||
"<div></div>"
|
||||
].join(""));
|
||||
const LONG_TEXT_ROTATE_LIMIT = 3;
|
||||
|
||||
add_task(function* () {
|
||||
yield addTab("data:text/html," + TEST_URI);
|
||||
let {inspector, view} = yield openBoxModelView();
|
||||
yield selectNode("div", inspector);
|
||||
|
||||
for (let i = 0; i < res1.length; i++) {
|
||||
let elt = view.doc.querySelector(res1[i].selector);
|
||||
let isLong = elt.textContent.length > LONG_TEXT_ROTATE_LIMIT;
|
||||
let classList = elt.parentNode.classList;
|
||||
let canBeRotated = classList.contains("old-boxmodel-left") ||
|
||||
classList.contains("old-boxmodel-right");
|
||||
let isRotated = classList.contains("old-boxmodel-rotate");
|
||||
|
||||
is(canBeRotated && isLong,
|
||||
isRotated, res1[i].selector + " correctly rotated.");
|
||||
}
|
||||
});
|
||||
|
|
@ -180,6 +180,7 @@ function CssComputedView(inspector, document, pageStyle) {
|
|||
|
||||
let doc = this.styleDocument;
|
||||
this.element = doc.getElementById("propertyContainer");
|
||||
this.boxModelWrapper = doc.getElementById("boxmodel-wrapper");
|
||||
this.searchField = doc.getElementById("computedview-searchbox");
|
||||
this.searchClearButton = doc.getElementById("computedview-searchinput-clear");
|
||||
this.includeBrowserStylesCheckbox =
|
||||
|
|
@ -559,10 +560,10 @@ CssComputedView.prototype = {
|
|||
this._filterChangedTimeout = setTimeout(() => {
|
||||
if (this.searchField.value.length > 0) {
|
||||
this.searchField.setAttribute("filled", true);
|
||||
this.inspector.emit("computed-view-filtered", true);
|
||||
this.boxModelWrapper.hidden = true;
|
||||
} else {
|
||||
this.searchField.removeAttribute("filled");
|
||||
this.inspector.emit("computed-view-filtered", false);
|
||||
this.boxModelWrapper.hidden = false;
|
||||
}
|
||||
|
||||
this.refreshPanel();
|
||||
|
|
@ -632,7 +633,7 @@ CssComputedView.prototype = {
|
|||
onShowBoxModelHighlighter,
|
||||
})
|
||||
);
|
||||
ReactDOM.render(provider, this.styleDocument.getElementById("boxmodel-wrapper"));
|
||||
ReactDOM.render(provider, this.boxModelWrapper);
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -813,7 +814,7 @@ CssComputedView.prototype = {
|
|||
|
||||
// Nodes used in templating
|
||||
this.element = null;
|
||||
this.panel = null;
|
||||
this.boxModelWrapper = null;
|
||||
this.searchField = null;
|
||||
this.searchClearButton = null;
|
||||
this.includeBrowserStylesCheckbox = null;
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ function* testToggleDefaultStyles(inspector, computedView) {
|
|||
function* testAddTextInFilter(inspector, computedView) {
|
||||
info("setting filter text to \"color\"");
|
||||
let doc = computedView.styleDocument;
|
||||
let boxModelWrapper = doc.querySelector("#old-boxmodel-wrapper");
|
||||
let boxModelWrapper = doc.getElementById("boxmodel-wrapper");
|
||||
let searchField = computedView.searchField;
|
||||
let onRefreshed = inspector.once("computed-view-refreshed");
|
||||
let win = computedView.styleWindow;
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ function* testClearSearchFilter(inspector, computedView) {
|
|||
|
||||
let win = computedView.styleWindow;
|
||||
let doc = computedView.styleDocument;
|
||||
let boxModelWrapper = doc.querySelector("#old-boxmodel-wrapper");
|
||||
let boxModelWrapper = doc.getElementById("boxmodel-wrapper");
|
||||
let propertyViews = computedView.propertyViews;
|
||||
let searchField = computedView.searchField;
|
||||
let searchClearButton = computedView.searchClearButton;
|
||||
|
|
|
|||
|
|
@ -78,8 +78,6 @@ const PORTRAIT_MODE_WIDTH = 700;
|
|||
* - computed-view-sourcelinks-updated
|
||||
* Fired when the stylesheet source links have been updated (when switching
|
||||
* to source-mapped files)
|
||||
* - computed-view-filtered
|
||||
* Fired when the computed rules view is filtered
|
||||
* - rule-view-refreshed
|
||||
* Fired when the rule view updates to a new node
|
||||
* - rule-view-sourcelinks-updated
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ add_task(function* () {
|
|||
|
||||
info("Testing the box-model region");
|
||||
let margin = inspector.panelDoc.querySelector(
|
||||
".old-boxmodel-margin.old-boxmodel-top > span");
|
||||
".boxmodel-margin.boxmodel-top > span");
|
||||
EventUtils.synthesizeMouseAtCenter(margin, {}, inspector.panelWin);
|
||||
yield checkTextBox(inspector.panelDoc.activeElement, toolbox);
|
||||
});
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче