Last Comment Bug 529761 - [-moz-box] css percent (%) value not working as expected on any box layout element width and height properties
: [-moz-box] css percent (%) value not working as expected on any box layout el...
Status: NEW
: testcase
Product: Core
Classification: Components
Component: CSS Parsing and Computation (show other bugs)
: 1.9.2 Branch
: All All
: -- normal with 20 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2009-11-19 00:10 PST by rbt_stack
Modified: 2014-09-01 15:11 PDT (History)
14 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
reporter's testcase (3.63 KB, text/html)
2009-11-19 10:58 PST, Ria Klaassen (not reading all bugmail)
no flags Details
Firefox 3.5.5 snapshot - Fail (169.25 KB, image/tiff)
2009-11-20 16:29 PST, Tim Riley [:timr]
no flags Details
Firefox 3.6 Snapshot - Fail (75.87 KB, image/png)
2009-11-20 16:30 PST, Tim Riley [:timr]
no flags Details
IE 8 Snapshot - Fail (69.85 KB, image/png)
2009-11-20 16:30 PST, Tim Riley [:timr]
no flags Details
Safari 4 Snapshot - Pass (96.47 KB, image/tiff)
2009-11-20 16:32 PST, Tim Riley [:timr]
no flags Details
testcase1.1(update) (4.47 KB, text/html)
2010-07-27 12:44 PDT, rbt_stack
no flags Details
Chrome 5 Snapshot - Pass (60.81 KB, image/png)
2010-10-23 20:47 PDT, rbt_stack
no flags Details
Opera 10.63 Snapshot - Fail (95.52 KB, image/png)
2010-10-23 21:18 PDT, rbt_stack
no flags Details
testcase new syntax (2.13 KB, text/html)
2013-09-20 15:11 PDT, Florian Bender
no flags Details

Description rbt_stack 2009-11-19 00:10:34 PST
User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_2; en-us) AppleWebKit/531.9 (KHTML, like Gecko) Version/4.0.3 Safari/531.9
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2b3) Gecko/20091115 Firefox/3.6b3

FF's css width, min-width, max-width, height, min-height, and max-height properties do not work correctly using percentages % values on two or more -moz-box flex elements. The following is an example where the center and right column elements do not correctly calculate the widths in firefox 3.6.3 beta. In the Safari 4+ browsers, it does calculate and display them correctly in the attached example. Presently, there is no work around to correct it. Height has the same problem with two or more -moz-box-orient: vertical elements too. Please, it will need to be fixed. Hopefully, sooner than later. Who ever fixes this, and lives or visits NYC will get a free dirty water dog on me. Thanks.

Reproducible: Always

Steps to Reproduce:
1. Paste example code from additional information into a HTLM file.
2. Save file to your local drive.
3. Open file in a FireFox 3.6.3 beta browser.
Actual Results:  
The first column is set to a shrink to fix column width, and works as expected. The second and third columns set at 50% width, do not working as expected. The second column is extremely stretch, and the third column is extremely crunched.

Expected Results:  
The first column should shrink to fix the width of it's content. The second and third columns set at 50% width, should split the remaining space as expected. A correct expected rendering of it, can be viewed in any safari 4+ browser.

