зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1297774 - Implement safe/unsafe for flexbox 'justify-content' and 'align-{content,self,items}' r=dholbert
MozReview-Commit-ID: BHpaSvj5EOW --HG-- extra : rebase_source : b8b9326fb6f439418471b3e972b80ba78efd43ca
This commit is contained in:
Mihir Iyer
Родитель
0a7333067e
Коммит
60111bbc33
|
|
@ -584,7 +584,8 @@ public:
|
|||
|
||||
|
||||
WritingMode GetWritingMode() const { return mWM; }
|
||||
uint8_t GetAlignSelf() const { return mAlignSelf; }
|
||||
uint8_t GetAlignSelf() const { return mAlignSelf; }
|
||||
uint8_t GetAlignSelfFlags() const { return mAlignSelfFlags; }
|
||||
|
||||
// Returns the flex factor (flex-grow or flex-shrink), depending on
|
||||
// 'aIsUsingFlexGrow'.
|
||||
|
|
@ -878,6 +879,7 @@ protected:
|
|||
uint8_t mAlignSelf; // My "align-self" computed value (with "auto"
|
||||
// swapped out for parent"s "align-items" value,
|
||||
// in our constructor).
|
||||
uint8_t mAlignSelfFlags; // Flags for 'align-self' (safe/unsafe/legacy)
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -1941,7 +1943,8 @@ FlexItem::FlexItem(ReflowInput& aFlexItemReflowInput,
|
|||
mAlignSelf = NS_STYLE_ALIGN_STRETCH;
|
||||
}
|
||||
|
||||
// XXX strip off the <overflow-position> bit until we implement that
|
||||
// Store and strip off the <overflow-position> bits
|
||||
mAlignSelfFlags = mAlignSelf & NS_STYLE_ALIGN_FLAG_BITS;
|
||||
mAlignSelf &= ~NS_STYLE_ALIGN_FLAG_BITS;
|
||||
}
|
||||
|
||||
|
|
@ -2923,6 +2926,10 @@ MainAxisPositionTracker::
|
|||
mNumPackingSpacesRemaining(0),
|
||||
mJustifyContent(aJustifyContent)
|
||||
{
|
||||
// Extract the flag portion of mJustifyContent and strip off the flag bits
|
||||
uint8_t justifyContentFlags = mJustifyContent & NS_STYLE_JUSTIFY_FLAG_BITS;
|
||||
mJustifyContent &= ~NS_STYLE_JUSTIFY_FLAG_BITS;
|
||||
|
||||
// 'normal' behaves as 'stretch', and 'stretch' behaves as 'flex-start',
|
||||
// in the main axis
|
||||
// https://drafts.csswg.org/css-align-3/#propdef-justify-content
|
||||
|
|
@ -2931,9 +2938,6 @@ MainAxisPositionTracker::
|
|||
mJustifyContent = NS_STYLE_JUSTIFY_FLEX_START;
|
||||
}
|
||||
|
||||
// XXX strip off the <overflow-position> bit until we implement that
|
||||
mJustifyContent &= ~NS_STYLE_JUSTIFY_FLAG_BITS;
|
||||
|
||||
// mPackingSpaceRemaining is initialized to the container's main size. Now
|
||||
// we'll subtract out the main sizes of our flex items, so that it ends up
|
||||
// with the *actual* amount of packing space.
|
||||
|
|
@ -2949,6 +2953,11 @@ MainAxisPositionTracker::
|
|||
if (mPackingSpaceRemaining <= 0) {
|
||||
// No available packing space to use for resolving auto margins.
|
||||
mNumAutoMarginsInMainAxis = 0;
|
||||
// If packing space is negative and <overflow-position> is set to 'safe'
|
||||
// all justify options fall back to 'start'
|
||||
if (justifyContentFlags & NS_STYLE_JUSTIFY_SAFE) {
|
||||
mJustifyContent = NS_STYLE_JUSTIFY_START;
|
||||
}
|
||||
}
|
||||
|
||||
// If packing space is negative or we only have one item, 'space-between'
|
||||
|
|
@ -3104,14 +3113,15 @@ CrossAxisPositionTracker::
|
|||
{
|
||||
MOZ_ASSERT(aFirstLine, "null first line pointer");
|
||||
|
||||
// Extract and strip the flag bits from alignContent
|
||||
uint8_t alignContentFlags = mAlignContent & NS_STYLE_ALIGN_FLAG_BITS;
|
||||
mAlignContent &= ~NS_STYLE_ALIGN_FLAG_BITS;
|
||||
|
||||
// 'normal' behaves as 'stretch'
|
||||
if (mAlignContent == NS_STYLE_ALIGN_NORMAL) {
|
||||
mAlignContent = NS_STYLE_ALIGN_STRETCH;
|
||||
}
|
||||
|
||||
// XXX strip of the <overflow-position> bit until we implement that
|
||||
mAlignContent &= ~NS_STYLE_ALIGN_FLAG_BITS;
|
||||
|
||||
const bool isSingleLine =
|
||||
NS_STYLE_FLEX_WRAP_NOWRAP == aReflowInput.mStylePosition->mFlexWrap;
|
||||
if (isSingleLine) {
|
||||
|
|
@ -3158,6 +3168,13 @@ CrossAxisPositionTracker::
|
|||
"GenerateFlexLines should've produced at least 1 line");
|
||||
mPackingSpaceRemaining -= aCrossGapSize * (numLines - 1);
|
||||
|
||||
// If <overflow-position> is 'safe' and packing space is negative
|
||||
// all align options fall back to 'start'
|
||||
if ((alignContentFlags & NS_STYLE_ALIGN_SAFE) &&
|
||||
mPackingSpaceRemaining < 0) {
|
||||
mAlignContent = NS_STYLE_ALIGN_START;
|
||||
}
|
||||
|
||||
// If packing space is negative, 'space-between' and 'stretch' behave like
|
||||
// 'flex-start', and 'space-around' and 'space-evenly' behave like 'center'.
|
||||
// In those cases, it's simplest to just pretend we have a different
|
||||
|
|
@ -3516,6 +3533,14 @@ SingleLineCrossAxisPositionTracker::
|
|||
}
|
||||
}
|
||||
|
||||
// 'align-self' falls back to 'flex-start' if it is 'center'/'flex-end' and we
|
||||
// have cross axis overflow
|
||||
// XXX we should really be falling back to 'start' as of bug 1472843
|
||||
if (aLine.GetLineCrossSize() < aItem.GetOuterCrossSize(mAxis) &&
|
||||
(aItem.GetAlignSelfFlags() & NS_STYLE_ALIGN_SAFE)) {
|
||||
alignSelf = NS_STYLE_ALIGN_FLEX_START;
|
||||
}
|
||||
|
||||
switch (alignSelf) {
|
||||
case NS_STYLE_ALIGN_SELF_START:
|
||||
case NS_STYLE_ALIGN_SELF_END:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference: Testing safe overflow-position for align-content, justify-content, and align-items in flex containers</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
width: 85px;
|
||||
height: 65px;
|
||||
border: 1px solid black;
|
||||
align-content: flex-end;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
float: left;
|
||||
clear: both;
|
||||
margin-top: 100px;
|
||||
}
|
||||
.rowNoWrap {
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
.columnNoWrap {
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
.item {
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.bigItem {
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
width: 28px;
|
||||
height: 90px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.alignContentStart {
|
||||
align-content: start;
|
||||
}
|
||||
.justifyContentStart {
|
||||
justify-content: start;
|
||||
}
|
||||
.alignSelfStart {
|
||||
align-self: start;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex rowNoWrap justifyContentStart">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="bigItem alignSelfStart"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flex columnNoWrap alignContentStart">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing safe overflow-position for align-content, justify-content, and align-items in flex containers</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values">
|
||||
<link rel="match" href="flexbox-safe-overflow-position-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
width: 85px;
|
||||
height: 65px;
|
||||
border: 1px solid black;
|
||||
align-content: safe flex-end;
|
||||
justify-content: safe center;
|
||||
align-items: safe center;
|
||||
float: left;
|
||||
clear: both;
|
||||
margin-top: 100px;
|
||||
}
|
||||
.rowNoWrap {
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
.columnNoWrap {
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
.item {
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.bigItem {
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
width: 28px;
|
||||
height: 90px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex rowNoWrap">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="bigItem"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flex columnNoWrap">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -214,6 +214,9 @@ fails == flexbox-min-height-auto-002b.html flexbox-min-height-auto-002-ref.html
|
|||
== flexbox-root-node-001a.html flexbox-root-node-001-ref.html
|
||||
== flexbox-root-node-001b.html flexbox-root-node-001-ref.html
|
||||
|
||||
# Tests for <overflow-position> "safe" keyword in CSS Alignment properties
|
||||
== flexbox-safe-overflow-position-001.html flexbox-safe-overflow-position-001-ref.html
|
||||
|
||||
# Tests for sizing of flex containers, e.g. under min/max size constraints
|
||||
== flexbox-sizing-horiz-001.xhtml flexbox-sizing-horiz-001-ref.xhtml
|
||||
== flexbox-sizing-horiz-002.xhtml flexbox-sizing-horiz-002-ref.xhtml
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче