DevTools flexbox inspector incorrectly reports width values, for row-oriented vertical-writing-mode flexbox

RESOLVED FIXED in Firefox 65

Status

defect
P3
normal
RESOLVED FIXED
9 months ago
7 months ago

People

(Reporter: dholbert, Assigned: mtigley)

Tracking

unspecified
Firefox 65
Dependency tree / graph

Firefox Tracking Flags

(firefox65 fixed)

Details

Attachments

(1 attachment)

Reporter

Description

9 months ago
STR:
 0. Set pref devtools.flexboxinspector.enabled to true

 1. Visit this data URL:
 data:text/html,<div style="display:flex;writing-mode:vertical-rl"><span>abc

 2. Right-click "abc" and choose "inspect"

 3. Click the "flex" badge in the DOM view.

 4. In the "Layout" inspector pane (to the right), click "1. span" to expand the flex-item info for the <span>.


ACTUAL RESULTS:
The pane reports "Content width", "Min-width", "Max-width", and "Final width", but the main axis is the vertical axis.

EXPECTED RESULTS:
The pane should report "height" values.
Reporter

Updated

9 months ago
Blocks: 1470379
Reporter

Comment 1

9 months ago
In particular:
IF the flex container's computed "writing-mode" == "horizontal-tb":
   * flex-direction:row/row-reverse means horizontal (widths), vs. column/column-reverse means vertical (heights)
ELSE:
   * It's the opposite. i.e.:
   * flex-direction:row/row-reverse means vertical (heights), vs. column/column-reverse means horizontal (widths)
Blocks: dt-flexbox, 1478396
No longer blocks: 1470379
Depends on: 1478397
Priority: -- → P3
This will change a bit with bug 1495717 as we don't display these properties as is anymore. But the bug still exists.
Let's wait for that bug to land, and then investigate again.

At that time, it will make more sense to use this test case instead:

data:text/html,<div style="display:flex;writing-mode:vertical-rl"><span style="min-width:300px;min-height:200px">abc
No longer blocks: dt-flexbox
Depends on: 1495717
No longer depends on: 1478397
Let's wait for bug 1497589 to land since that'll give us the physical direction of the main and cross axis.
I think we should expose them on the FlexboxActor's form object because they will be useful in many cases.
Depends on: 1497589
Assignee

Updated

7 months ago
Assignee: nobody → mtigley
Status: NEW → ASSIGNED

Comment 6

7 months ago
Pushed by mtigley@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/f2d6d537d09e
Devtools flexbox inspector incorrectly reports width values for row-oriented vertical-writing-mode flexbox. r=gl
Micah, for info the assert that failed here just landed so that's why your try pushes didn't show it.
In your test you have a call to `ok()` which is incorrect:

  ok(minDimension.textContent, expectedDimension,
    "The flex item sizing has the correct dimension value.");

You want to use `is()` here, otherwise you are only checking that `minDimension.textContent` is not false.
Assignee

Comment 9

7 months ago
My apologies. I missed the incorrect call to "ok()" before pushing. Thank you for letting me know. I will get it fixed up!
Flags: needinfo?(mtigley)

Comment 10

7 months ago
Pushed by mtigley@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/afbdda6211c9
Devtools flexbox inspector incorrectly reports width values for row-oriented vertical-writing-mode flexbox. r=gl

Comment 11

7 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/afbdda6211c9
Status: ASSIGNED → RESOLVED
Last Resolved: 7 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65
You need to log in before you can comment on or make changes to this bug.