<!DOCTYPE HTML>
<html class="boxsizeBrd HtWd100pcMaPaBd0">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example: Equal Height Columns with CSS Flexible Box Layout</title>
<style>
.childContainer {
	border:   1px #666666 solid;
	margin:   5px; 
	padding: 10px;
}
.boxsizeBrd{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box; 
	  		  box-sizing: border-box;
}
.HtWd100pcMaPaBd0{
     height:    100%;
     width:      100%;
     margin:    0px;
     border:     0px;
     padding:   0px;
}
.boxDisplay {
	display: -webkit-box; 
	    display: -moz-box; 
	             display: box;
}
.blockDisplay {
	display: block; 
}
.boxFlex0 {
	-webkit-box-flex: 0;
    	-moz-box-flex: 0;
                 box-flex: 0;
}
.boxFlex1 {
	-webkit-box-flex: 1;
	   -moz-box-flex: 1;
	            box-flex: 1;
}
.boxFlex2 {
	-webkit-box-flex: 2;
    	-moz-box-flex: 2;
	             box-flex: 2;
}
.boxGroup1 {
	-webkit-box-flex-group: 1;
    	-moz-box-flex-group: 1;
	             box-flex-group: 1;
}
.boxGroup2 {
	-webkit-box-flex-group: 2;
	   -moz-box-flex-group: 2;
	            box-flex-group: 2;
}
.hBoxOrient{
-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
             box-orient: horizontal;
}
.vBoxOrient{
-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
              box-orient:vertical;
}
.boxalignStart{
-webkit-box-align: start;
	-moz-box-align: start;
	         box-align: start;
}
.boxalignCenter{
-webkit-box-align: center;
	-moz-box-align: center;
	         box-align: center;
}
.boxalignEnd{
-webkit-box-align: end;
	-moz-box-align: end;
	         box-align: end;
}
.boxalignStretch{
-webkit-box-align: stretch;
	-moz-box-align: stretch;
	         box-align: stretch;
}
.boxpackStart {
	-webkit-box-pack: start;
	    -moz-box-pack: start;
	             box-pack: start;
}
.boxpackEnd {
	-webkit-box-pack: end;
	    -moz-box-pack: end;
	             box-pack: end;
}
.boxpackCenter { 
	-webkit-box-pack: center;
    	-moz-box-pack: center;
	             box-pack: center;
}
.boxpackJustify {
	-webkit-box-pack: justify;
	    -moz-box-pack: justify;
	             box-pack: justify;
}
.boxsizeBrd{
 -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
              box-sizing: border-box;
}
</style>
</head>

<body class="boxsizeBrd HtWd100pcMaPaBd0" style="background:white;">
	<div class="container boxsizeBrd boxDisplay hBoxOrient boxalignStretch" style="background:blue; height:auto; width:80%;margin:0px auto">
		<div class="childContainer boxsizeBrd blockDisplay boxFlex0" style=" width:auto; min-width:auto; white-space:normal;">Left-hand-column</div>
		<div class="childContainer boxsizeBrd blockDisplay boxFlex1" style="width:50%; min-width:50%; white-space:normal;">
			 Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
		</div>
		<div class="childContainer boxsizeBrd blockDisplay boxFlex1" style="width:50%; min-width:50%; white-space:normal;">Right-hand-column</div>
	</div>
</body>

</html>
Comment 1 Ria Klaassen (not reading all bugmail) 2009-11-19 10:57:05 PST
It looks indeed strange especially with Firefox 3.6 and trunk. Every browser has its own idea how it should be displayed. Opera for instance places the three columns vertically.
Comment 2 Ria Klaassen (not reading all bugmail) 2009-11-19 10:58:14 PST
Created attachment 413391 [details]
reporter's testcase
Comment 3 rbt_stack 2009-11-19 13:33:45 PST
To my best, Opera has yet added http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#flex support to any of it's public builds. So I did not include the code for the example to work with Opera. Although Opera is not currently supporting it, I did update the example for future testing of Opera. If it's needed, I can provide a link to it at my website at www.zoshe.com or add it to a comment here.
 
I believe Browsers should fit-to-width first, than fit-to-max-width or fit-to-min-width second, and than fit-to-flex third.  Same for height too. Safari is clearly following this logic, and so does Firefox when the min-width is set with a unit size other than %. For example, FireFox follows this logic when the second and third columns min-width is changed from min-width:50% to min-width:25em . Currently, I have not tested all the unit sizes, but they all should follow this logic. Presently, I have tested the following unit sizes:
px - works as expected.
em - works as expected.
% - does not work as expected.
Comment 4 Tim Riley [:timr] 2009-11-20 16:14:08 PST
This fails in Firefox 3.5.5 (MacOS 10.5) and 3.6b3pre (Win 7) and IE 8.0.7600 (Win 7)
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2b3pre) Gecko/20091110 Namoroka/3.6b3pre 

Works correctly in Safari (MacOS 10.5)
Version 4.0.3 (5531.9)

IE fails the most - The columns are spaced vertically rather than horizontally.  Sounds like what Ria said Opera looks like.  For FFx 3.5.5 and 3.6pre, columns are spaced horizontally, but not correctly sized as described in comment #0.

Ria-  Anything else you wanted tested since you added qawanted? Removing it for now.
Comment 5 Tim Riley [:timr] 2009-11-20 16:29:47 PST
Created attachment 413739 [details]
Firefox 3.5.5 snapshot - Fail
Comment 6 Tim Riley [:timr] 2009-11-20 16:30:24 PST
Created attachment 413740 [details]
Firefox 3.6 Snapshot - Fail
Comment 7 Tim Riley [:timr] 2009-11-20 16:30:58 PST
Created attachment 413741 [details]
IE 8 Snapshot - Fail
Comment 8 Tim Riley [:timr] 2009-11-20 16:32:19 PST
Created attachment 413744 [details]
Safari 4 Snapshot - Pass

