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/flexbox/test/browser_flexbox_item_outline_has_correct_layout.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/flexbox/test/browser_flexbox_item_outline_has_correct_layout.js | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_has_correct_layout.js b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_has_correct_layout.js new file mode 100644 index 0000000000..e81d6f5677 --- /dev/null +++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_has_correct_layout.js @@ -0,0 +1,67 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that the flex item outline has a correct layout. This outline is built using css +// grid under the hood to position everything. So we want to check that the template for +// this grid has been correctly generated depending on the item that is currently +// selected. + +const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html"; + +const TEST_DATA = [ + { + selector: ".shrinking .item", + expectedGridTemplate: + "[basis-start final-start] 300fr [final-end delta-start] " + + "200fr [basis-end delta-end]", + }, + { + selector: ".shrinking.is-clamped .item", + expectedGridTemplate: + "[basis-start final-start] 300fr [delta-start] " + + "50fr [final-end min] 150fr [basis-end delta-end]", + }, + { + selector: ".growing .item", + expectedGridTemplate: + "[basis-start final-start] 200fr [basis-end delta-start] " + + "100fr [final-end delta-end]", + }, + { + selector: ".growing.is-clamped .item", + expectedGridTemplate: + "[basis-start final-start] 200fr [basis-end delta-start] " + + "50fr [final-end max] 50fr [delta-end]", + }, + { + selector: "#wanted-to-shrink-more-than-basis div:first-child", + expectedGridTemplate: + "[delta-start] 63fr [basis-start final-start] " + + "60fr [final-end min] 140fr [basis-end delta-end]", + }, +]; + +add_task(async function () { + await addTab(TEST_URI); + const { inspector, flexboxInspector } = await openLayoutView(); + const { document: doc } = flexboxInspector; + + for (const { selector, expectedGridTemplate } of TEST_DATA) { + info( + `Checking the grid template for the flex item outline for ${selector}` + ); + + await selectNode(selector, inspector); + await waitUntil(() => { + const flexOutline = doc.querySelector(".flex-outline"); + return ( + flexOutline && + flexOutline.style.gridTemplateColumns === expectedGridTemplate + ); + }); + + ok(true, "Grid template is correct"); + } +}); |