946273 - Add unit tests for -moz-box-sizing:border-box on a flex container and/or flex items

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[Daniel Holbert [:dholbert]]

Per bug 939901 comment 18, we should add some unit tests with -moz-box-sizing: border-box on flex containers, as well as on flex items.

Comment 1

[Daniel Holbert [:dholbert]]

In my local tests so far (w/ "-moz-box-sizing: border-box" on flex container & also on items, in some simple situations), things seem to be working correctly here.

Diego, would you mind posting a testcase (ideally as an attachment on this bug) that demonstrates the issues you were hitting in bug 939901 comment 51?

Comment 2

[diegobfernandez]

As soon as multiline landed I started a small project to demonstrate flexbox to my company partners
https://github.com/diegobfernandez/HolyGrailFlexbox
can be viewed in https://c9.io/diegobf/github_holygrailflexbox/workspace/index.html

After your request I tried to reproduce it but now I can't.
Maybe I have just missed something.

Sorry.

Comment 3

[Daniel Holbert [:dholbert]]

(In reply to diegobfernandez from comment #2)
> As soon as multiline landed I started a small project to demonstrate flexbox
> to my company partners

Looks nice!

> After your request I tried to reproduce it but now I can't.
> Maybe I have just missed something.
> 
> Sorry.

No worries. I'll take that as good news. :) Please do file a bug (or mention here) if you end up being able to reproduce later, though.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: part 1: Add reftests for box-sizing on horizontal flex container and on flex items with "width" set in horizontal container

This patch adds 2 reftests:
 - one with "box-sizing:border-box" on a horizontal container
 - one with "box-sizing:border-box" on flex items *in* a horizontal container, in 4 different configurations.

In both cases, we do (what I believe is) the right thing -- we behave just as if the "width" had been specified as being a bit less (smaller by the amount of the border in that axis). Conveniently, this "just works" due to how nsHTMLReflowState sets up mComputedWidth and mComputedHeight. (This didn't require any special code in nsFlexContainerFrame.)

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: part 2: Add reftest for box-sizing on flex items with "flex-basis" set, instead of "width"

>  - one with "box-sizing:border-box" on flex items *in* a horizontal
> container, in 4 different configurations.

This adds a "hg cp" variant of that ^^ test, with the flex items' sizing coming from "flex-basis" instead of "width"

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: part 3: add testcases with vertical flex containers

...and this patch adds vertical variants of all of these tests (using hg cp + tweaks).

Comment 7

[Mats Palmgren (inactive)]

Comment on attachment 8350190 [details] [diff] [review]
part 3: add testcases with vertical flex containers

r=mats

Comment 8

[Daniel Holbert [:dholbert]]

https://hg.mozilla.org/integration/mozilla-inbound/rev/2e4b4a2ccced
https://hg.mozilla.org/integration/mozilla-inbound/rev/48a4eaba1894
https://hg.mozilla.org/integration/mozilla-inbound/rev/9ed07b8d7939

Comment 9

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/2e4b4a2ccced
https://hg.mozilla.org/mozilla-central/rev/48a4eaba1894
https://hg.mozilla.org/mozilla-central/rev/9ed07b8d7939