diff options
Diffstat (limited to 'devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js')
-rw-r--r-- | devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js new file mode 100644 index 0000000000..f84ca9d8b0 --- /dev/null +++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js @@ -0,0 +1,54 @@ +/* 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(async function () { + await addTab("data:text/html," + TEST_URI); + const { inspector, boxmodel } = await openLayoutView(); + await selectNode("div", inspector); + + for (let i = 0; i < res1.length; i++) { + const elt = boxmodel.document.querySelector(res1[i].selector); + const isLong = elt.textContent.length > LONG_TEXT_ROTATE_LIMIT; + const classList = elt.parentNode.classList; + const canBeRotated = + classList.contains("boxmodel-left") || + classList.contains("boxmodel-right"); + const isRotated = classList.contains("boxmodel-rotate"); + + is( + canBeRotated && isLong, + isRotated, + res1[i].selector + " correctly rotated." + ); + } +}); |