Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-02-27 12:50:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1032922 part 2: Rename flex-basis's "auto" keyword to "main-size" (but retain "flex:auto" as shorthand for "1 1 main-size"). r=heycam

Browse Source
This commit is contained in:
Daniel Holbert 2014-08-07 22:11:48 -07:00
parent cb313ca766
commit abbc77f1fc
41 changed files with 266 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
browser/base/content/browser.css
View File

@ -1046,14 +1046,14 @@ toolbarpaletteitem[dragover] {
#customization-palette:not([hidden]) {
display: block;
flex: 1 1 auto;
flex: 1 1 main-size;
overflow: auto;
min-height: 3em;
}
#customization-footer-spacer,
#customization-spacer {
flex: 1 1 auto;
flex: 1 1 main-size;
}
#customization-footer {

2
browser/devtools/markupview/markup-view.css
View File

@ -35,7 +35,7 @@
.html-editor-inner {
border: solid .1px;
flex: 1 1 auto;
flex: 1 1 main-size;
}
.html-editor iframe {

10
browser/metro/theme/config.css
View File

@ -57,7 +57,7 @@ body {
min-width: 0;
color: #000000;
opacity: 1;
flex: 1 1 auto;
flex: 1 1 main-size;
}
#filter-input:-moz-placeholder {
@ -193,7 +193,7 @@ li {
.pref-value {
color: rgba(0,0,0,0.5);
flex: 1 1 auto;
flex: 1 1 main-size;
border: none;
-moz-appearance: none;
background-image: none;
@ -227,7 +227,7 @@ li {
}
#new-pref-value-boolean {
flex: 1 1 auto;
flex: 1 1 main-size;
}
/* Disable newPref dialog spinbuttons, use custom version from Android */
@ -239,7 +239,7 @@ li {
#new-pref-container .pref-button.toggle {
display: inline-block;
opacity: 1;
flex: 0 1 auto;
flex: 0 1 main-size;
float: right;
}
@ -247,7 +247,7 @@ li {
#new-pref-container .pref-button.create {
display: inline-block;
opacity: 1;
flex: 1 1 auto;
flex: 1 1 main-size;
}
.pref-item-line {

2
browser/themes/shared/customizableui/panelUIOverlay.inc.css
View File

@ -250,7 +250,7 @@ panelview:not([mainview]) .toolbarbutton-text,
#PanelUI-contents {
display: block;
flex: 1 0 auto;
flex: 1 0 main-size;
margin-left: auto;
margin-right: auto;
padding: .5em 0;

24
browser/themes/shared/devtools/webconsole.inc.css
View File

@ -17,24 +17,24 @@ a {
.message {
display: flex;
flex: 0 0 auto;
flex: 0 0 main-size;
padding: 0 7px;
width: 100%;
box-sizing: border-box;
}
.message > .timestamp {
flex: 0 0 auto;
flex: 0 0 main-size;
color: GrayText;
margin: 4px 6px 0 0;
}
.message > .indent {
flex: 0 0 auto;
flex: 0 0 main-size;
}
.message > .icon {
flex: 0 0 auto;
flex: 0 0 main-size;
margin: 3px 6px 0 0;
padding: 0 4px;
height: 1em;
@ -66,7 +66,7 @@ a {
/* The red bubble that shows the number of times a message is repeated */
.message-repeats {
-moz-user-select: none;
flex: 0 0 auto;
flex: 0 0 main-size;
margin: 2px 6px;
padding: 0 6px;
height: 1.25em;
@ -84,7 +84,7 @@ a {
.message-location {
display: flex;
flex: 0 0 auto;
flex: 0 0 main-size;
align-self: flex-start;
justify-content: flex-end;
width: 10em;
@ -106,7 +106,7 @@ a {
}
.message-location > .line-number {
flex: 0 0 auto;
flex: 0 0 main-size;
}
.message-flex-body {
@ -120,7 +120,7 @@ a {
.message-flex-body > .message-body {
display: block;
flex: 1 1 auto;
flex: 1 1 main-size;
vertical-align: middle;
}
@ -236,11 +236,11 @@ a {
}
.message[category=network] .method {
flex: 0 0 auto;
flex: 0 0 main-size;
}
.message[category=network]:not(.navigation-marker) .url {
flex: 1 1 auto;
flex: 1 1 main-size;
/* Make sure the URL is very small initially, let flex change width as needed. */
width: 100px;
min-width: 5em;
@ -250,7 +250,7 @@ a {
}
.message[category=network] .status {
flex: 0 0 auto;
flex: 0 0 main-size;
-moz-margin-start: 6px;
}
@ -454,7 +454,7 @@ a {
.stacktrace .function {
display: block;
flex: 1 1 auto;
flex: 1 1 main-size;
}
.cm-s-mozilla a[class] {

22
layout/base/nsLayoutUtils.cpp
View File

@ -69,6 +69,7 @@
#include "SVGTextFrame.h"
#include "nsStyleStructInlines.h"
#include "nsStyleTransformMatrix.h"
#include "nsStyleUtil.h"
#include "nsIFrameInlines.h"
#include "ImageContainer.h"
#include "nsComputedDOMStyle.h"
@ -4195,8 +4196,8 @@ nsLayoutUtils::ComputeSizeWithIntrinsicDimensions(
if (isFlexItem) {
// Flex items use their "flex-basis" property in place of their main-size
// property (e.g. "width") for sizing purposes, *unless* they have
// "flex-basis:auto", in which case they use their main-size property after
// all.
// "flex-basis:main-size", in which case they use their main-size property
// after all.
uint32_t flexDirection =
aFrame->GetParent()->StylePosition()->mFlexDirection;
isHorizontalFlexItem =
@ -4206,21 +4207,8 @@ nsLayoutUtils::ComputeSizeWithIntrinsicDimensions(
// NOTE: The logic here should match the similar chunk for determining
// widthStyleCoord and heightStyleCoord in nsFrame::ComputeSize().
const nsStyleCoord* flexBasis = &(stylePos->mFlexBasis);
if (flexBasis->GetUnit() != eStyleUnit_Auto) {
if (isHorizontalFlexItem) {
widthStyleCoord = flexBasis;
} else {
// One caveat for vertical flex items: We don't support enumerated
// values (e.g. "max-content") for height properties yet. So, if our
// computed flex-basis is an enumerated value, we'll just behave as if
// it were "auto", which means "use the main-size property after all"
// (which is "height", in this case).
// NOTE: Once we support intrinsic sizing keywords for "height",
// we should remove this check.
if (flexBasis->GetUnit() != eStyleUnit_Enumerated) {
heightStyleCoord = flexBasis;
}
}
if (!nsStyleUtil::IsFlexBasisMainSize(*flexBasis, isHorizontalFlexItem)) {
(isHorizontalFlexItem ? widthStyleCoord : heightStyleCoord) = flexBasis;
}
}

14
layout/generic/nsFlexContainerFrame.cpp
View File

@ -17,6 +17,7 @@
#include "nsPresContext.h"
#include "nsRenderingContext.h"
#include "nsStyleContext.h"
#include "nsStyleUtil.h"
#include "prlog.h"
#include <algorithm>
#include "mozilla/LinkedList.h"
@ -571,7 +572,8 @@ protected:
// These are non-const so that we can lazily update them with the item's
// intrinsic size (obtained via a "measuring" reflow), when necessary.
// (e.g. for "flex-basis:auto;height:auto" & "min-height:auto")
// (e.g. if we have a vertical flex item with "flex-basis:auto",
// "flex-basis:main-size;height:auto", or "min-height:auto")
nscoord mFlexBaseSize;
nscoord mMainMinSize;
nscoord mMainMaxSize;
@ -1166,10 +1168,10 @@ PartiallyResolveAutoMinSize(const FlexItem& aFlexItem,
// from here, w/ std::min().
// We need the smallest of:
// * the used flex-basis, if the computed flex-basis was 'auto':
// XXXdholbert ('auto' might be renamed to 'main-size'; see bug 1032922)
if (eStyleUnit_Auto ==
aItemReflowState.mStylePosition->mFlexBasis.GetUnit() &&
// * the used flex-basis, if the computed flex-basis was 'main-size':
const nsStyleCoord& flexBasis = aItemReflowState.mStylePosition->mFlexBasis;
const bool isHorizontal = IsAxisHorizontal(aAxisTracker.GetMainAxis());
if (nsStyleUtil::IsFlexBasisMainSize(flexBasis, isHorizontal) &&
aFlexItem.GetFlexBaseSize() != NS_AUTOHEIGHT) {
// NOTE: We skip this if the flex base size depends on content & isn't yet
// resolved. This is OK, because the caller is responsible for computing
@ -1223,7 +1225,7 @@ ResolveAutoFlexBasisFromRatio(FlexItem& aFlexItem,
"Should only be called to resolve an 'auto' flex-basis");
// If the flex item has ...
// - an intrinsic aspect ratio,
// - a [used] flex-basis of 'main-size' [auto?] [We have this, if we're here.]
// - a [used] flex-basis of 'main-size' [We have this, if we're here.]
// - a definite cross size
// then the flex base size is calculated from its inner cross size and the
// flex item’s intrinsic aspect ratio.

23
layout/generic/nsFrame.cpp
View File

@ -26,6 +26,7 @@
#include "nsIScrollableFrame.h"
#include "nsPresContext.h"
#include "nsStyleConsts.h"
#include "nsStyleUtil.h"
#include "nsIPresShell.h"
#include "prlog.h"
#include "prprf.h"
@ -4060,8 +4061,8 @@ nsFrame::ComputeSize(nsRenderingContext *aRenderingContext,
if (isFlexItem) {
// Flex items use their "flex-basis" property in place of their main-size
// property (e.g. "width") for sizing purposes, *unless* they have
// "flex-basis:auto", in which case they use their main-size property after
// all.
// "flex-basis:main-size", in which case they use their main-size property
// after all.
uint32_t flexDirection = GetParent()->StylePosition()->mFlexDirection;
isHorizontalFlexItem =
flexDirection == NS_STYLE_FLEX_DIRECTION_ROW ||
@ -4071,21 +4072,9 @@ nsFrame::ComputeSize(nsRenderingContext *aRenderingContext,
// widthStyleCoord and heightStyleCoord in
// nsLayoutUtils::ComputeSizeWithIntrinsicDimensions().
const nsStyleCoord* flexBasis = &(stylePos->mFlexBasis);
if (flexBasis->GetUnit() != eStyleUnit_Auto) {
if (isHorizontalFlexItem) {
widthStyleCoord = flexBasis;
} else {
// One caveat for vertical flex items: We don't support enumerated
// values (e.g. "max-content") for height properties yet. So, if our
// computed flex-basis is an enumerated value, we'll just behave as if
// it were "auto", which means "use the main-size property after all"
// (which is "height", in this case).
// NOTE: Once we support intrinsic sizing keywords for "height",
// we should remove this check.
if (flexBasis->GetUnit() != eStyleUnit_Enumerated) {
heightStyleCoord = flexBasis;
}
}
if (!nsStyleUtil::IsFlexBasisMainSize(*flexBasis, isHorizontalFlexItem)) {
(isHorizontalFlexItem ?
widthStyleCoord : heightStyleCoord) = flexBasis;
}
}

4
layout/reftests/flexbox/flexbox-position-absolute-1.xhtml
View File

@ -28,13 +28,13 @@
display: flex;
}
div.a {
flex: 1 0 auto;
flex: 1 0 main-size;
width: 30px;
height: 100px;
background: lightgreen;
}
div.b {
flex: 2 0 auto;
flex: 2 0 main-size;
width: 20px;
height: 100px;
background: yellow;

4
layout/reftests/flexbox/flexbox-position-absolute-2.xhtml
View File

@ -29,13 +29,13 @@
display: flex;
}
div.a {
flex: 1 0 auto;
flex: 1 0 main-size;
width: 30px;
height: 100px;
background: lightgreen;
}
div.b {
flex: 2 0 auto;
flex: 2 0 main-size;
width: 20px;
height: 100px;
background: yellow;

2
layout/reftests/flexbox/flexbox-position-absolute-4.xhtml
View File

@ -32,7 +32,7 @@
border: 1px solid black;
}
div.a {
flex: 1 0 auto;
flex: 1 0 main-size;
width: 30px;
height: 100px;
background: lightgreen;

4
layout/reftests/flexbox/flexbox-position-fixed-1.xhtml
View File

@ -28,13 +28,13 @@
display: flex;
}
div.a {
flex: 1 0 auto;
flex: 1 0 main-size;
width: 30px;
height: 100px;
background: lightgreen;
}
div.b {
flex: 2 0 auto;
flex: 2 0 main-size;
width: 20px;
height: 100px;
background: yellow;

4
layout/reftests/flexbox/flexbox-position-fixed-2.xhtml
View File

@ -29,13 +29,13 @@
display: flex;
}
div.a {
flex: 1 0 auto;
flex: 1 0 main-size;
width: 30px;
height: 100px;
background: lightgreen;
}
div.b {
flex: 2 0 auto;
flex: 2 0 main-size;
width: 20px;
height: 100px;
background: yellow;

2
layout/reftests/flexbox/flexbox-position-fixed-4.xhtml
View File

@ -32,7 +32,7 @@
border: 2px dashed teal;
}
div.a {
flex: 1 0 auto;
flex: 1 0 main-size;
width: 30px;
height: 100px;
background: lightgreen;

16
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-1.xhtml
View File

@ -62,8 +62,8 @@
1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
-->
<div class="flexbox">
<canvas style="width: 33px; flex: 2 auto"/>
<canvas style="width: 13px; flex: 3 auto"/>
<canvas style="width: 33px; flex: 2 main-size"/>
<canvas style="width: 13px; flex: 3 main-size"/>
</div>
<!-- E) Two flex items, getting shrunk by different amounts.
@ -77,24 +77,24 @@
2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
-->
<div class="flexbox">
<canvas style="width: 150px; flex: 1 4 auto"/>
<canvas style="width: 100px; flex: 1 3 auto"/>
<canvas style="width: 150px; flex: 1 4 main-size"/>
<canvas style="width: 100px; flex: 1 3 main-size"/>
</div>
<!-- F) Making sure we don't grow past max-width -->
<!-- Same as (D), except we've added a max-width on the second element.
-->
<div class="flexbox">
<canvas style="width: 33px; flex: 2 auto"/>
<canvas style="width: 13px; max-width: 90px; flex: 3 auto"/>
<canvas style="width: 33px; flex: 2 main-size"/>
<canvas style="width: 13px; max-width: 90px; flex: 3 main-size"/>
</div>
<!-- G) Making sure we grow at least as large as min-width -->
<!-- Same as (C), except we've added a min-width on the second element.
-->
<div class="flexbox">
<canvas style="width: 33px; flex: 2 auto"/>
<canvas style="width: 13px; min-width: 150px; flex: 3 auto"/>
<canvas style="width: 33px; flex: 2 main-size"/>
<canvas style="width: 13px; min-width: 150px; flex: 3 main-size"/>
</div>
</body>

16
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-1.xhtml
View File

@ -64,8 +64,8 @@
1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
-->
<div class="flexbox">
<canvas style="height: 33px; flex: 2 auto"/>
<canvas style="height: 13px; flex: 3 auto"/>
<canvas style="height: 33px; flex: 2 main-size"/>
<canvas style="height: 13px; flex: 3 main-size"/>
</div>
<!-- E) Two flex items, getting shrunk by different amounts.
@ -79,24 +79,24 @@
2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
-->
<div class="flexbox">
<canvas style="height: 150px; flex: 1 4 auto"/>
<canvas style="height: 100px; flex: 1 3 auto"/>
<canvas style="height: 150px; flex: 1 4 main-size"/>
<canvas style="height: 100px; flex: 1 3 main-size"/>
</div>
<!-- F) Making sure we don't grow past max-height -->
<!-- Same as (D), except we've added a max-height on the second element.
-->
<div class="flexbox">
<canvas style="height: 33px; flex: 2 auto"/>
<canvas style="height: 13px; max-height: 90px; flex: 3 auto"/>
<canvas style="height: 33px; flex: 2 main-size"/>
<canvas style="height: 13px; max-height: 90px; flex: 3 main-size"/>
</div>
<!-- G) Making sure we grow at least as large as min-height -->
<!-- Same as (C), except we've added a min-height on the second element.
-->
<div class="flexbox">
<canvas style="height: 33px; flex: 2 auto"/>
<canvas style="height: 13px; min-height: 150px; flex: 3 auto"/>
<canvas style="height: 33px; flex: 2 main-size"/>
<canvas style="height: 13px; min-height: 150px; flex: 3 main-size"/>
</div>
</body>

16
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-horiz-1.xhtml
View File

@ -66,8 +66,8 @@
1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
-->
<div class="flexbox">
<fieldset style="width: 33px; flex: 2 auto"/>
<fieldset style="width: 13px; flex: 3 auto"/>
<fieldset style="width: 33px; flex: 2 main-size"/>
<fieldset style="width: 13px; flex: 3 main-size"/>
</div>
<!-- E) Two flex items, getting shrunk by different amounts.
@ -81,24 +81,24 @@
2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
-->
<div class="flexbox">
<fieldset style="width: 150px; flex: 1 4 auto"/>
<fieldset style="width: 100px; flex: 1 3 auto"/>
<fieldset style="width: 150px; flex: 1 4 main-size"/>
<fieldset style="width: 100px; flex: 1 3 main-size"/>
</div>
<!-- F) Making sure we don't grow past max-width -->
<!-- Same as (D), except we've added a max-width on the second element.
-->
<div class="flexbox">
<fieldset style="width: 33px; flex: 2 auto"/>
<fieldset style="width: 13px; max-width: 90px; flex: 3 auto"/>
<fieldset style="width: 33px; flex: 2 main-size"/>
<fieldset style="width: 13px; max-width: 90px; flex: 3 main-size"/>
</div>
<!-- G) Making sure we grow at least as large as min-width -->
<!-- Same as (C), except we've added a min-width on the second element.
-->
<div class="flexbox">
<fieldset style="width: 33px; flex: 2 auto"/>
<fieldset style="width: 13px; min-width: 150px; flex: 3 auto"/>
<fieldset style="width: 33px; flex: 2 main-size"/>
<fieldset style="width: 13px; min-width: 150px; flex: 3 main-size"/>
</div>
</body>

16
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-vert-1.xhtml
View File

@ -68,8 +68,8 @@
1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
-->
<div class="flexbox">
<fieldset style="height: 33px; flex: 2 auto"/>
<fieldset style="height: 13px; flex: 3 auto"/>
<fieldset style="height: 33px; flex: 2 main-size"/>
<fieldset style="height: 13px; flex: 3 main-size"/>
</div>
<!-- E) Two flex items, getting shrunk by different amounts.
@ -83,24 +83,24 @@
2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
-->
<div class="flexbox">
<fieldset style="height: 150px; flex: 1 4 auto"/>
<fieldset style="height: 100px; flex: 1 3 auto"/>
<fieldset style="height: 150px; flex: 1 4 main-size"/>
<fieldset style="height: 100px; flex: 1 3 main-size"/>
</div>
<!-- F) Making sure we don't grow past max-height -->
<!-- Same as (D), except we've added a max-height on the second element.
-->
<div class="flexbox">
<fieldset style="height: 33px; flex: 2 auto"/>
<fieldset style="height: 13px; max-height: 90px; flex: 3 auto"/>
<fieldset style="height: 33px; flex: 2 main-size"/>
<fieldset style="height: 13px; max-height: 90px; flex: 3 main-size"/>
</div>
<!-- G) Making sure we grow at least as large as min-height -->
<!-- Same as (C), except we've added a min-height on the second element.
-->
<div class="flexbox">
<fieldset style="height: 33px; flex: 2 auto"/>
<fieldset style="height: 13px; min-height: 150px; flex: 3 auto"/>
<fieldset style="height: 33px; flex: 2 main-size"/>
<fieldset style="height: 13px; min-height: 150px; flex: 3 main-size"/>
</div>
</body>

16
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-horiz-1.xhtml
View File

@ -63,8 +63,8 @@
1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
-->
<div class="flexbox">
<iframe style="width: 33px; flex: 2 auto"/>
<iframe style="width: 13px; flex: 3 auto"/>
<iframe style="width: 33px; flex: 2 main-size"/>
<iframe style="width: 13px; flex: 3 main-size"/>
</div>
<!-- E) Two flex items, getting shrunk by different amounts.
@ -78,24 +78,24 @@
2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
-->
<div class="flexbox">
<iframe style="width: 150px; flex: 1 4 auto"/>
<iframe style="width: 100px; flex: 1 3 auto"/>
<iframe style="width: 150px; flex: 1 4 main-size"/>
<iframe style="width: 100px; flex: 1 3 main-size"/>
</div>
<!-- F) Making sure we don't grow past max-width -->
<!-- Same as (D), except we've added a max-width on the second element.
-->
<div class="flexbox">
<iframe style="width: 33px; flex: 2 auto"/>
<iframe style="width: 13px; max-width: 90px; flex: 3 auto"/>
<iframe style="width: 33px; flex: 2 main-size"/>
<iframe style="width: 13px; max-width: 90px; flex: 3 main-size"/>
</div>
<!-- G) Making sure we grow at least as large as min-width -->
<!-- Same as (C), except we've added a min-width on the second element.
-->
<div class="flexbox">
<iframe style="width: 33px; flex: 2 auto"/>
<iframe style="width: 13px; min-width: 150px; flex: 3 auto"/>
<iframe style="width: 33px; flex: 2 main-size"/>
<iframe style="width: 13px; min-width: 150px; flex: 3 main-size"/>
</div>
</body>

16
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-vert-1.xhtml
View File

@ -65,8 +65,8 @@
1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
-->
<div class="flexbox">
<iframe style="height: 33px; flex: 2 auto"/>
<iframe style="height: 13px; flex: 3 auto"/>
<iframe style="height: 33px; flex: 2 main-size"/>
<iframe style="height: 13px; flex: 3 main-size"/>
</div>
<!-- E) Two flex items, getting shrunk by different amounts.
@ -80,24 +80,24 @@
2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
-->
<div class="flexbox">
<iframe style="height: 150px; flex: 1 4 auto"/>
<iframe style="height: 100px; flex: 1 3 auto"/>
<iframe style="height: 150px; flex: 1 4 main-size"/>
<iframe style="height: 100px; flex: 1 3 main-size"/>
</div>
<!-- F) Making sure we don't grow past max-height -->
<!-- Same as (D), except we've added a max-height on the second element.
-->
<div class="flexbox">
<iframe style="height: 33px; flex: 2 auto"/>
<iframe style="height: 13px; max-height: 90px; flex: 3 auto"/>
<iframe style="height: 33px; flex: 2 main-size"/>
<iframe style="height: 13px; max-height: 90px; flex: 3 main-size"/>
</div>
<!-- G) Making sure we grow at least as large as min-height -->
<!-- Same as (C), except we've added a min-height on the second element.
-->
<div class="flexbox">
<iframe style="height: 33px; flex: 2 auto"/>
<iframe style="height: 13px; min-height: 150px; flex: 3 auto"/>
<iframe style="height: 33px; flex: 2 main-size"/>
<iframe style="height: 13px; min-height: 150px; flex: 3 main-size"/>
</div>
</body>

18
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-1.xhtml
View File

@ -62,8 +62,8 @@
1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
-->
<div class="flexbox">
<img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/>
<img src="support/solidblue.png" style="width: 13px; flex: 3 auto"/>
<img src="support/solidblue.png" style="width: 33px; flex: 2 main-size"/>
<img src="support/solidblue.png" style="width: 13px; flex: 3 main-size"/>
</div>
<!-- E) Two flex items, getting shrunk by different amounts.
@ -77,26 +77,28 @@
2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
-->
<div class="flexbox">
<img src="support/solidblue.png" style="width: 150px; flex: 1 4 auto"/>
<img src="support/solidblue.png" style="width: 100px; flex: 1 3 auto"/>
<img src="support/solidblue.png"
style="width: 150px; flex: 1 4 main-size"/>
<img src="support/solidblue.png"
style="width: 100px; flex: 1 3 main-size"/>
</div>
<!-- F) Making sure we don't grow past max-width -->
<!-- Same as (D), except we've added a max-width on the second element.
-->
<div class="flexbox">
<img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/>
<img src="support/solidblue.png" style="width: 33px; flex: 2 main-size"/>
<img src="support/solidblue.png"
style="width: 13px; max-width: 90px; flex: 3 auto"/>
style="width: 13px; max-width: 90px; flex: 3 main-size"/>
</div>
<!-- G) Making sure we grow at least as large as min-width -->
<!-- Same as (C), except we've added a min-width on the second element.
-->
<div class="flexbox">
<img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/>
<img src="support/solidblue.png" style="width: 33px; flex: 2 main-size"/>
<img src="support/solidblue.png"
style="width: 13px; min-width: 150px; flex: 3 auto"/>
style="width: 13px; min-width: 150px; flex: 3 main-size"/>
</div>
</body>

18
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-1.xhtml
View File

@ -64,8 +64,8 @@
1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
-->
<div class="flexbox">
<img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/>
<img src="support/solidblue.png" style="height: 13px; flex: 3 auto"/>
<img src="support/solidblue.png" style="height: 33px; flex: 2 main-size"/>
<img src="support/solidblue.png" style="height: 13px; flex: 3 main-size"/>
</div>
<!-- E) Two flex items, getting shrunk by different amounts.
@ -79,26 +79,28 @@
2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
-->
<div class="flexbox">
<img src="support/solidblue.png" style="height: 150px; flex: 1 4 auto"/>
<img src="support/solidblue.png" style="height: 100px; flex: 1 3 auto"/>
<img src="support/solidblue.png"
style="height: 150px; flex: 1 4 main-size"/>
<img src="support/solidblue.png"
style="height: 100px; flex: 1 3 main-size"/>
</div>
<!-- F) Making sure we don't grow past max-height -->
<!-- Same as (D), except we've added a max-height on the second element.
-->
<div class="flexbox">
<img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/>
<img src="support/solidblue.png" style="height: 33px; flex: 2 main-size"/>
<img src="support/solidblue.png"
style="height: 13px; max-height: 90px; flex: 3 auto"/>
style="height: 13px; max-height: 90px; flex: 3 main-size"/>
</div>
<!-- G) Making sure we grow at least as large as min-height -->
<!-- Same as (C), except we've added a min-height on the second element.
-->
<div class="flexbox">
<img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/>
<img src="support/solidblue.png" style="height: 33px; flex: 2 main-size"/>
<img src="support/solidblue.png"
style="height: 13px; min-height: 150px; flex: 3 auto"/>
style="height: 13px; min-height: 150px; flex: 3 main-size"/>
</div>
</body>