Submitted 4 snapshots for easy reference.
Comment 9 rbt_stack 2009-11-21 00:28:21 PST
IE like opera currently do not support the flex box model. But the recent showings of the upcoming IE9 version does make me strongly believe, it will in the future release of ie9. I did not add any opera(-o-) or ie(-ms-) vendor extensions to the example code, because neither have officially announced any for the flex box layout model. Therefor, both ie and opera will not correctly show what is expected in the test case example. Also, I notice Opera does not always exclusively use "-o-" for a vendor extension. For some css properties, Opera does use -xv- . Highly unlikely, but maybe Opera has these properties working under a different -??- extension.
  
(In reply to comment #7)
> Created an attachment (id=413741) [details]
> IE 8 Snapshot - Fail
Comment 10 rbt_stack 2010-07-27 12:44:16 PDT
Created attachment 460618 [details]
testcase1.1(update)

I updated the testcase file so it can also include Internet Explorer, KHTML, and the Opera browsers.
Comment 11 rbt_stack 2010-10-23 20:47:56 PDT
Created attachment 485559 [details]
Chrome 5 Snapshot - Pass
Comment 12 rbt_stack 2010-10-23 21:18:27 PDT
Created attachment 485560 [details]
Opera 10.63 Snapshot - Fail
Comment 13 Oli Studholme 2011-01-13 14:57:48 PST
ref: https://bugzilla.mozilla.org/show_bug.cgi?id=394078 for XUL bug
Comment 14 Gordon P. Hemsley [:GPHemsley] 2013-02-20 00:08:35 PST
Is this still a problem for the modern implementation of flexbox?
Comment 15 Veeck 2013-06-25 14:06:27 PDT
(In reply to Gordon P. Hemsley [:gphemsley] from comment #14)
> Is this still a problem for the modern implementation of flexbox?

Tested it with FF22 released today, still buggy
Comment 16 Daniel Holbert [:dholbert] (mostly OOTO until Aug 9th) 2013-06-26 09:22:15 PDT
(In reply to Veeck from comment #15)
> (In reply to Gordon P. Hemsley [:gphemsley] from comment #14)
> > Is this still a problem for the modern implementation of flexbox?
> 
> Tested it with FF22 released today, still buggy

to be clear, the "modern implementation of flexbox" uses all-new keywords (display:flex, etc), so it would require a different testcase to test it. It looks like comment 15 was just re-testing the existing testcase, in current builds.

(Aside: there's no reason to suspect that this bug *would* affect the modern implementation of flexbox, since it's a completely separate implementation under-the-hood, with its own new and different (and hopefully few ;)) bugs.)

Anyway -- I don't believe this affects modern flexbox -- we have several automated testcases that check that percentage flex-basis values work correctly, in this file:
http://mxr.mozilla.org/mozilla-central/source/layout/style/test/flexbox_layout_testcases.js
...which means percentage width/height values should also work (since flex-basis:auto just proxies through to width/height).

In the unlikely event that something like this *does* affect modern flexbox, we should track that in its own bug.
Comment 17 Florian Bender 2013-09-20 15:11:35 PDT
Created attachment 807998 [details]
testcase new syntax

– updated to current flexbox spec (ignoring tweener syntax in IE 10, IE 11 will have the new syntax)
– removed unused style definitions
– removed prefixes (except -webkit- due to high number of implementations that still use this)
– other cleanup

I simply converted the properties 1:1 from old to new syntax. The result does not look like the way it should compared to the screenshots provided. However, both Firefox and Chrome render about the same so this may actually be the intended behaviour (I did not check what the spec says).
Comment 18 Daniel Holbert [:dholbert] (mostly OOTO until Aug 9th) 2013-09-20 15:23:19 PDT
Comment on attachment 807998 [details]
testcase new syntax

Per comment 16, this bug is about "-moz-box".

The new flexbox implementation and layout model are completely different (though the spec is related), so it makes sense that broken -moz-box testcase would still be broken after *just* a keyword switchover.

Given that firefox and chrome agree on this testcase, I'm assuming it's correct (though that doesn't really say anything about this bug, since this is a bug in our display:-moz-box implementation, not in our display:flex implementation.)

Note You need to log in before you can comment on or make changes to this bug.