Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-16 23:05:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1488885 - Devtools flexbox inspector incorrectly reports width values for row-oriented vertical-writing-mode flexbox. r=gl

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D10292

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Micah Tigley 2018-11-01 13:35:32 +00:00
parent faba2c8c15
commit 793c508af5
5 changed files with 87 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
View File

@ -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;

2
devtools/client/inspector/flexbox/test/browser.ini
View File

@ -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]

45
devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_different_writing_modes.js Normal file
View File

@ -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");
});

33
devtools/client/inspector/flexbox/test/doc_flexbox_writing_modes.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.flex-container {
display: flex;
}
.flex-container.vertical-writing-mode {
writing-mode: vertical-lr;
}
.column {
flex-direction: column;
}
.item {
min-width: 300px;
min-height: 200px;
}
</style>
<div class="flex-container vertical-writing-mode">
<span class="item"></span>
<span class="row vertical item">Vertical Row Content</span>
</div>
<div class="flex-container vertical-writing-mode column">
<span class="column vertical item">Vertical Column Content</span>
</div>
<div class="flex-container">
<span class="row horizontal item">Horizontal Row Content</span>
</div>
<div class="flex-container column">
<span class="column horizontal item">Horizontal Column Content</span>
</div>

7
devtools/server/actors/layout.js
View File

@ -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 = {