16
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-horiz-1.xhtml
View File

@ -67,8 +67,8 @@
1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
-->
<div class="flexbox">
<textarea style="width: 33px; flex: 2 auto"/>
<textarea style="width: 13px; flex: 3 auto"/>
<textarea style="width: 33px; flex: 2 main-size"/>
<textarea style="width: 13px; flex: 3 main-size"/>
</div>
<!-- E) Two flex items, getting shrunk by different amounts.
@ -82,26 +82,26 @@
2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
-->
<div class="flexbox">
<textarea style="width: 150px; flex: 1 4 auto"/>
<textarea style="width: 100px; flex: 1 3 auto"/>
<textarea style="width: 150px; flex: 1 4 main-size"/>
<textarea style="width: 100px; flex: 1 3 main-size"/>
</div>
<!-- F) Making sure we don't grow past max-width -->
<!-- Same as (D), except we've added a max-width on the second element.
-->
<div class="flexbox">
<textarea style="width: 33px; flex: 2 auto"/>
<textarea style="width: 33px; flex: 2 main-size"/>
<textarea
style="width: 13px; max-width: 90px; flex: 3 auto"/>
style="width: 13px; max-width: 90px; flex: 3 main-size"/>
</div>
<!-- G) Making sure we grow at least as large as min-width -->
<!-- Same as (C), except we've added a min-width on the second element.
-->
<div class="flexbox">
<textarea style="width: 33px; flex: 2 auto"/>
<textarea style="width: 33px; flex: 2 main-size"/>
<textarea
style="width: 13px; min-width: 150px; flex: 3 auto"/>
style="width: 13px; min-width: 150px; flex: 3 main-size"/>
</div>
</body>

