зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1472843 - Implement justify-content:left/right/start/end, align-content:start/end, align-self:self-start/self-end for flexbox. r=dholbert
This commit also removes some cases & warnings about unsupported values that have now been removed from the css alignment spec. Specifically: "justify-content:[last] baseline" and "align-self/align-content: left/right". --HG-- rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml => layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-wmvert-001-ref.xhtml rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001a.xhtml => layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-wmvert-001.xhtml rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002-ref.xhtml => layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-005-ref.xhtml rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002.xhtml => layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-005.xhtml rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005-ref.xhtml => layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-006-ref.xhtml rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005.xhtml => layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-006.xhtml rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml => layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-006-ref.xhtml rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml => layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-006.xhtml rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml => layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-wmvert-001-ref.xhtml rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml => layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-wmvert-001.xhtml extra : amend_source : 93cd04450f573fcfa11f3400ffd0ecb4cb3e6d90
This commit is contained in:
Mihir Iyer
Родитель
0c3ff8d3f1
Коммит
299e679ae7
|
|
@ -2932,6 +2932,8 @@ MainAxisPositionTracker::
|
|||
mJustifyContent(aJustifyContent)
|
||||
{
|
||||
// Extract the flag portion of mJustifyContent and strip off the flag bits
|
||||
// NOTE: This must happen before any assignment to mJustifyContent to
|
||||
// avoid overwriting the flag bits.
|
||||
uint8_t justifyContentFlags = mJustifyContent & NS_STYLE_JUSTIFY_FLAG_BITS;
|
||||
mJustifyContent &= ~NS_STYLE_JUSTIFY_FLAG_BITS;
|
||||
|
||||
|
|
@ -2978,6 +2980,24 @@ MainAxisPositionTracker::
|
|||
}
|
||||
}
|
||||
|
||||
// If our main axis is (internally) reversed, swap the justify-content
|
||||
// "flex-start" and "flex-end" behaviors:
|
||||
// NOTE: This must happen ...
|
||||
// - *after* value-simplification for values that are dependent on our
|
||||
// flex-axis reversedness; e.g. for "space-between" which specifically
|
||||
// behaves like "flex-start" in some cases (per spec), and hence depends on
|
||||
// the reversedness of flex axes.
|
||||
// - *before* value simplification for values that don't care about
|
||||
// flex-relative axis direction; e.g. for "start" which purely depends on
|
||||
// writing-mode and isn't affected by reversedness of flex axes.
|
||||
if (aAxisTracker.AreAxesInternallyReversed()) {
|
||||
if (mJustifyContent == NS_STYLE_JUSTIFY_FLEX_START) {
|
||||
mJustifyContent = NS_STYLE_JUSTIFY_FLEX_END;
|
||||
} else if (mJustifyContent == NS_STYLE_JUSTIFY_FLEX_END) {
|
||||
mJustifyContent = NS_STYLE_JUSTIFY_FLEX_START;
|
||||
}
|
||||
}
|
||||
|
||||
// Map 'left'/'right' to 'start'/'end'
|
||||
if (mJustifyContent == NS_STYLE_JUSTIFY_LEFT ||
|
||||
mJustifyContent == NS_STYLE_JUSTIFY_RIGHT) {
|
||||
|
|
@ -2997,19 +3017,13 @@ MainAxisPositionTracker::
|
|||
|
||||
// Map 'start'/'end' to 'flex-start'/'flex-end'.
|
||||
if (mJustifyContent == NS_STYLE_JUSTIFY_START) {
|
||||
mJustifyContent = NS_STYLE_JUSTIFY_FLEX_START;
|
||||
mJustifyContent = aAxisTracker.IsMainAxisReversed()
|
||||
? NS_STYLE_JUSTIFY_FLEX_END
|
||||
: NS_STYLE_JUSTIFY_FLEX_START;
|
||||
} else if (mJustifyContent == NS_STYLE_JUSTIFY_END) {
|
||||
mJustifyContent = NS_STYLE_JUSTIFY_FLEX_END;
|
||||
}
|
||||
|
||||
// If our main axis is (internally) reversed, swap the justify-content
|
||||
// "flex-start" and "flex-end" behaviors:
|
||||
if (aAxisTracker.AreAxesInternallyReversed()) {
|
||||
if (mJustifyContent == NS_STYLE_JUSTIFY_FLEX_START) {
|
||||
mJustifyContent = NS_STYLE_JUSTIFY_FLEX_END;
|
||||
} else if (mJustifyContent == NS_STYLE_JUSTIFY_FLEX_END) {
|
||||
mJustifyContent = NS_STYLE_JUSTIFY_FLEX_START;
|
||||
}
|
||||
mJustifyContent = aAxisTracker.IsMainAxisReversed()
|
||||
? NS_STYLE_JUSTIFY_FLEX_START
|
||||
: NS_STYLE_JUSTIFY_FLEX_END;
|
||||
}
|
||||
|
||||
// Figure out how much space we'll set aside for auto margins or
|
||||
|
|
@ -3018,10 +3032,6 @@ MainAxisPositionTracker::
|
|||
mPackingSpaceRemaining != 0 &&
|
||||
!aLine->IsEmpty()) {
|
||||
switch (mJustifyContent) {
|
||||
case NS_STYLE_JUSTIFY_BASELINE:
|
||||
case NS_STYLE_JUSTIFY_LAST_BASELINE:
|
||||
NS_WARNING("NYI: justify-content:left/right/baseline/last baseline");
|
||||
MOZ_FALLTHROUGH;
|
||||
case NS_STYLE_JUSTIFY_FLEX_START:
|
||||
// All packing space should go at the end --> nothing to do here.
|
||||
break;
|
||||
|
|
@ -3197,32 +3207,10 @@ CrossAxisPositionTracker::
|
|||
}
|
||||
}
|
||||
|
||||
// Map 'left'/'right' to 'start'/'end'
|
||||
if (mAlignContent == NS_STYLE_ALIGN_LEFT ||
|
||||
mAlignContent == NS_STYLE_ALIGN_RIGHT) {
|
||||
if (aAxisTracker.IsRowOriented()) {
|
||||
// Container's alignment axis is not parallel to the inline axis,
|
||||
// so we map both 'left' and 'right' to 'start'.
|
||||
mAlignContent = NS_STYLE_ALIGN_START;
|
||||
} else {
|
||||
// Column-oriented, so we map 'left' and 'right' to 'start' or 'end',
|
||||
// depending on left-to-right writing mode.
|
||||
const bool isLTR = aAxisTracker.GetWritingMode().IsBidiLTR();
|
||||
const bool isAlignLeft = (mAlignContent == NS_STYLE_ALIGN_LEFT);
|
||||
mAlignContent = (isAlignLeft == isLTR) ? NS_STYLE_ALIGN_START
|
||||
: NS_STYLE_ALIGN_END;
|
||||
}
|
||||
}
|
||||
|
||||
// Map 'start'/'end' to 'flex-start'/'flex-end'.
|
||||
if (mAlignContent == NS_STYLE_ALIGN_START) {
|
||||
mAlignContent = NS_STYLE_ALIGN_FLEX_START;
|
||||
} else if (mAlignContent == NS_STYLE_ALIGN_END) {
|
||||
mAlignContent = NS_STYLE_ALIGN_FLEX_END;
|
||||
}
|
||||
|
||||
// If our cross axis is (internally) reversed, swap the align-content
|
||||
// "flex-start" and "flex-end" behaviors:
|
||||
// NOTE: It matters precisely when we do this; see comment alongside
|
||||
// MainAxisPositionTracker's AreAxesInternallyReversed check.
|
||||
if (aAxisTracker.AreAxesInternallyReversed()) {
|
||||
if (mAlignContent == NS_STYLE_ALIGN_FLEX_START) {
|
||||
mAlignContent = NS_STYLE_ALIGN_FLEX_END;
|
||||
|
|
@ -3231,12 +3219,21 @@ CrossAxisPositionTracker::
|
|||
}
|
||||
}
|
||||
|
||||
// Map 'start'/'end' to 'flex-start'/'flex-end'.
|
||||
if (mAlignContent == NS_STYLE_ALIGN_START) {
|
||||
mAlignContent = aAxisTracker.IsCrossAxisReversed()
|
||||
? NS_STYLE_ALIGN_FLEX_END
|
||||
: NS_STYLE_ALIGN_FLEX_START;
|
||||
} else if (mAlignContent == NS_STYLE_ALIGN_END) {
|
||||
mAlignContent = aAxisTracker.IsCrossAxisReversed()
|
||||
? NS_STYLE_ALIGN_FLEX_START
|
||||
: NS_STYLE_ALIGN_FLEX_END;
|
||||
}
|
||||
|
||||
// Figure out how much space we'll set aside for packing spaces, and advance
|
||||
// past any leading packing-space.
|
||||
if (mPackingSpaceRemaining != 0) {
|
||||
switch (mAlignContent) {
|
||||
case NS_STYLE_ALIGN_SELF_START:
|
||||
case NS_STYLE_ALIGN_SELF_END:
|
||||
case NS_STYLE_ALIGN_BASELINE:
|
||||
case NS_STYLE_ALIGN_LAST_BASELINE:
|
||||
NS_WARNING("NYI: align-items/align-self:left/right/self-start/self-end/baseline/last baseline");
|
||||
|
|
@ -3505,29 +3502,6 @@ SingleLineCrossAxisPositionTracker::
|
|||
alignSelf = NS_STYLE_ALIGN_FLEX_START;
|
||||
}
|
||||
|
||||
// Map 'left'/'right' to 'start'/'end'
|
||||
if (alignSelf == NS_STYLE_ALIGN_LEFT || alignSelf == NS_STYLE_ALIGN_RIGHT) {
|
||||
if (aAxisTracker.IsRowOriented()) {
|
||||
// Container's alignment axis is not parallel to the inline axis,
|
||||
// so we map both 'left' and 'right' to 'start'.
|
||||
alignSelf = NS_STYLE_ALIGN_START;
|
||||
} else {
|
||||
// Column-oriented, so we map 'left' and 'right' to 'start' or 'end',
|
||||
// depending on left-to-right writing mode.
|
||||
const bool isLTR = aAxisTracker.GetWritingMode().IsBidiLTR();
|
||||
const bool isAlignLeft = (alignSelf == NS_STYLE_ALIGN_LEFT);
|
||||
alignSelf = (isAlignLeft == isLTR) ? NS_STYLE_ALIGN_START
|
||||
: NS_STYLE_ALIGN_END;
|
||||
}
|
||||
}
|
||||
|
||||
// Map 'start'/'end' to 'flex-start'/'flex-end'.
|
||||
if (alignSelf == NS_STYLE_ALIGN_START) {
|
||||
alignSelf = NS_STYLE_ALIGN_FLEX_START;
|
||||
} else if (alignSelf == NS_STYLE_ALIGN_END) {
|
||||
alignSelf = NS_STYLE_ALIGN_FLEX_END;
|
||||
}
|
||||
|
||||
// If our cross axis is (internally) reversed, swap the align-self
|
||||
// "flex-start" and "flex-end" behaviors:
|
||||
if (aAxisTracker.AreAxesInternallyReversed()) {
|
||||
|
|
@ -3538,6 +3512,31 @@ SingleLineCrossAxisPositionTracker::
|
|||
}
|
||||
}
|
||||
|
||||
// Map 'self-start'/'self-end' to 'start'/'end'
|
||||
if (alignSelf == NS_STYLE_ALIGN_SELF_START ||
|
||||
alignSelf == NS_STYLE_ALIGN_SELF_END) {
|
||||
const LogicalAxis logCrossAxis = aAxisTracker.IsRowOriented()
|
||||
? eLogicalAxisBlock
|
||||
: eLogicalAxisInline;
|
||||
const WritingMode cWM = aAxisTracker.GetWritingMode();
|
||||
const bool sameStart =
|
||||
cWM.ParallelAxisStartsOnSameSide(logCrossAxis, aItem.GetWritingMode());
|
||||
alignSelf = sameStart == (alignSelf == NS_STYLE_ALIGN_SELF_START)
|
||||
? NS_STYLE_ALIGN_START
|
||||
: NS_STYLE_ALIGN_END;
|
||||
}
|
||||
|
||||
// Map 'start'/'end' to 'flex-start'/'flex-end'.
|
||||
if (alignSelf == NS_STYLE_ALIGN_START) {
|
||||
alignSelf = aAxisTracker.IsCrossAxisReversed()
|
||||
? NS_STYLE_ALIGN_FLEX_END
|
||||
: NS_STYLE_ALIGN_FLEX_START;
|
||||
} else if (alignSelf == NS_STYLE_ALIGN_END) {
|
||||
alignSelf = aAxisTracker.IsCrossAxisReversed()
|
||||
? NS_STYLE_ALIGN_FLEX_START
|
||||
: NS_STYLE_ALIGN_FLEX_END;
|
||||
}
|
||||
|
||||
// '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
|
||||
|
|
@ -3547,10 +3546,6 @@ SingleLineCrossAxisPositionTracker::
|
|||
}
|
||||
|
||||
switch (alignSelf) {
|
||||
case NS_STYLE_ALIGN_SELF_START:
|
||||
case NS_STYLE_ALIGN_SELF_END:
|
||||
NS_WARNING("NYI: align-items/align-self:left/right/self-start/self-end");
|
||||
MOZ_FALLTHROUGH;
|
||||
case NS_STYLE_ALIGN_FLEX_START:
|
||||
// No space to skip over -- we're done.
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -121,23 +121,7 @@
|
|||
/><div class="c" style="margin-right: 10px"/>
|
||||
</div>
|
||||
|
||||
<!-- XXXdholbert The left/right references are *WRONG* right now (they
|
||||
should be swapped). I'm including them in their current incorrect form
|
||||
simply to document the testcase's current behavior and to allow this
|
||||
test to "pass" so we can catch any regressions in the rest of the
|
||||
test. We should fix this as part of bug 1207698 or a helper. -->
|
||||
<!-- left -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-right: 190px"/>
|
||||
</div>
|
||||
|
|
@ -148,5 +132,16 @@
|
|||
<div class="a" style="margin-right: 40px"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -119,24 +119,24 @@
|
|||
|
||||
<!-- left -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 190px"/>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top: 140px"/><div class="a"/>
|
||||
<div class="b"/><div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top: 40px"/><div class="b"/><div class="a"/>
|
||||
<div class="c"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 190px"/>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top: 140px"/><div class="a"/>
|
||||
<div class="b"/><div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top: 40px"/><div class="b"/><div class="a"/>
|
||||
<div class="c"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -138,5 +138,33 @@
|
|||
<div class="b" style="margin-top: 30px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c" style="margin-top: 30px"/>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top: 160px"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top: 120px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -147,5 +147,33 @@
|
|||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -148,5 +148,33 @@
|
|||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -141,5 +141,33 @@
|
|||
<div class="b" style="margin-left: 30px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c" style="margin-left: 30px"/>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-left: 160px"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-left: 120px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -147,5 +147,33 @@
|
|||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -148,5 +148,33 @@
|
|||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,173 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
margin-bottom: 2px;
|
||||
background: lightgray;
|
||||
height: 20px;
|
||||
clear: all;
|
||||
}
|
||||
div.a {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background: lightgreen;
|
||||
float: left;
|
||||
}
|
||||
div.b {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
background: pink;
|
||||
float: left;
|
||||
}
|
||||
div.c {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
background: orange;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 30px;
|
||||
height: 10px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (stretch) -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b" style="margin-left:80px; width:110px"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b" style="margin-left: 40px; width: 70px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 160px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 120px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 80px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 60px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b" style="margin-left: 160px"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b" style="margin-left: 60px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c" style="margin-left: 60px"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 40px"/>
|
||||
<div class="b" style="margin-left: 80px"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 20px"/>
|
||||
<div class="b" style="margin-left: 40px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c" style="margin-left: 40px"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: calc(160px / 3)"/>
|
||||
<div class="b" style="margin-left: calc(160px / 3)"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 30px"/>
|
||||
<div class="b" style="margin-left: 30px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c" style="margin-left: 30px"/>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-left: 160px"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-left: 120px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines,
|
||||
testing each possible value of the 'align-content' property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'align-content' in a vertical writing-mode flex container</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/>
|
||||
<link rel="match" href="flexbox-align-content-wmvert-001-ref.xhtml"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
height: 20px; /* Short, to force us to wrap */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2px;
|
||||
background: lightgray;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
div.a {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: auto;
|
||||
height: 20px; /* height comes from contents */
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 30px;
|
||||
height: 10px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (stretch) -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
.flexbox > div { float: left }
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch,
|
||||
.auto, .unspecified, .initial, .inherit {
|
||||
.auto, .unspecified, .initial, .inherit, .self-start, .self-end {
|
||||
width: 40px;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
|
|
@ -53,6 +53,16 @@
|
|||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.self-start {
|
||||
background: yellow;
|
||||
}
|
||||
.self-end {
|
||||
background: purple;
|
||||
}
|
||||
.wmvertrev {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -81,5 +91,12 @@
|
|||
<div class="stretch" style="height: 182px">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="flexbox">
|
||||
<div class="self-start">self-start</div>
|
||||
<div class="self-start big">a b c d e f</div>
|
||||
<div class="self-end wmvertrev">self-end</div>
|
||||
<div class="self-end wmvertrev big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -57,6 +57,18 @@
|
|||
background: pink;
|
||||
align-self: stretch;
|
||||
}
|
||||
.self-start {
|
||||
background: yellow;
|
||||
align-self: self-start;
|
||||
}
|
||||
.self-end {
|
||||
background: purple;
|
||||
align-self: self-end;
|
||||
}
|
||||
.wmvertrev {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -75,5 +87,12 @@
|
|||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="flexbox">
|
||||
<div class="self-start">self-start</div>
|
||||
<div class="self-start big">a b c d e f</div>
|
||||
<div class="self-end wmvertrev">self-end</div>
|
||||
<div class="self-end wmvertrev big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@
|
|||
font-size: 10px;
|
||||
}
|
||||
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch {
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch,
|
||||
.self-start, .self-end {
|
||||
clear: both;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
|
|
@ -58,6 +59,16 @@
|
|||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.self-start {
|
||||
background: yellow;
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
.self-end {
|
||||
background: purple;
|
||||
float: left;
|
||||
text-align: right;
|
||||
}
|
||||
.clearFloats { clear: both }
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -86,5 +97,11 @@
|
|||
we use floats or inline-blocks, whose margins don't collapse. -->
|
||||
<div class="stretch big" style="margin-top: 4px">a b c d e f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="self-start">self-start</div>
|
||||
<div class="self-start big">a b c d e f</div>
|
||||
<div class="self-end">self-end</div>
|
||||
<div class="self-end big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -56,6 +56,17 @@
|
|||
background: pink;
|
||||
align-self: stretch;
|
||||
}
|
||||
.self-start {
|
||||
background: yellow;
|
||||
align-self: self-start;
|
||||
}
|
||||
.self-end {
|
||||
background: purple;
|
||||
align-self: self-end;
|
||||
}
|
||||
.dirrtl {
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -73,5 +84,11 @@
|
|||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="self-start dirrtl">self-start</div>
|
||||
<div class="self-start dirrtl big">a b c d e f</div>
|
||||
<div class="self-end dirrtl">self-end</div>
|
||||
<div class="self-end dirrtl big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,105 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for align-items / align-self behavior, using blocks in
|
||||
place of flex items and using float and width keywords to emulate the
|
||||
align-items / align-self properties. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
float: left;
|
||||
font-size: 10px;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch, .self-start, .self-end {
|
||||
clear: both;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
float: right;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
float: left;
|
||||
}
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
"text-align:center" set. -->
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
display: inline-block;
|
||||
text-align: right; /* Keep parent's centering from tweaking my text */
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
float: right;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.self-start {
|
||||
background: yellow;
|
||||
float: right;
|
||||
}
|
||||
.self-end {
|
||||
background: purple;
|
||||
float: left;
|
||||
}
|
||||
.clearFloats { clear: both }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="clearFloats"></div>
|
||||
<div class="centerParent">
|
||||
<div class="center">center</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="center big">a b c d e f</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="clearFloats"></div>
|
||||
<div class="stretch">stretch</div>
|
||||
<!-- Force a 3px + 1px = 4px margin between this and the previous div
|
||||
(to thwart the effects of margin-collapsing). This is the only
|
||||
place we need this hack, because everywhere else in this test
|
||||
we use floats or inline-blocks, whose margins don't collapse. -->
|
||||
<div class="stretch big" style="margin-top: 4px">a b c d e f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="self-start">self-start</div>
|
||||
<div class="self-start big">a b c d e f</div>
|
||||
<div class="self-end">self-end</div>
|
||||
<div class="self-end big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for align-items / align-self behavior, with all the possible
|
||||
values included on different items within a flex container, and with
|
||||
margin/border/padding values on each item. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items and with 'direction:rtl'</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
|
||||
<link rel="match" href="flexbox-align-self-vert-rtl-005-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
float: left;
|
||||
font-size: 10px;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.flexbox > div {
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
align-self: center;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
align-self: baseline;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
align-self: stretch;
|
||||
}
|
||||
.self-start {
|
||||
background: yellow;
|
||||
align-self: self-start;
|
||||
}
|
||||
.self-end {
|
||||
background: purple;
|
||||
align-self: self-end;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="self-start dirrtl">self-start</div>
|
||||
<div class="self-start dirrtl big">a b c d e f</div>
|
||||
<div class="self-end dirrtl">self-end</div>
|
||||
<div class="self-end dirrtl big nowidth">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,192 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<style>
|
||||
body { line-height: 0; }
|
||||
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
margin-bottom: 2px;
|
||||
direction: rtl;
|
||||
}
|
||||
div.flexbox > * {
|
||||
display: inline-block;
|
||||
}
|
||||
div.a {
|
||||
height: 20px;
|
||||
width: 10px;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
height: 20px;
|
||||
width: 50px;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
height: 20px;
|
||||
width: 100px;
|
||||
background: orange;
|
||||
}
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
}
|
||||
.center {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (start) -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="text-align: left">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="text-align: left;">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="text-align: left;">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="centerParent">
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b" style="float: left"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="display:block; float: right"/>
|
||||
<div class="c" style="float:left"/>
|
||||
<!-- Use fixed-size margins to subtract space for "a" and "c", and then
|
||||
use auto margins to center 'b' within the remaining space -->
|
||||
<div style="display: block; margin-right: 10px; margin-left: 100px">
|
||||
<div class="b" style="margin: auto"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<!-- Center "a" here just as we did above in the "center" case. -->
|
||||
<div class="centerParent">
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- For the rest, we'll use a flex container with invisible flexible items
|
||||
instead of packing space. That's simpler than trying to hack up
|
||||
a width-independent reference case for "justify-content: space-around".
|
||||
(There are other reftests to ensure that basic flex container
|
||||
behavior is correct, so it's safe to rely on it here.) -->
|
||||
<div class="flexbox" style="display: flex">
|
||||
<div style="flex: 0.5"/>
|
||||
<div class="a"/>
|
||||
<div style="flex: 1"/>
|
||||
<div class="b"/>
|
||||
<div style="flex: 0.5"/>
|
||||
</div>
|
||||
<div class="flexbox" style="display: flex">
|
||||
<div style="flex: 0.5"/>
|
||||
<div class="a"/>
|
||||
<div style="flex: 1"/>
|
||||
<div class="b"/>
|
||||
<div style="flex: 1"/>
|
||||
<div class="c"/>
|
||||
<div style="flex: 0.5"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<!-- Center "a" here just as we did above in the "center" case. -->
|
||||
<div class="centerParent">
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- As above with space-around, we'll use a flex container with invisible
|
||||
flexible items instead of packing space. -->
|
||||
<div class="flexbox" style="display: flex">
|
||||
<div style="flex: 1"/>
|
||||
<div class="a"/>
|
||||
<div style="flex: 1"/>
|
||||
<div class="b"/>
|
||||
<div style="flex: 1"/>
|
||||
</div>
|
||||
<div class="flexbox" style="display: flex">
|
||||
<div style="flex: 1"/>
|
||||
<div class="a"/>
|
||||
<div style="flex: 1"/>
|
||||
<div class="b"/>
|
||||
<div style="flex: 1"/>
|
||||
<div class="c"/>
|
||||
<div style="flex: 1"/>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox" style="text-align:left">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="text-align:left">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="text-align:left">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase to exercise each possible value of the 'justify-content'
|
||||
property, in an auto-sized horizontal flex container. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'justify-content' in an auto-sized reversed horizontal flex container</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
|
||||
<link rel="match" href="flexbox-justify-content-horiz-006-ref.xhtml"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
width: 200px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
div.a {
|
||||
height: 20px;
|
||||
flex: 0 10px;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
height: 20px;
|
||||
flex: 0 50px;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
height: 20px;
|
||||
flex: 0 100px;
|
||||
background: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (start) -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="justify-content: flex-start">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-start">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-start">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="justify-content: flex-end">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-end">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-end">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="justify-content: center">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: center">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: center">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="justify-content: space-between">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-between">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-between">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="justify-content: space-around">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-around">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-around">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="justify-content: space-evenly">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-evenly">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-evenly">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox" style="justify-content: left">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: left">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: left">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox" style="justify-content: right">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: right">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: right">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 200px;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.a {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: 20px;
|
||||
height: 50px;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 20px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (start) -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top:190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top:140px"/><div class="a"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top:190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top:140px"/><div class="a"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"/><div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top: 70px"/><div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top: 20px"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top:190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"/><div class="a" style="margin-top: 140px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"
|
||||
/><div class="b" style="margin-top: 20px"
|
||||
/><div class="a" style="margin-top: 20px"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top: 35px"
|
||||
/><div class="a" style="margin-top: 70px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top: calc(40px / 6)"
|
||||
/><div class="b" style="margin-top: calc(40px / 3)"
|
||||
/><div class="a" style="margin-top: calc(40px / 3)"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top: calc(140px / 3)"
|
||||
/><div class="a" style="margin-top: calc(140px / 3)"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top: 10px"
|
||||
/><div class="b" style="margin-top: 10px"
|
||||
/><div class="a" style="margin-top: 10px"/>
|
||||
</div>
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"/><div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"/><div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of vertical flex containers, testing each
|
||||
possible value of the 'justify-content' property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'justify-content' in a vertical flex container</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
|
||||
<link rel="match" href="flexbox-justify-content-vert-006-ref.xhtml"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.a {
|
||||
width: 20px;
|
||||
flex: 0 10px;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: 20px;
|
||||
flex: 0 50px;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 20px;
|
||||
flex: 0 100px;
|
||||
background: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (start) -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="justify-content: flex-start">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-start">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-start">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="justify-content: flex-end">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-end">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-end">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="justify-content: center">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: center">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: center">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="justify-content: space-between">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-between">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-between">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="justify-content: space-around">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-around">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-around">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="justify-content: space-evenly">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-evenly">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-evenly">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox" style="justify-content: left">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: left">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: left">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox" style="justify-content: right">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: right">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: right">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 200px;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.a {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: 20px;
|
||||
height: 50px;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 20px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (start) -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top:190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top:140px"/><div class="a"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top:190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top:140px"/><div class="a"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"/><div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top: 70px"/><div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top: 20px"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top:190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"/><div class="a" style="margin-top: 140px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"
|
||||
/><div class="b" style="margin-top: 20px"
|
||||
/><div class="a" style="margin-top: 20px"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top: 35px"
|
||||
/><div class="a" style="margin-top: 70px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top: calc(40px / 6)"
|
||||
/><div class="b" style="margin-top: calc(40px / 3)"
|
||||
/><div class="a" style="margin-top: calc(40px / 3)"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top: calc(140px / 3)"
|
||||
/><div class="a" style="margin-top: calc(140px / 3)"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top: 10px"
|
||||
/><div class="b" style="margin-top: 10px"
|
||||
/><div class="a" style="margin-top: 10px"/>
|
||||
</div>
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"/><div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top: 140px"/><div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top: 40px"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of vertical flex containers, testing each
|
||||
possible value of the 'justify-content' property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'justify-content' in a vertical writing mode flex container</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
|
||||
<link rel="match" href="flexbox-justify-content-wmvert-001-ref.xhtml"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
div.a {
|
||||
width: 20px;
|
||||
flex: 0 10px;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: 20px;
|
||||
flex: 0 50px;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 20px;
|
||||
flex: 0 100px;
|
||||
background: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (start) -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="justify-content: flex-start">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-start">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-start">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="justify-content: flex-end">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-end">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-end">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="justify-content: center">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: center">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: center">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="justify-content: space-between">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-between">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-between">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="justify-content: space-around">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-around">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-around">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="justify-content: space-evenly">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-evenly">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-evenly">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox" style="justify-content: left">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: left">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: left">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox" style="justify-content: right">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: right">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: right">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
== flexbox-align-content-horiz-001b.xhtml flexbox-align-content-horiz-001-ref.xhtml
|
||||
== flexbox-align-content-vert-001a.xhtml flexbox-align-content-vert-001-ref.xhtml
|
||||
== flexbox-align-content-vert-001b.xhtml flexbox-align-content-vert-001-ref.xhtml
|
||||
== flexbox-align-content-wmvert-001.xhtml flexbox-align-content-wmvert-001-ref.xhtml
|
||||
|
||||
# Tests for cross-axis alignment (align-self / align-items properties)
|
||||
== flexbox-align-self-baseline-horiz-001a.xhtml flexbox-align-self-baseline-horiz-001-ref.xhtml
|
||||
|
|
@ -39,6 +40,7 @@ fuzzy-if(Android,0-158,0-32) == flexbox-align-self-vert-rtl-001.xhtml flexbox-a
|
|||
== flexbox-align-self-vert-rtl-002.xhtml flexbox-align-self-vert-rtl-002-ref.xhtml
|
||||
== flexbox-align-self-vert-rtl-003.xhtml flexbox-align-self-vert-rtl-003-ref.xhtml
|
||||
== flexbox-align-self-vert-rtl-004.xhtml flexbox-align-self-vert-rtl-004-ref.xhtml
|
||||
== flexbox-align-self-vert-rtl-005.xhtml flexbox-align-self-vert-rtl-005-ref.xhtml
|
||||
|
||||
== flexbox-align-items-center-nested-001.html flexbox-align-items-center-nested-001-ref.html
|
||||
|
||||
|
|
@ -158,12 +160,15 @@ fuzzy-if(Android,0-158,0-32) == flexbox-align-self-vert-rtl-001.xhtml flexbox-a
|
|||
== flexbox-justify-content-horiz-003.xhtml flexbox-justify-content-horiz-003-ref.xhtml
|
||||
== flexbox-justify-content-horiz-004.xhtml flexbox-justify-content-horiz-004-ref.xhtml
|
||||
== flexbox-justify-content-horiz-005.xhtml flexbox-justify-content-horiz-005-ref.xhtml
|
||||
== flexbox-justify-content-horiz-006.xhtml flexbox-justify-content-horiz-006-ref.xhtml
|
||||
== flexbox-justify-content-vert-001a.xhtml flexbox-justify-content-vert-001-ref.xhtml
|
||||
== flexbox-justify-content-vert-001b.xhtml flexbox-justify-content-vert-001-ref.xhtml
|
||||
== flexbox-justify-content-vert-002.xhtml flexbox-justify-content-vert-002-ref.xhtml
|
||||
== flexbox-justify-content-vert-003.xhtml flexbox-justify-content-vert-003-ref.xhtml
|
||||
== flexbox-justify-content-vert-004.xhtml flexbox-justify-content-vert-004-ref.xhtml
|
||||
== flexbox-justify-content-vert-005.xhtml flexbox-justify-content-vert-005-ref.xhtml
|
||||
== flexbox-justify-content-vert-006.xhtml flexbox-justify-content-vert-006-ref.xhtml
|
||||
== flexbox-justify-content-wmvert-001.xhtml flexbox-justify-content-wmvert-001-ref.xhtml
|
||||
|
||||
# Tests for flexbox with margin, border, and/or padding on flex items
|
||||
== flexbox-margin-auto-horiz-001.xhtml flexbox-margin-auto-horiz-001-ref.xhtml
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче