From 793c508af57d4b789b612eb29820ed3b0d44d48e Mon Sep 17 00:00:00 2001 From: Micah Tigley Date: Thu, 1 Nov 2018 13:35:32 +0000 Subject: [PATCH] Bug 1488885 - Devtools flexbox inspector incorrectly reports width values for row-oriented vertical-writing-mode flexbox. r=gl Differential Revision: https://phabricator.services.mozilla.com/D10292 --HG-- extra : moz-landing-system : lando --- .../components/FlexItemSizingProperties.js | 4 +- .../client/inspector/flexbox/test/browser.ini | 2 + ...sizing_info_for_different_writing_modes.js | 45 +++++++++++++++++++ .../test/doc_flexbox_writing_modes.html | 33 ++++++++++++++ devtools/server/actors/layout.js | 7 ++- 5 files changed, 87 insertions(+), 4 deletions(-) create mode 100644 devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_different_writing_modes.js create mode 100644 devtools/client/inspector/flexbox/test/doc_flexbox_writing_modes.html diff --git a/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js b/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js index 0f8230668e62..9b8ce115cdb7 100644 --- a/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js +++ b/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js @@ -284,7 +284,6 @@ class FlexItemSizingProperties extends PureComponent { render() { const { - flexDirection, flexItem, } = this.props; const { @@ -293,12 +292,13 @@ class FlexItemSizingProperties extends PureComponent { properties, } = flexItem; const { + mainAxisDirection, mainBaseSize, mainDeltaSize, mainMaxSize, mainMinSize, } = flexItemSizing; - const dimension = flexDirection.startsWith("row") ? "width" : "height"; + const dimension = mainAxisDirection.startsWith("horizontal") ? "width" : "height"; // Calculate the final size. This is base + delta, then clamped by min or max. let mainFinalSize = mainBaseSize + mainDeltaSize; diff --git a/devtools/client/inspector/flexbox/test/browser.ini b/devtools/client/inspector/flexbox/test/browser.ini index c6786da86971..7cd7c0dfbdf5 100644 --- a/devtools/client/inspector/flexbox/test/browser.ini +++ b/devtools/client/inspector/flexbox/test/browser.ini @@ -6,6 +6,7 @@ support-files = doc_flexbox_simple.html doc_flexbox_specific_cases.html doc_flexbox_text_nodes.html + doc_flexbox_writing_modes.html head.js !/devtools/client/inspector/test/head.js !/devtools/client/inspector/test/shared-head.js @@ -23,6 +24,7 @@ support-files = [browser_flexbox_pseudo_elements_are_listed.js] [browser_flexbox_sizing_flexibility_not_displayed_when_useless.js] [browser_flexbox_sizing_info_exists.js] +[browser_flexbox_sizing_info_for_different_writing_modes.js] [browser_flexbox_sizing_info_for_pseudos.js] [browser_flexbox_sizing_info_for_text_nodes.js] [browser_flexbox_sizing_info_has_correct_sections.js] diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_different_writing_modes.js b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_different_writing_modes.js new file mode 100644 index 000000000000..a90261ea99f4 --- /dev/null +++ b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_different_writing_modes.js @@ -0,0 +1,45 @@ +/* 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 the flex item sizing info shows the correct dimension values for different +// writing modes. For vertical writing modes, row items should display height values and +// column items should display width values. The opposite is true for horizontal mode +// where rows display width values and columns display height. + +const TEST_URI = URL_ROOT + "doc_flexbox_writing_modes.html"; + +async function checkFlexItemDimension(inspector, container, selector, expectedDimension) { + info("Select container's flex item."); + await selectNode(selector, inspector); + + info("Check that the minimum size section shows the correct dimension."); + const [sectionMinRowItem] = [...container.querySelectorAll( + ".section.min")]; + const minDimension = sectionMinRowItem.querySelector(".theme-fg-color5"); + + ok(minDimension.textContent, expectedDimension, + "The flex item sizing has the correct dimension value."); +} + +add_task(async function() { + await addTab(TEST_URI); + const { inspector, flexboxInspector } = await openLayoutView(); + const { document: doc } = flexboxInspector; + + info("Select a flex item to initialize the flex item sizing section."); + const onFlexItemSizingRendered = waitForDOM(doc, "ul.flex-item-sizing"); + await selectNode(".item", inspector); + const [flexItemSizingContainer] = await onFlexItemSizingRendered; + + await checkFlexItemDimension(inspector, flexItemSizingContainer, + ".row.vertical.item", "min-height"); + await checkFlexItemDimension(inspector, flexItemSizingContainer, + ".column.vertical.item", "min-width"); + await checkFlexItemDimension(inspector, flexItemSizingContainer, + ".row.horizontal.item", "min-width"); + await checkFlexItemDimension(inspector, flexItemSizingContainer, + ".column.horizontal.item", "min-height"); +}); diff --git a/devtools/client/inspector/flexbox/test/doc_flexbox_writing_modes.html b/devtools/client/inspector/flexbox/test/doc_flexbox_writing_modes.html new file mode 100644 index 000000000000..a9d30da43007 --- /dev/null +++ b/devtools/client/inspector/flexbox/test/doc_flexbox_writing_modes.html @@ -0,0 +1,33 @@ + + + +
+ + Vertical Row Content +
+
+ Vertical Column Content +
+
+ Horizontal Row Content +
+
+ Horizontal Column Content +
diff --git a/devtools/server/actors/layout.js b/devtools/server/actors/layout.js index 077b1af41cb2..b7a8872a85a5 100644 --- a/devtools/server/actors/layout.js +++ b/devtools/server/actors/layout.js @@ -100,10 +100,13 @@ const FlexboxActor = ActorClassWithSpec(flexboxSpec, { } const flexItemActors = []; + const { crossAxisDirection, mainAxisDirection } = flex; for (const line of flex.getLines()) { for (const item of line.getItems()) { flexItemActors.push(new FlexItemActor(this, item.node, { + crossAxisDirection, + mainAxisDirection, crossMaxSize: item.crossMaxSize, crossMinSize: item.crossMinSize, mainBaseSize: item.mainBaseSize, @@ -155,8 +158,8 @@ const FlexItemActor = ActorClassWithSpec(flexItemSpec, { return this.actorID; } - const { flexDirection } = CssLogic.getComputedStyle(this.containerEl); - const dimension = flexDirection.startsWith("row") ? "width" : "height"; + const { mainAxisDirection } = this.flexItemSizing; + const dimension = mainAxisDirection.startsWith("horizontal") ? "width" : "height"; // Find the authored sizing properties for this item. const properties = {