16
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-vert-1.xhtml
View File

@ -70,8 +70,8 @@
1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
-->
<div class="flexbox">
<textarea style="height: 33px; flex: 2 auto"/>
<textarea style="height: 13px; flex: 3 auto"/>
<textarea style="height: 33px; flex: 2 main-size"/>
<textarea style="height: 13px; flex: 3 main-size"/>
</div>
<!-- E) Two flex items, getting shrunk by different amounts.
@ -85,26 +85,26 @@
2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
-->
<div class="flexbox">
<textarea style="height: 150px; flex: 1 4 auto"/>
<textarea style="height: 100px; flex: 1 3 auto"/>
<textarea style="height: 150px; flex: 1 4 main-size"/>
<textarea style="height: 100px; flex: 1 3 main-size"/>
</div>
<!-- F) Making sure we don't grow past max-height -->
<!-- Same as (D), except we've added a max-height on the second element.
-->
<div class="flexbox">
<textarea style="height: 33px; flex: 2 auto"/>
<textarea style="height: 33px; flex: 2 main-size"/>
<textarea
style="height: 13px; max-height: 90px; flex: 3 auto"/>
style="height: 13px; max-height: 90px; flex: 3 main-size"/>
</div>
<!-- G) Making sure we grow at least as large as min-height -->
<!-- Same as (C), except we've added a min-height on the second element.
-->
<div class="flexbox">
<textarea style="height: 33px; flex: 2 auto"/>
<textarea style="height: 33px; flex: 2 main-size"/>
<textarea
style="height: 13px; min-height: 150px; flex: 3 auto"/>
style="height: 13px; min-height: 150px; flex: 3 main-size"/>
</div>
</body>

