diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js | 166 |
1 files changed, 166 insertions, 0 deletions
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js new file mode 100644 index 0000000000..de1ab24936 --- /dev/null +++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js @@ -0,0 +1,166 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that the regions in the box model view have tooltips, and that individual +// values too. Also test that values that are set from a css rule have tooltips +// referencing the rule. + +const TEST_URI = + "<style>" + + "#div1 { color: red; margin: 3em; }\n" + + "#div2 { border-bottom: 1px solid black; background: red; }\n" + + "html, body, #div3 { box-sizing: border-box; padding: 0 2em; }" + + "</style>" + + "<div id='div1'></div><div id='div2'></div><div id='div3'></div>"; + +// Test data for the tooltips over individual values. +// Each entry should contain: +// - selector: The selector for the node to be selected before starting to test +// - values: An array containing objects for each of the values that are defined +// by css rules. Each entry should contain: +// - name: the name of the property that is set by the css rule +// - ruleSelector: the selector of the rule +// - styleSheetLocation: the fileName:lineNumber +const VALUES_TEST_DATA = [ + { + selector: "#div1", + values: [ + { + name: "margin-top", + ruleSelector: "#div1", + styleSheetLocation: "inline:1", + }, + { + name: "margin-right", + ruleSelector: "#div1", + styleSheetLocation: "inline:1", + }, + { + name: "margin-bottom", + ruleSelector: "#div1", + styleSheetLocation: "inline:1", + }, + { + name: "margin-left", + ruleSelector: "#div1", + styleSheetLocation: "inline:1", + }, + ], + }, + { + selector: "#div2", + values: [ + { + name: "border-bottom-width", + ruleSelector: "#div2", + styleSheetLocation: "inline:2", + }, + ], + }, + { + selector: "#div3", + values: [ + { + name: "padding-top", + ruleSelector: "html, body, #div3", + styleSheetLocation: "inline:3", + }, + { + name: "padding-right", + ruleSelector: "html, body, #div3", + styleSheetLocation: "inline:3", + }, + { + name: "padding-bottom", + ruleSelector: "html, body, #div3", + styleSheetLocation: "inline:3", + }, + { + name: "padding-left", + ruleSelector: "html, body, #div3", + styleSheetLocation: "inline:3", + }, + ], + }, +]; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, boxmodel } = await openLayoutView(); + + info("Checking the regions tooltips"); + + ok( + boxmodel.document.querySelector(".boxmodel-margins").hasAttribute("title"), + "The margin region has a tooltip" + ); + is( + boxmodel.document.querySelector(".boxmodel-margins").getAttribute("title"), + "margin", + "The margin region has the correct tooltip content" + ); + + ok( + boxmodel.document.querySelector(".boxmodel-borders").hasAttribute("title"), + "The border region has a tooltip" + ); + is( + boxmodel.document.querySelector(".boxmodel-borders").getAttribute("title"), + "border", + "The border region has the correct tooltip content" + ); + + ok( + boxmodel.document.querySelector(".boxmodel-paddings").hasAttribute("title"), + "The padding region has a tooltip" + ); + is( + boxmodel.document.querySelector(".boxmodel-paddings").getAttribute("title"), + "padding", + "The padding region has the correct tooltip content" + ); + + ok( + boxmodel.document.querySelector(".boxmodel-content").hasAttribute("title"), + "The content region has a tooltip" + ); + is( + boxmodel.document.querySelector(".boxmodel-content").getAttribute("title"), + "content", + "The content region has the correct tooltip content" + ); + + for (const { selector, values } of VALUES_TEST_DATA) { + info("Selecting " + selector + " and checking the values tooltips"); + await selectNode(selector, inspector); + + info("Iterate over all values"); + for (const key in boxmodel.map) { + if (key === "position") { + continue; + } + + const name = boxmodel.map[key].property; + const expectedTooltipData = values.find(o => o.name === name); + const el = boxmodel.document.querySelector(boxmodel.map[key].selector); + + ok(el.hasAttribute("title"), "The " + name + " value has a tooltip"); + + if (expectedTooltipData) { + info("The " + name + " value comes from a css rule"); + const expectedTooltip = + name + + "\n" + + expectedTooltipData.ruleSelector + + "\n" + + expectedTooltipData.styleSheetLocation; + is(el.getAttribute("title"), expectedTooltip, "The tooltip is correct"); + } else { + info("The " + name + " isn't set by a css rule"); + is(el.getAttribute("title"), name, "The tooltip is correct"); + } + } + } +}); |