Bug 1433339: Apply single-item fallback behavior for 'space-between' more directly, in flexbox code. r?mats
MozReview-Commit-ID: BRx4xGaJS6y
--- a/layout/generic/nsFlexContainerFrame.cpp
+++ b/layout/generic/nsFlexContainerFrame.cpp
@@ -2829,21 +2829,21 @@ MainAxisPositionTracker::
mNumAutoMarginsInMainAxis += item->GetNumAutoMarginsInAxis(mAxis);
}
if (mPackingSpaceRemaining <= 0) {
// No available packing space to use for resolving auto margins.
mNumAutoMarginsInMainAxis = 0;
}
- // If packing space is negative, 'space-between' falls back to 'flex-start',
- // and 'space-around' & 'space-evenly' fall back to 'center'. In those cases,
- // it's simplest to just pretend we have a different 'justify-content' value
- // and share code.
- if (mPackingSpaceRemaining < 0) {
+ // If packing space is negative or we only have one item, 'space-between'
+ // falls back to 'flex-start', and 'space-around' & 'space-evenly' fall back
+ // to 'center'. In those cases, it's simplest to just pretend we have a
+ // different 'justify-content' value and share code.
+ if (mPackingSpaceRemaining < 0 || aLine->NumItems() == 1) {
if (mJustifyContent == NS_STYLE_JUSTIFY_SPACE_BETWEEN) {
mJustifyContent = NS_STYLE_JUSTIFY_FLEX_START;
} else if (mJustifyContent == NS_STYLE_JUSTIFY_SPACE_AROUND ||
mJustifyContent == NS_STYLE_JUSTIFY_SPACE_EVENLY) {
mJustifyContent = NS_STYLE_JUSTIFY_CENTER;
}
}
@@ -3032,20 +3032,23 @@ CrossAxisPositionTracker::
for (FlexLine* line = aFirstLine; line; line = line->getNext()) {
mPackingSpaceRemaining -= line->GetLineCrossSize();
numLines++;
}
// 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
- // 'align-content' value and share code.
- if (mPackingSpaceRemaining < 0) {
- if (mAlignContent == NS_STYLE_ALIGN_SPACE_BETWEEN ||
- mAlignContent == NS_STYLE_ALIGN_STRETCH) {
+ // 'align-content' value and share code. (If we only have one line, all of
+ // the 'space-*' keywords fall back as well, but 'stretch' doesn't because
+ // even a single line can still stretch.)
+ if (mPackingSpaceRemaining < 0 && mAlignContent == NS_STYLE_ALIGN_STRETCH) {
+ mAlignContent = NS_STYLE_ALIGN_FLEX_START;
+ } else if (mPackingSpaceRemaining < 0 || numLines == 1) {
+ if (mAlignContent == NS_STYLE_ALIGN_SPACE_BETWEEN) {
mAlignContent = NS_STYLE_ALIGN_FLEX_START;
} else if (mAlignContent == NS_STYLE_ALIGN_SPACE_AROUND ||
mAlignContent == NS_STYLE_ALIGN_SPACE_EVENLY) {
mAlignContent = NS_STYLE_ALIGN_CENTER;
}
}
// Map 'left'/'right' to 'start'/'end'
@@ -4280,18 +4283,23 @@ nsFlexContainerFrame::CalculatePackingSp
MOZ_ASSERT(aAlignVal == NS_STYLE_ALIGN_SPACE_BETWEEN ||
aAlignVal == NS_STYLE_ALIGN_SPACE_AROUND ||
aAlignVal == NS_STYLE_ALIGN_SPACE_EVENLY,
"Unexpected alignment value");
MOZ_ASSERT(*aPackingSpaceRemaining >= 0,
"Should not be called with negative packing space");
- MOZ_ASSERT(aNumThingsToPack >= 1,
- "Should not be called with less than 1 thing to pack");
+ // Note: In the aNumThingsToPack==1 case, the fallback behavior for
+ // 'space-between' depends on precise information about the axes that we
+ // don't have here. So, for that case, we just depend on the caller to
+ // explicitly convert 'space-{between,around,evenly}' keywords to the
+ // appropriate fallback alignment and skip this function.
+ MOZ_ASSERT(aNumThingsToPack > 1,
+ "Should not be called unless there's more than 1 thing to pack");
// Packing spaces between items:
*aNumPackingSpacesRemaining = aNumThingsToPack - 1;
if (aAlignVal == NS_STYLE_ALIGN_SPACE_BETWEEN) {
// No need to reserve space at beginning/end, so we're done.
return;
}
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001-ref.xhtml
copy to layout/reftests/flexbox/flexbox-align-content-horizrev-001-ref.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-content-horizrev-001-ref.xhtml
@@ -38,105 +38,105 @@
background: purple;
}
</style>
</head>
<body>
<!-- default (stretch) -->
<div class="flexbox">
+ <div class="a" style="margin-top: 190px"/>
+ </div>
+ <div class="flexbox">
+ <div class="b" style="height:110px"><div class="fixedSizeChild"/></div>
+ <div class="a" style="margin-top:80px"/>
+ </div>
+ <div class="flexbox">
+ <div class="c" style="margin-top:40px"/>
+ <div class="b" style="height: 70px"><div class="fixedSizeChild"/></div>
+ <div class="a" style="margin-top:40px"/>
+ </div>
+
+ <!-- flex-start -->
+ <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 class="b" style="margin-top:80px; height:110px"><div class="fixedSizeChild"/></div>
- </div>
- <div class="flexbox">
- <div class="a"/>
- <div class="b" style="margin-top:40px; height: 70px"><div class="fixedSizeChild"/></div>
- <div class="c"/>
</div>
- <!-- flex-start -->
+ <!-- flex-end -->
<div class="flexbox">
<div class="a"/>
</div>
<div class="flexbox">
+ <div class="b"><div class="fixedSizeChild"/></div>
<div class="a"/>
- <div class="b"><div class="fixedSizeChild"/></div>
</div>
<div class="flexbox">
- <div class="a"/>
+ <div class="c"/>
<div class="b"><div class="fixedSizeChild"/></div>
- <div class="c"/>
- </div>
-
- <!-- flex-end -->
- <div class="flexbox">
- <div class="a" style="margin-top: 190px"/>
- </div>
- <div class="flexbox">
- <div class="a" style="margin-top: 160px"/>
- <div class="b"><div class="fixedSizeChild"/></div>
- </div>
- <div class="flexbox">
- <div class="a" style="margin-top: 120px"/>
- <div class="b"><div class="fixedSizeChild"/></div>
- <div class="c"/>
+ <div class="a"/>
</div>
<!-- center -->
<div class="flexbox">
<div class="a" style="margin-top: 95px"/>
</div>
<div class="flexbox">
- <div class="a" style="margin-top: 80px"/>
- <div class="b"><div class="fixedSizeChild"/></div>
+ <div class="b" style="margin-top: 80px"><div class="fixedSizeChild"/></div>
+ <div class="a"/>
</div>
<div class="flexbox">
- <div class="a" style="margin-top: 60px"/>
+ <div class="c" style="margin-top: 60px"/>
<div class="b"><div class="fixedSizeChild"/></div>
- <div class="c"/>
+ <div class="a"/>
</div>
<!-- space-between -->
<div class="flexbox">
- <div class="a"/>
+ <div class="a" style="margin-top: 190px"/>
</div>
<div class="flexbox">
- <div class="a"/>
- <div class="b" style="margin-top: 160px"><div class="fixedSizeChild"/></div>
+ <div class="b"><div class="fixedSizeChild"/></div>
+ <div class="a" style="margin-top: 160px"/>
</div>
<div class="flexbox">
- <div class="a"/>
+ <div class="c"/>
<div class="b" style="margin-top: 60px"><div class="fixedSizeChild"/></div>
- <div class="c" style="margin-top: 60px"/>
+ <div class="a" style="margin-top: 60px"/>
</div>
<!-- space-around -->
<div class="flexbox">
<div class="a" style="margin-top: 95px"/>
</div>
<div class="flexbox">
- <div class="a" style="margin-top: 40px"/>
- <div class="b" style="margin-top: 80px"><div class="fixedSizeChild"/></div>
+ <div class="b" style="margin-top: 40px"><div class="fixedSizeChild"/></div>
+ <div class="a" style="margin-top: 80px"/>
</div>
<div class="flexbox">
- <div class="a" style="margin-top: 20px"/>
+ <div class="c" style="margin-top: 20px"/>
<div class="b" style="margin-top: 40px"><div class="fixedSizeChild"/></div>
- <div class="c" style="margin-top: 40px"/>
+ <div class="a" style="margin-top: 40px"/>
</div>
<!-- space-evenly -->
<div class="flexbox">
<div class="a" style="margin-top: 95px"/>
</div>
<div class="flexbox">
+ <div class="b" style="margin-top: calc(160px / 3)"><div class="fixedSizeChild"/></div>
<div class="a" style="margin-top: calc(160px / 3)"/>
- <div class="b" style="margin-top: calc(160px / 3)"><div class="fixedSizeChild"/></div>
</div>
<div class="flexbox">
- <div class="a" style="margin-top: 30px"/>
+ <div class="c" style="margin-top: 30px"/>
<div class="b" style="margin-top: 30px"><div class="fixedSizeChild"/></div>
- <div class="c" style="margin-top: 30px"/>
+ <div class="a" style="margin-top: 30px"/>
</div>
</body>
</html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001a.xhtml
copy to layout/reftests/flexbox/flexbox-align-content-horizrev-001.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001a.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-content-horizrev-001.xhtml
@@ -1,27 +1,27 @@
<?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,
+<!-- Testcase with a series of row wrap-reverse 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 horizontal flex container</title>
+ <title>CSS Test: Testing 'align-content' in a row wrap-reverse flex container</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/>
- <link rel="match" href="flexbox-align-content-horiz-001-ref.xhtml"/>
+ <link rel="match" href="flexbox-align-content-horizrev-001-ref.xhtml"/>
<style>
div.flexbox {
width: 20px; /* Skinny, to force us to wrap */
height: 200px;
display: flex;
- flex-wrap: wrap;
+ flex-wrap: wrap-reverse;
margin-right: 2px;
float: left;
background: lightgray;
}
div.a {
width: 20px;
height: 10px;
flex: none;
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml
copy to layout/reftests/flexbox/flexbox-align-content-vertrev-001-ref.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-content-vertrev-001-ref.xhtml
@@ -14,29 +14,29 @@
background: lightgray;
height: 20px;
clear: all;
}
div.a {
width: 10px;
height: 20px;
background: lightgreen;
- float: left;
+ float: right;
}
div.b {
width: 30px;
height: 20px;
background: pink;
- float: left;
+ float: right;
}
div.c {
width: 40px;
height: 20px;
background: orange;
- float: left;
+ float: right;
}
/* Inside of 'b': */
div.fixedSizeChild {
width: 30px;
height: 10px;
background: purple;
}
@@ -45,21 +45,21 @@
<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 class="b" style="margin-right: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="b" style="margin-right: 40px; width: 70px"><div class="fixedSizeChild"/></div>
<div class="c"/>
</div>
<!-- flex-start -->
<div class="flexbox">
<div class="a"/>
</div>
<div class="flexbox">
@@ -69,77 +69,77 @@
<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 class="a" style="margin-right: 190px"/>
</div>
<div class="flexbox">
- <div class="a" style="margin-left: 160px"/>
+ <div class="a" style="margin-right: 160px"/>
<div class="b"><div class="fixedSizeChild"/></div>
</div>
<div class="flexbox">
- <div class="a" style="margin-left: 120px"/>
+ <div class="a" style="margin-right: 120px"/>
<div class="b"><div class="fixedSizeChild"/></div>
<div class="c"/>
</div>
<!-- center -->
<div class="flexbox">
- <div class="a" style="margin-left: 95px"/>
+ <div class="a" style="margin-right: 95px"/>
</div>
<div class="flexbox">
- <div class="a" style="margin-left: 80px"/>
+ <div class="a" style="margin-right: 80px"/>
<div class="b"><div class="fixedSizeChild"/></div>
</div>
<div class="flexbox">
- <div class="a" style="margin-left: 60px"/>
+ <div class="a" style="margin-right: 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 class="b" style="margin-right: 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 class="b" style="margin-right: 60px"><div class="fixedSizeChild"/></div>
+ <div class="c" style="margin-right: 60px"/>
</div>
<!-- space-around -->
<div class="flexbox">
- <div class="a" style="margin-left: 95px"/>
+ <div class="a" style="margin-right: 95px"/>
</div>
<div class="flexbox">
- <div class="a" style="margin-left: 40px"/>
- <div class="b" style="margin-left: 80px"><div class="fixedSizeChild"/></div>
+ <div class="a" style="margin-right: 40px"/>
+ <div class="b" style="margin-right: 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 class="a" style="margin-right: 20px"/>
+ <div class="b" style="margin-right: 40px"><div class="fixedSizeChild"/></div>
+ <div class="c" style="margin-right: 40px"/>
</div>
<!-- space-evenly -->
<div class="flexbox">
- <div class="a" style="margin-left: 95px"/>
+ <div class="a" style="margin-right: 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 class="a" style="margin-right: calc(160px / 3)"/>
+ <div class="b" style="margin-right: 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 class="a" style="margin-right: 30px"/>
+ <div class="b" style="margin-right: 30px"><div class="fixedSizeChild"/></div>
+ <div class="c" style="margin-right: 30px"/>
</div>
</body>
</html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001a.xhtml
copy to layout/reftests/flexbox/flexbox-align-content-vertrev-001.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001a.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-content-vertrev-001.xhtml
@@ -1,28 +1,28 @@
<?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, with 1-3 flex lines,
+<!-- Testcase with a series of column wrap-reverse 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 flex container</title>
+ <title>CSS Test: Testing 'align-content' in a column wrap-reverse flex container</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/>
- <link rel="match" href="flexbox-align-content-vert-001-ref.xhtml"/>
+ <link rel="match" href="flexbox-align-content-vertrev-001-ref.xhtml"/>
<style>
div.flexbox {
width: 200px;
height: 20px; /* Short, to force us to wrap */
display: flex;
flex-direction: column;
- flex-wrap: wrap;
+ flex-wrap: wrap-reverse;
margin-bottom: 2px;
background: lightgray;
}
div.a {
width: 10px;
height: 20px;
flex: none;
background: lightgreen;
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001-ref.xhtml
copy to layout/reftests/flexbox/flexbox-justify-content-horizrev-001-ref.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-horizrev-001-ref.xhtml
@@ -6,16 +6,18 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
<style>
div.flexbox {
margin-bottom: 2px;
line-height: 0;
+ direction: rtl;
+ width: 200px;
}
div.flexbox > * {
display: inline-block;
}
div.a {
height: 20px;
width: 10px;
background: lightgreen;
@@ -53,93 +55,98 @@
<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">
- <div class="a" style="margin-left: 190px"/>
+ <div class="a" style="margin-right: 190px"/>
</div>
<div class="flexbox">
- <div class="a" style="margin-left: 140px"/><div class="b"/>
+ <div class="a" style="margin-right: 140px"/><div class="b"/>
</div>
<div class="flexbox">
- <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/>
+ <div class="a" style="margin-right: 40px"/><div class="b"/><div class="c"/>
</div>
<!-- center -->
<div class="flexbox">
- <div class="a" style="margin-left: 95px"/>
+ <div class="a" style="margin-right: 95px"/>
</div>
<div class="flexbox">
- <div class="a" style="margin-left: 70px"/><div class="b"/>
+ <div class="a" style="margin-right: 70px"/><div class="b"/>
</div>
<div class="flexbox">
- <div class="a" style="margin-left: 20px"/><div class="b"/><div class="c"/>
+ <div class="a" style="margin-right: 20px"/><div class="b"/><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: 140px"/>
+ <div class="a"/><div class="b" style="margin-right: 140px"/>
</div>
<div class="flexbox">
<div class="a"
- /><div class="b" style="margin-left: 20px"
- /><div class="c" style="margin-left: 20px"/>
+ /><div class="b" style="margin-right: 20px"
+ /><div class="c" style="margin-right: 20px"/>
</div>
<!-- space-around -->
<div class="flexbox">
- <div class="a" style="margin-left: 95px"/>
+ <div class="a" style="margin-right: 95px"/>
</div>
<div class="flexbox">
- <div class="a" style="margin-left: 35px"
- /><div class="b" style="margin-left: 70px"/>
+ <div class="a" style="margin-right: 35px"
+ /><div class="b" style="margin-right: 70px"/>
</div>
<div class="flexbox">
- <div class="a" style="margin-left: calc(40px / 6)"
- /><div class="b" style="margin-left: calc(40px / 3)"
- /><div class="c" style="margin-left: calc(40px / 3)"/>
+ <div class="a" style="margin-right: calc(40px / 6)"
+ /><div class="b" style="margin-right: calc(40px / 3)"
+ /><div class="c" style="margin-right: calc(40px / 3)"/>
</div>
<!-- space-evenly -->
<div class="flexbox">
- <div class="a" style="margin-left: 95px"/>
+ <div class="a" style="margin-right: 95px"/>
+ </div>
+ <div class="flexbox">
+ <div class="a" style="margin-right: calc(140px / 3)"
+ /><div class="b" style="margin-right: calc(140px / 3)"/>
</div>
<div class="flexbox">
- <div class="a" style="margin-left: calc(140px / 3)"
- /><div class="b" style="margin-left: calc(140px / 3)"/>
- </div>
- <div class="flexbox">
- <div class="a" style="margin-left: 10px"
- /><div class="b" style="margin-left: 10px"
- /><div class="c" style="margin-left: 10px"/>
+ <div class="a" style="margin-right: 10px"
+ /><div class="b" style="margin-right: 10px"
+ /><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-left: 190px"/>
+ <div class="a" style="margin-right: 190px"/>
</div>
<div class="flexbox">
- <div class="a" style="margin-left: 140px"/><div class="b"/>
+ <div class="a" style="margin-right: 140px"/><div class="b"/>
</div>
<div class="flexbox">
- <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/>
+ <div class="a" style="margin-right: 40px"/><div class="b"/><div class="c"/>
</div>
</body>
</html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001a.xhtml
copy to layout/reftests/flexbox/flexbox-justify-content-horizrev-001.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001a.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-horizrev-001.xhtml
@@ -1,25 +1,26 @@
<?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, testing each
+<!-- Testcase with a series of row-reverse 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 horizontal flex container</title>
+ <title>CSS Test: Testing 'justify-content' in a row-reverse flex container</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@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-001-ref.xhtml"/>
+ <link rel="match" href="flexbox-justify-content-horizrev-001-ref.xhtml"/>
<style>
div.flexbox {
width: 200px;
display: flex;
+ flex-direction: row-reverse;
margin-bottom: 2px;
}
div.a {
height: 20px;
flex: 0 10px;
background: lightgreen;
}
div.b {
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml
copy to layout/reftests/flexbox/flexbox-justify-content-vertrev-001-ref.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-vertrev-001-ref.xhtml
@@ -29,115 +29,115 @@
background: orange;
}
</style>
</head>
<body>
<!-- default (start) -->
<div class="flexbox">
- <div class="a"/>
+ <div class="a" style="margin-top: 190px"/>
</div>
<div class="flexbox">
- <div class="a"/><div class="b"></div>
+ <div class="b" style="margin-top: 140px"/><div class="a"/>
</div>
<div class="flexbox">
- <div class="a"/><div class="b"/><div class="c"/>
+ <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 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="a"/><div class="b"/>
+ <div class="b"/><div class="a"/>
</div>
<div class="flexbox">
- <div class="a"/><div class="b"/><div class="c"/>
- </div>
-
- <!-- flex-end -->
- <div class="flexbox">
- <div class="a" style="margin-top: 190px"/>
- </div>
- <div class="flexbox">
- <div class="a" style="margin-top: 140px"/><div class="b"/>
- </div>
- <div class="flexbox">
- <div class="a" style="margin-top: 40px"/><div class="b"/><div class="c"/>
+ <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="a" style="margin-top: 70px"/><div class="b"/>
+ <div class="b" style="margin-top: 70px"/><div class="a"/>
</div>
<div class="flexbox">
- <div class="a" style="margin-top: 20px"/><div class="b"/><div class="c"/>
+ <div class="c" style="margin-top: 20px"/><div class="b"/><div class="a"/>
</div>
<!-- space-between -->
<div class="flexbox">
- <div class="a"/>
+ <div class="a" style="margin-top: 190px"/>
</div>
<div class="flexbox">
- <div class="a"/><div class="b" style="margin-top: 140px"/>
+ <div class="b"/><div class="a" style="margin-top: 140px"/>
</div>
<div class="flexbox">
- <div class="a"
+ <div class="c"
/><div class="b" style="margin-top: 20px"
- /><div class="c" 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="a" style="margin-top: 35px"
- /><div class="b" style="margin-top: 70px"/>
+ <div class="b" style="margin-top: 35px"
+ /><div class="a" style="margin-top: 70px"/>
</div>
<div class="flexbox">
- <div class="a" style="margin-top: calc(40px / 6)"
+ <div class="c" style="margin-top: calc(40px / 6)"
/><div class="b" style="margin-top: calc(40px / 3)"
- /><div class="c" 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="a" style="margin-top: calc(140px / 3)"
- /><div class="b" style="margin-top: calc(140px / 3)"/>
+ <div class="b" style="margin-top: calc(140px / 3)"
+ /><div class="a" style="margin-top: calc(140px / 3)"/>
</div>
<div class="flexbox">
- <div class="a" style="margin-top: 10px"
+ <div class="c" style="margin-top: 10px"
/><div class="b" style="margin-top: 10px"
- /><div class="c" style="margin-top: 10px"/>
+ /><div class="a" style="margin-top: 10px"/>
</div>
<!-- left -->
<div class="flexbox">
- <div class="a"/>
+ <div class="a" style="margin-top: 190px"/>
</div>
<div class="flexbox">
- <div class="a"/><div class="b"/>
+ <div class="b" style="margin-top: 140px"/><div class="a"/>
</div>
<div class="flexbox">
- <div class="a"/><div class="b"/><div class="c"/>
+ <div class="c" style="margin-top: 40px"/><div class="b"/><div class="a"/>
</div>
<!-- right -->
<div class="flexbox">
- <div class="a"/>
+ <div class="a" style="margin-top: 190px"/>
</div>
<div class="flexbox">
- <div class="a"/><div class="b"/>
+ <div class="b" style="margin-top: 140px"/><div class="a"/>
</div>
<div class="flexbox">
- <div class="a"/><div class="b"/><div class="c"/>
+ <div class="c" style="margin-top: 40px"/><div class="b"/><div class="a"/>
</div>
</body>
</html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml
copy to layout/reftests/flexbox/flexbox-justify-content-vertrev-001.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-vertrev-001.xhtml
@@ -1,26 +1,26 @@
<?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
+<!-- Testcase with a series of column-reverse 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>
+ <title>CSS Test: Testing 'justify-content' in a column-reverse flex container</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@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-001-ref.xhtml"/>
+ <link rel="match" href="flexbox-justify-content-vertrev-001-ref.xhtml"/>
<style>
div.flexbox {
height: 200px;
display: flex;
- flex-direction: column;
+ flex-direction: column-reverse;
margin-right: 2px;
float: left;
}
div.a {
width: 20px;
flex: 0 10px;
background: lightgreen;
}
--- a/layout/reftests/flexbox/reftest.list
+++ b/layout/reftests/flexbox/reftest.list
@@ -7,16 +7,24 @@
#
# Where possible & practical, we should try to address these so we can migrate
# tests over to the w3c-css directory, so that they can become part of the
# W3C's test suite.
# SUBDIRECTORY: Reftests for paginated flex containers
include pagination/reftest.list
+# XXXdholbert These tests should move to w3c-css/submitted once we've closed
+# out bug 1207698 and updated these tests' expectations & alignment keyword
+# usage accordingly:
+== flexbox-align-content-horizrev-001.xhtml flexbox-align-content-horizrev-001-ref.xhtml
+== flexbox-align-content-vertrev-001.xhtml flexbox-align-content-vertrev-001-ref.xhtml
+== flexbox-justify-content-horizrev-001.xhtml flexbox-justify-content-horizrev-001-ref.xhtml
+== flexbox-justify-content-vertrev-001.xhtml flexbox-justify-content-vertrev-001-ref.xhtml
+
# Tests for cross-axis alignment (align-self / align-items properties)
fails == flexbox-align-self-baseline-horiz-2.xhtml flexbox-align-self-baseline-horiz-2-ref.xhtml # bug 793456, and possibly others
# This one fails on windows R (but not Ru, strangely) and GTK.
# On Windows R and GTK, the single-line <label> flex item has a different
# background size in test vs. ref
fuzzy-if(cocoaWidget,1,2) random-if(winWidget||gtkWidget) skip-if(Android) == flexbox-align-self-baseline-horiz-3.xhtml flexbox-align-self-baseline-horiz-3-ref.xhtml # XXXdholbert investigate the random-if. The skip-if(Android) is because checkbox/radio appearance:none doesn't work as expected.
== flexbox-align-self-baseline-horiz-4.xhtml flexbox-align-self-baseline-horiz-4-ref.xhtml
== flexbox-item-align-self-dynamic-pos-001.html flexbox-item-align-self-dynamic-pos-001-ref.html