16
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-horiz-1.xhtml
View File

@ -62,8 +62,8 @@
1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
-->
<div class="flexbox">
<video style="width: 33px; flex: 2 auto"/>
<video style="width: 13px; flex: 3 auto"/>
<video style="width: 33px; flex: 2 main-size"/>
<video style="width: 13px; flex: 3 main-size"/>
</div>
<!-- E) Two flex items, getting shrunk by different amounts.
@ -77,24 +77,24 @@
2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
-->
<div class="flexbox">
<video style="width: 150px; flex: 1 4 auto"/>
<video style="width: 100px; flex: 1 3 auto"/>
<video style="width: 150px; flex: 1 4 main-size"/>
<video style="width: 100px; flex: 1 3 main-size"/>
</div>
<!-- F) Making sure we don't grow past max-width -->
<!-- Same as (D), except we've added a max-width on the second element.
-->
<div class="flexbox">
<video style="width: 33px; flex: 2 auto"/>
<video style="width: 13px; max-width: 90px; flex: 3 auto"/>
<video style="width: 33px; flex: 2 main-size"/>
<video style="width: 13px; max-width: 90px; flex: 3 main-size"/>
</div>
<!-- G) Making sure we grow at least as large as min-width -->
<!-- Same as (C), except we've added a min-width on the second element.
-->
<div class="flexbox">
<video style="width: 33px; flex: 2 auto"/>
<video style="width: 13px; min-width: 150px; flex: 3 auto"/>
<video style="width: 33px; flex: 2 main-size"/>
<video style="width: 13px; min-width: 150px; flex: 3 main-size"/>
</div>
</body>

