diff options
Diffstat (limited to 'devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js')
-rw-r--r-- | devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js new file mode 100644 index 0000000000..3e40eda951 --- /dev/null +++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js @@ -0,0 +1,97 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that inplace editors can be blurred by clicking outside of the editor. + +const TEST_URI = `<style> + #div1 { + margin: 10px; + padding: 3px; + } + </style> + <div id="div1"></div>`; + +add_task(async function () { + // Make sure the toolbox is tall enough to have empty space below the + // boxmodel-container. + await pushPref("devtools.toolbox.footer.height", 500); + + await addTab("data:text/html," + encodeURIComponent(TEST_URI)); + const { inspector, boxmodel } = await openLayoutView(); + + await selectNode("#div1", inspector); + await testClickingOutsideEditor(boxmodel); + await testClickingBelowContainer(boxmodel); +}); + +async function testClickingOutsideEditor(boxmodel) { + info("Test that clicking outside the editor blurs it"); + const span = boxmodel.document.querySelector( + ".boxmodel-margin.boxmodel-top > span" + ); + await waitForElementTextContent(span, "10"); + + EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView); + const editor = boxmodel.document.querySelector( + ".styleinspector-propertyeditor" + ); + ok(editor, "Should have opened the editor."); + + info("Click next to the opened editor input."); + const onBlur = once(editor, "blur"); + const rect = editor.getBoundingClientRect(); + EventUtils.synthesizeMouse( + editor, + rect.width + 10, + rect.height / 2, + {}, + boxmodel.document.defaultView + ); + await onBlur; + + is( + boxmodel.document.querySelector(".styleinspector-propertyeditor"), + null, + "Inplace editor has been removed." + ); +} + +async function testClickingBelowContainer(boxmodel) { + info("Test that clicking below the box-model container blurs it"); + const span = boxmodel.document.querySelector( + ".boxmodel-margin.boxmodel-top > span" + ); + await waitForElementTextContent(span, "10"); + + info( + "Test that clicking below the boxmodel-container blurs the opened editor" + ); + EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView); + const editor = boxmodel.document.querySelector( + ".styleinspector-propertyeditor" + ); + ok(editor, "Should have opened the editor."); + + const onBlur = once(editor, "blur"); + const container = boxmodel.document.querySelector(".boxmodel-container"); + // Using getBoxQuads here because getBoundingClientRect (and therefore synthesizeMouse) + // use an erroneous height of ~50px for the boxmodel-container. + const bounds = container + .getBoxQuads({ relativeTo: boxmodel.document })[0] + .getBounds(); + EventUtils.synthesizeMouseAtPoint( + bounds.left + 10, + bounds.top + bounds.height + 10, + {}, + boxmodel.document.defaultView + ); + await onBlur; + + is( + boxmodel.document.querySelector(".styleinspector-propertyeditor"), + null, + "Inplace editor has been removed." + ); +} |