16
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-vert-1.xhtml
View File

@ -64,8 +64,8 @@
1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
-->
<div class="flexbox">
<video style="height: 33px; flex: 2 auto"/>
<video style="height: 13px; flex: 3 auto"/>
<video style="height: 33px; flex: 2 main-size"/>
<video style="height: 13px; flex: 3 main-size"/>
</div>
<!-- E) Two flex items, getting shrunk by different amounts.
@ -79,24 +79,24 @@
2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
-->
<div class="flexbox">
<video style="height: 150px; flex: 1 4 auto"/>
<video style="height: 100px; flex: 1 3 auto"/>
<video style="height: 150px; flex: 1 4 main-size"/>
<video style="height: 100px; flex: 1 3 main-size"/>
</div>
<!-- F) Making sure we don't grow past max-height -->
<!-- Same as (D), except we've added a max-height on the second element.
-->
<div class="flexbox">
<video style="height: 33px; flex: 2 auto"/>
<video style="height: 13px; max-height: 90px; flex: 3 auto"/>
<video style="height: 33px; flex: 2 main-size"/>
<video style="height: 13px; max-height: 90px; flex: 3 main-size"/>
</div>
<!-- G) Making sure we grow at least as large as min-height -->
<!-- Same as (C), except we've added a min-height on the second element.
-->
<div class="flexbox">
<video style="height: 33px; flex: 2 auto"/>
<video style="height: 13px; min-height: 150px; flex: 3 auto"/>
<video style="height: 33px; flex: 2 main-size"/>
<video style="height: 13px; min-height: 150px; flex: 3 main-size"/>
</div>
</body>

2
layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-1-ref.html
View File

@ -30,7 +30,7 @@
height: 20px;
}
.flexible {
flex: 1 auto;
flex: 1 main-size;
}
.heightTall {
height: 40px;

2
layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-1.html
View File

@ -26,7 +26,7 @@
visibility: collapse;
}
.flexible {
flex: 1 auto;
flex: 1 main-size;
}
.heightTall {
height: 40px;

1
layout/style/nsCSSKeywordList.h
View File

@ -338,6 +338,7 @@ CSS_KEY(lowercase, lowercase)
CSS_KEY(ltr, ltr)
CSS_KEY(luminance, luminance)
CSS_KEY(luminosity, luminosity)
CSS_KEY(main-size, main_size)
CSS_KEY(manipulation, manipulation)
CSS_KEY(manual, manual)
CSS_KEY(margin-box, margin_box)

14
layout/style/nsCSSParser.cpp
View File

@ -7407,11 +7407,12 @@ CSSParserImpl::ParseFlex()
return true;
}
// Next, check for 'none' == '0 0 auto'
// Next, check for 'none' == '0 0 main-size'
if (ParseVariant(tmpVal, VARIANT_NONE, nullptr)) {
AppendValue(eCSSProperty_flex_grow, nsCSSValue(0.0f, eCSSUnit_Number));
AppendValue(eCSSProperty_flex_shrink, nsCSSValue(0.0f, eCSSUnit_Number));
AppendValue(eCSSProperty_flex_basis, nsCSSValue(eCSSUnit_Auto));
AppendValue(eCSSProperty_flex_basis,
nsCSSValue(NS_STYLE_FLEX_BASIS_MAIN_SIZE, eCSSUnit_Enumerated));
return true;
}
@ -7469,6 +7470,15 @@ CSSParserImpl::ParseFlex()
// Failed to parse anything after our flex-basis -- that's fine. We can
// skip the remaining parsing.
doneParsing = true;
if (flexBasis.GetUnit() == eCSSUnit_Auto) {
// We've just parsed "flex:auto", without a number after "auto". In
// this case, "auto" is *not* actually the flex-basis -- it's a special
// keyword for the "flex" shorthand, which expands to "1 1 main-size".
// Fortunately, the variables flexGrow & flexShrink are already set to
// 1, so we don't need to adjust them; we just need to set flexBasis.
flexBasis.SetIntValue(NS_STYLE_FLEX_BASIS_MAIN_SIZE,
eCSSUnit_Enumerated);
}
}
}

1
layout/style/nsCSSProps.cpp
View File

@ -1130,6 +1130,7 @@ const KTableValue nsCSSProps::kFlexBasisKTable[] = {
eCSSKeyword__moz_min_content, NS_STYLE_WIDTH_MIN_CONTENT,
eCSSKeyword__moz_fit_content, NS_STYLE_WIDTH_FIT_CONTENT,
eCSSKeyword__moz_available, NS_STYLE_WIDTH_AVAILABLE,
eCSSKeyword_main_size, NS_STYLE_FLEX_BASIS_MAIN_SIZE,
eCSSKeyword_UNKNOWN,-1
};

16
layout/style/nsRuleNode.cpp
View File

@ -7561,10 +7561,18 @@ nsRuleNode::ComputePositionData(void* aStartStruct,
// flex-basis: auto, length, percent, enum, calc, inherit, initial
// (Note: The flags here should match those used for 'width' property above.)
SetCoord(*aRuleData->ValueForFlexBasis(), pos->mFlexBasis, parentPos->mFlexBasis,
SETCOORD_LPAEH | SETCOORD_INITIAL_AUTO | SETCOORD_STORE_CALC |
SETCOORD_UNSET_INITIAL,
aContext, mPresContext, canStoreInRuleTree);
const nsCSSValue* flexBasisValue = aRuleData->ValueForFlexBasis();
if (!SetCoord(*flexBasisValue,
pos->mFlexBasis, parentPos->mFlexBasis,
SETCOORD_LPAEH | SETCOORD_STORE_CALC,
aContext, mPresContext, canStoreInRuleTree)) {
if (eCSSUnit_Initial == flexBasisValue->GetUnit() ||
eCSSUnit_Unset == flexBasisValue->GetUnit()) {
// flex-basis initial value is "main-size"
pos->mFlexBasis.SetIntValue(NS_STYLE_FLEX_BASIS_MAIN_SIZE,
eStyleUnit_Enumerated);
}
}
// flex-direction: enum, inherit, initial
SetDiscrete(*aRuleData->ValueForFlexDirection(),

6
layout/style/nsStyleConsts.h
View File

@ -597,6 +597,12 @@ static inline mozilla::css::Side operator++(mozilla::css::Side& side, int) {
#define NS_STYLE_WIDTH_MIN_CONTENT 1
#define NS_STYLE_WIDTH_FIT_CONTENT 2
#define NS_STYLE_WIDTH_AVAILABLE 3
// NOTE: The "main-size" keyword here is really for the "flex-basis" property,
// not for width / min-width / max-width. I'm listing it here with the "width"
// keywords' enumerated values, because we need to make sure it doesn't collide
// with any "width" enumerated values (because "flex-basis" accepts all valid
// "width" keywords, in addition to accepting "main-size").
#define NS_STYLE_FLEX_BASIS_MAIN_SIZE 4
// See nsStyleDisplay.mPosition
#define NS_STYLE_POSITION_STATIC 0

2
layout/style/nsStyleStruct.cpp
View File

@ -1236,7 +1236,7 @@ nsStylePosition::nsStylePosition(void)
mHeight.SetAutoValue();
mMinHeight.SetAutoValue();
mMaxHeight.SetNoneValue();
mFlexBasis.SetAutoValue();
mFlexBasis.SetIntValue(NS_STYLE_FLEX_BASIS_MAIN_SIZE, eStyleUnit_Enumerated);
// The initial value of grid-auto-columns and grid-auto-rows is 'auto',
// which computes to 'minmax(min-content, max-content)'.

23
layout/style/nsStyleUtil.cpp
View File

@ -541,6 +541,29 @@ nsStyleUtil::IsSignificantChild(nsIContent* aChild, bool aTextIsSignificant,
!aChild->TextIsOnlyWhitespace());
}
/* static */ bool
nsStyleUtil::IsFlexBasisMainSize(const nsStyleCoord& aFlexBasis,
bool aIsMainAxisHorizontal)
{
// "main-size" is stored as an enumerated value; so if we're not enumerated,
// we're not "main-size".
if (aFlexBasis.GetUnit() != eStyleUnit_Enumerated) {
return false;
}
if (!aIsMainAxisHorizontal) {
// Special case for vertical flex items: We don't support any enumerated
// values (e.g. "-moz-max-content") for "height"-flavored properties
// yet. So, if our computed flex-basis is *any* enumerated value, we'll
// just behave as if it were "main-size" (the initial value of flex-basis).
// NOTE: Once we support intrinsic sizing keywords for "height",
// we can remove this special-case.
return true;
}
return aFlexBasis.GetIntValue() == NS_STYLE_FLEX_BASIS_MAIN_SIZE;
}
/* static */ bool
nsStyleUtil::CSPAllowsInlineStyle(nsIContent* aContent,
nsIPrincipal* aPrincipal,

17
layout/style/nsStyleUtil.h
View File

@ -110,6 +110,23 @@ public:
static bool IsSignificantChild(nsIContent* aChild,
bool aTextIsSignificant,
bool aWhitespaceIsSignificant);
/*
* Should we treat the given "flex-basis" value as "main-size"?
*
* In a horizontal flex container, this is merely a check for whether
* aFlexBasis has the enumerated value NS_STYLE_FLEX_BASIS_MAIN_SIZE.
*
* In a vertical flex container, we *also* treat other enumerated
* values (like "NS_STYLE_WIDTH_MAX_CONTENT") as if they were "main-size"
* (and return true from this function), because we don't currently support
* those other values for vertical/height-flavored properties. So, if we
* encounter them, we fall back to behaving as if we had flex-basis's initial
* value.
*/
static bool IsFlexBasisMainSize(const nsStyleCoord& aFlexBasis,
bool aIsMainAxisHorizontal);
/*
* Does this principal have a CSP that blocks the application of
* inline styles? Returns false if application of the style should

5
layout/style/test/flexbox_layout_testcases.js
View File

@ -479,7 +479,8 @@ var gFlexboxTestcases =
]
},
// Trying "flex: auto" (== "1 1 auto") w/ a mix of flex-grow/flex-basis values
// Trying "flex: auto" (== "1 1 main-size") on one flex item, w/ a mix of
// flex-grow/flex-basis values on the other flex items.
{
items:
[
@ -710,7 +711,7 @@ var gFlexboxTestcases =
"_main-size": [ null, "20px" ]
},
{
"flex": "9 auto",
"flex": "9 main-size",
"_min-main-size": "150px",
"_main-size": [ "50px", "180px" ]
},

13
layout/style/test/property_database.js
View File

@ -3802,13 +3802,18 @@ var gCSSProperties = {
"flex-shrink",
"flex-basis"
],
initial_values: [ "0 1 auto", "auto 0 1", "0 auto", "auto 0" ],
initial_values: [ "0 1 main-size", "main-size 0 1", "0 main-size", "main-size 0" ],
other_values: [
"none",
"auto",
"1",
"0",
"0 1",
"0.5",
"5px",
"15%",
"calc(5px)",
"main-size",
"1.2 3.4",
"0 0 0",
"0 0 0px",
@ -3837,13 +3842,15 @@ var gCSSProperties = {
domProp: "flexBasis",
inherited: false,
type: CSS_TYPE_LONGHAND,
initial_values: [ " auto" ],
initial_values: [ "main-size" ],
// NOTE: This is cribbed directly from the "width" chunk, since this
// property takes the exact same values as width (albeit with
// different semantics on 'auto').
// XXXdholbert (Maybe these should get separated out into
// a reusable array defined at the top of this file?)
other_values: [ "15px", "3em", "15%", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available",
other_values: [
"auto",
"15px", "3em", "15%", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available",
// valid calc() values
"calc(-2px)",
"calc(2px)",

30
layout/style/test/test_flexbox_flex_shorthand.html
View File

@ -68,22 +68,31 @@ let gFlexShorthandTestcases = [
"flex": "",
"flex-grow": "0",
"flex-shrink": "1",
"flex-basis": "auto",
"flex-basis": "main-size",
},
{
"flex": "initial",
"flex-grow": "0",
"flex-shrink": "1",
"flex-basis": "auto",
"flex-basis": "main-size",
},
// Special keyword "none" --> "0 0 auto"
// Special keyword "none" --> "0 0 main-size"
// -------------------------------------
{
"flex": "none",
"flex-grow": "0",
"flex-shrink": "0",
"flex-basis": "auto",
"flex-basis": "main-size",
},
// Special keyword "auto" --> "1 1 main-size"
// -------------------------------------
{
"flex": "auto",
"flex-grow": "1",
"flex-shrink": "1",
"flex-basis": "main-size",
},
// One Value (numeric) --> sets flex-grow
@ -127,10 +136,6 @@ let gFlexShorthandTestcases = [
"flex": "5%",
"flex-basis": "5%",
},
{
"flex": "auto",
"flex-basis": "auto",
},
{
"flex": "-moz-fit-content",
"flex-basis": "-moz-fit-content",
@ -143,6 +148,10 @@ let gFlexShorthandTestcases = [
"flex": "calc(15% + 30px)",
"flex-basis": "calc(30px + 15%)",
},
{
"flex": "main-size",
"flex-basis": "main-size",
},
// Two Values (numeric) --> sets flex-grow, flex-shrink
// ----------------------------------------------------
@ -204,6 +213,11 @@ let gFlexShorthandTestcases = [
"flex-grow": "5",
"flex-basis": "auto",
},
{
"flex": "main-size 5",
"flex-grow": "5",
"flex-basis": "main-size",
},
{
"flex": "5 -moz-fit-content",
"flex-grow": "5",

2
mobile/android/themes/core/aboutReader.css
View File

@ -430,7 +430,7 @@ body {
#font-type-buttons > li,
.segmented-button > li {
width: 50px; /* combined with flex, this acts as a minimum width */
flex: 1 0 auto;
flex: 1 0 main-size;
text-align: center;
line-height: 20px;
}

10
mobile/android/themes/core/config.css
View File

@ -57,7 +57,7 @@ body {
min-width: 0;
color: #000000;
opacity: 1;
flex: 1 1 auto;
flex: 1 1 main-size;
}
#filter-input:-moz-placeholder {
@ -193,7 +193,7 @@ li {
.pref-value {
color: rgba(0,0,0,0.5);
flex: 1 1 auto;
flex: 1 1 main-size;
border: none;
-moz-appearance: none;
background-image: none;
@ -227,13 +227,13 @@ li {
}
#new-pref-value-boolean {
flex: 1 1 auto;
flex: 1 1 main-size;
}
#new-pref-container .pref-button.toggle {
display: inline-block;
opacity: 1;
flex: 0 1 auto;
flex: 0 1 main-size;
float: right;
}
@ -241,7 +241,7 @@ li {
#new-pref-container .pref-button.create {
display: inline-block;
opacity: 1;
flex: 1 1 auto;
flex: 1 1 main-size;
}
.pref-item-line {