Convert some flexbox tests to run in mozilla
https://bugs.webkit.org/show_bug.cgi?id=98464
Reviewed by Ojan Vafai.
Move properties with a small number of values into resources/flexbox.css
and start using it in some flexbox tests.
* css3/flexbox/align-absolute-child.html:
* css3/flexbox/align-baseline-expected.html:
* css3/flexbox/align-baseline.html:
* css3/flexbox/anonymous-block-merge-crash.html:
* css3/flexbox/anonymous-block.html:
* css3/flexbox/auto-height-dynamic.html:
* css3/flexbox/auto-margins.html:
* css3/flexbox/box-sizing-min-max-sizes.html:
* css3/flexbox/box-sizing.html:
* css3/flexbox/child-overflow-expected.html:
* css3/flexbox/child-overflow.html:
* css3/flexbox/columns-auto-size.html:
* css3/flexbox/columns-height-set-via-top-bottom.html:
* css3/flexbox/content-height-with-scrollbars.html:
* css3/flexbox/cross-axis-scrollbar.html:
* css3/flexbox/flex-algorithm-min-max.html:
* css3/flexbox/flex-algorithm-with-margins.html:
* css3/flexbox/flex-algorithm.html:
* css3/flexbox/resources/flexbox.css: Added.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@130457 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index c6bc7a8..a0d6e34 100644
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,33 @@
+2012-10-04 Tony Chang <tony@chromium.org>
+
+ Convert some flexbox tests to run in mozilla
+ https://bugs.webkit.org/show_bug.cgi?id=98464
+
+ Reviewed by Ojan Vafai.
+
+ Move properties with a small number of values into resources/flexbox.css
+ and start using it in some flexbox tests.
+
+ * css3/flexbox/align-absolute-child.html:
+ * css3/flexbox/align-baseline-expected.html:
+ * css3/flexbox/align-baseline.html:
+ * css3/flexbox/anonymous-block-merge-crash.html:
+ * css3/flexbox/anonymous-block.html:
+ * css3/flexbox/auto-height-dynamic.html:
+ * css3/flexbox/auto-margins.html:
+ * css3/flexbox/box-sizing-min-max-sizes.html:
+ * css3/flexbox/box-sizing.html:
+ * css3/flexbox/child-overflow-expected.html:
+ * css3/flexbox/child-overflow.html:
+ * css3/flexbox/columns-auto-size.html:
+ * css3/flexbox/columns-height-set-via-top-bottom.html:
+ * css3/flexbox/content-height-with-scrollbars.html:
+ * css3/flexbox/cross-axis-scrollbar.html:
+ * css3/flexbox/flex-algorithm-min-max.html:
+ * css3/flexbox/flex-algorithm-with-margins.html:
+ * css3/flexbox/flex-algorithm.html:
+ * css3/flexbox/resources/flexbox.css: Added.
+
2012-10-04 Dirk Pranke <dpranke@chromium.org>
Update chromium baselines for 5006779.html and paint-subrect-grid.html.
diff --git a/LayoutTests/css3/flexbox/align-absolute-child.html b/LayoutTests/css3/flexbox/align-absolute-child.html
index 929843d..6860c21 100644
--- a/LayoutTests/css3/flexbox/align-absolute-child.html
+++ b/LayoutTests/css3/flexbox/align-absolute-child.html
@@ -1,9 +1,11 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/flexbox.css" rel="stylesheet">
<style>
body {
margin: 0;
}
.flexbox {
- display: -webkit-flex;
background-color: green;
height: 100px;
width: 100px;
@@ -11,12 +13,7 @@
}
.flexbox > * {
-webkit-flex: none;
-}
-.align-center {
- -webkit-align-items: center;
-}
-.stretch {
- -webkit-align-items: stretch;
+ -moz-flex: none;
}
.relative {
position: relative;
@@ -33,32 +30,6 @@
left: 20px;
}
-.horizontal-tb {
- -webkit-writing-mode: horizontal-tb;
-}
-.horizontal-bt {
- -webkit-writing-mode: horizontal-bt;
-}
-.vertical-rl {
- -webkit-writing-mode: vertical-rl;
-}
-.vertical-lr {
- -webkit-writing-mode: vertical-lr;
-}
-
-.row {
- -webkit-flex-flow: row;
-}
-.row-reverse {
- -webkit-flex-flow: row-reverse;
-}
-.column {
- -webkit-flex-flow: column;
-}
-.column-reverse {
- -webkit-flex-flow: column-reverse;
-}
-
.rtl {
direction: rtl;
}
@@ -66,14 +37,6 @@
direction: ltr;
}
-.wrap {
- -webkit-flex-wrap: wrap;
-}
-
-.wrap-reverse {
- -webkit-flex-wrap: wrap-reverse;
-}
-
.flexbox :nth-child(1) {
background-color: blue;
}
@@ -102,11 +65,11 @@
<body onload="checkLayout('.flexbox')">
-<div class='flexbox relative align-center'>
+<div class='flexbox relative align-items-center'>
<div id='placed-absolute' class='absolute' data-offset-x=20 data-offset-y=20></div>
</div>
-<div class='flexbox relative align-center'>
+<div class='flexbox relative align-items-center'>
<div data-offset-x=0 data-offset-y=40></div>
<div class='absolute' data-offset-x=20 data-offset-y=0></div>
<div data-offset-x=20 data-offset-y=40></div>
@@ -114,7 +77,7 @@
</div>
<div class="relative">
-<div class='flexbox align-center'>
+<div class='flexbox align-items-center'>
<div data-offset-x=10 data-offset-y=40></div>
<div class='absolute' data-offset-x=30 data-offset-y=0></div>
<div data-offset-x=30 data-offset-y=40></div>
@@ -148,7 +111,7 @@
<div class="absolute" style="margin: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
</div>
-<div class='flexbox stretch relative'>
+<div class='flexbox align-items-stretch relative'>
<div style="height: auto" data-offset-x=0 data-offset-y=0 data-expected-height=100></div>
<div class="absolute" style="height: auto" data-offset-x=20 data-offset-y=0 data-expected-height=0></div>
<div class="absolute" style="height: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5 data-expected-height=0></div>
@@ -163,7 +126,7 @@
<div class="absolute" data-offset-x=100 data-offset-y=50></div>
</div>
-<div class="flexbox wrap relative" style="-webkit-align-items: flex-end">
+<div class="flexbox wrap relative align-items-flex-end">
<div style="width: 100px;" data-offset-x=0 data-offset-y=30></div>
<div class="absolute" data-offset-x=100 data-offset-y=0></div>
<div style="width: 50px;" data-offset-x=0 data-offset-y=80></div>
@@ -184,3 +147,4 @@
shouldBe('beforePosition[key]', 'afterPosition[key]');
</script>
</body>
+</html>
diff --git a/LayoutTests/css3/flexbox/align-baseline-expected.html b/LayoutTests/css3/flexbox/align-baseline-expected.html
index 84020c5..074433d 100644
--- a/LayoutTests/css3/flexbox/align-baseline-expected.html
+++ b/LayoutTests/css3/flexbox/align-baseline-expected.html
@@ -1,24 +1,19 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/flexbox.css" rel="stylesheet">
<style>
body {
margin: 0;
}
-.flexbox {
- display: -webkit-flex;
- -webkit-flex-flow: column;
- -webkit-align-items: flex-start;
-}
-.wrap-reverse {
- -webkit-flex-wrap: wrap-reverse;
-}
</style>
<body>
-<div class='flexbox'>
+<div class='flexbox column align-items-flex-start'>
<h1>This text</h1>
<p>should be left aligned.</p>
</div>
-<div class='flexbox wrap-reverse'>
+<div class='flexbox column align-items-flex-start wrap-reverse'>
<h1>This text</h1>
<p>should be right aligned.</p>
</div>
diff --git a/LayoutTests/css3/flexbox/align-baseline.html b/LayoutTests/css3/flexbox/align-baseline.html
index a4faa56..2073104 100644
--- a/LayoutTests/css3/flexbox/align-baseline.html
+++ b/LayoutTests/css3/flexbox/align-baseline.html
@@ -1,24 +1,19 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/flexbox.css" rel="stylesheet">
<style>
body {
margin: 0;
}
-.flexbox {
- display: -webkit-flex;
- -webkit-flex-flow: column;
- -webkit-align-items: baseline;
-}
-.wrap-reverse {
- -webkit-flex-wrap: wrap-reverse;
-}
</style>
<body>
-<div class='flexbox'>
+<div class='flexbox column align-items-baseline'>
<h1>This text</h1>
<p>should be left aligned.</p>
</div>
-<div class='flexbox wrap-reverse'>
+<div class='flexbox column align-items-baseline wrap-reverse'>
<h1>This text</h1>
<p>should be right aligned.</p>
</div>
diff --git a/LayoutTests/css3/flexbox/anonymous-block-merge-crash.html b/LayoutTests/css3/flexbox/anonymous-block-merge-crash.html
index 64b00ee..05d3a85 100644
--- a/LayoutTests/css3/flexbox/anonymous-block-merge-crash.html
+++ b/LayoutTests/css3/flexbox/anonymous-block-merge-crash.html
@@ -1,4 +1,4 @@
-<div style="display:-webkit-flex"><div id="inner"></div>If this page doesn't crash then this test passes.</div>
+<div style="display:-webkit-flex; display:-moz-flex;"><div id="inner"></div>If this page doesn't crash then this test passes.</div>
<script>
if (window.testRunner)
testRunner.dumpAsText()
diff --git a/LayoutTests/css3/flexbox/anonymous-block.html b/LayoutTests/css3/flexbox/anonymous-block.html
index 53ea868..2c7986b 100644
--- a/LayoutTests/css3/flexbox/anonymous-block.html
+++ b/LayoutTests/css3/flexbox/anonymous-block.html
@@ -1,8 +1,9 @@
<!DOCTYPE html>
<html>
+<link href="resources/flexbox.css" rel="stylesheet">
<body>
<p>This tests that text nodes that have a flexbox as a parent are wrapped in
anonymous blocks.</p>
-<div style="display: -webkit-flex">This text should be visible.</div>
+<div class="flexbox">This text should be visible.</div>
</body>
</html>
diff --git a/LayoutTests/css3/flexbox/auto-height-dynamic.html b/LayoutTests/css3/flexbox/auto-height-dynamic.html
index 31cb047..583bd26 100644
--- a/LayoutTests/css3/flexbox/auto-height-dynamic.html
+++ b/LayoutTests/css3/flexbox/auto-height-dynamic.html
@@ -1,12 +1,11 @@
<!DOCTYPE html>
<html>
+<link href="resources/flexbox.css" rel="stylesheet">
<style>
.flexbox {
width: 600px;
- display: -webkit-flex;
background-color: #aaa;
position: relative;
- -webkit-flex-flow: column;
}
.flexbox :nth-child(1) {
background-color: blue;
@@ -19,11 +18,11 @@
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.flexbox')">
-<div class="flexbox" data-expected-height=0>
+<div class="flexbox column" data-expected-height=0>
<div class="flexitem" data-expected-height=0 style="-webkit-flex: 100px"></div>
</div>
-<div class="flexbox" data-expected-height=0>
+<div class="flexbox column" data-expected-height=0>
<div class="flexitem2" data-expected-height=0 style="-webkit-flex: 100px"></div>
</div>
diff --git a/LayoutTests/css3/flexbox/auto-margins.html b/LayoutTests/css3/flexbox/auto-margins.html
index ca98b81..b63e3ca 100644
--- a/LayoutTests/css3/flexbox/auto-margins.html
+++ b/LayoutTests/css3/flexbox/auto-margins.html
@@ -1,16 +1,19 @@
<!DOCTYPE html>
<html>
<head>
+<link href="resources/flexbox.css" rel="stylesheet">
<style>
#circles, #circles div {
display: -webkit-flex;
+ display: -moz-flex;
width: -webkit-calc(100% - 4em);
+ width: calc(100% - 4em);
height: -webkit-calc(100% - 4em);
+ height: calc(100% - 4em);
border: 1em solid blue;
border-radius:50%;
margin: auto;
- -webkit-flex: none;
}
#circles { width:9em; height:9em; }
@@ -21,12 +24,12 @@
<p>These tests are from the spec: <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">http://dev.w3.org/csswg/css3-flexbox/#auto-margins</a>.</p>
<p>The word OK should be centered vertically and horizontally.</p>
-<div style="display: -webkit-flex; width: 4em; height: 4em; background: silver">
- <p id="ok" style="margin: auto; -webkit-flex: none;">OK</p>
+<div class="flexbox" style="width: 4em; height: 4em; background: silver">
+ <p id="ok" style="margin: auto;">OK</p>
</div>
-<div style="display: -webkit-flex; width: 4em; height: 4em; margin-top: 10px; background: silver; -webkit-writing-mode: vertical-rl">
- <p id="okVertical" style="margin: auto; -webkit-flex: none;">OK</p>
+<div class="flexbox" style="width: 4em; height: 4em; margin-top: 10px; background: silver; -webkit-writing-mode: vertical-rl">
+ <p id="okVertical" style="margin: auto;">OK</p>
</div>
<p>You should see 3 blue concentric circles.</p>
diff --git a/LayoutTests/css3/flexbox/box-sizing-min-max-sizes.html b/LayoutTests/css3/flexbox/box-sizing-min-max-sizes.html
index b49a65a..647680c 100644
--- a/LayoutTests/css3/flexbox/box-sizing-min-max-sizes.html
+++ b/LayoutTests/css3/flexbox/box-sizing-min-max-sizes.html
@@ -2,15 +2,11 @@
<html>
<style>
.flexbox {
- display: -webkit-flex;
background-color: teal;
}
.flexbox > div {
box-sizing: border-box;
}
-.column {
- -webkit-flex-flow: column;
-}
</style>
<script>
if (window.testRunner)
diff --git a/LayoutTests/css3/flexbox/box-sizing.html b/LayoutTests/css3/flexbox/box-sizing.html
index bcf3d3a..f6242da 100644
--- a/LayoutTests/css3/flexbox/box-sizing.html
+++ b/LayoutTests/css3/flexbox/box-sizing.html
@@ -1,14 +1,10 @@
-
<!DOCTYPE html>
<html>
+<link href="resources/flexbox.css" rel="stylesheet">
<style>
.flexbox {
- display: -webkit-flex;
border: 2px solid orange;
}
-.column {
- -webkit-flex-flow: column;
-}
.h3 {
height: 300px;
}
@@ -71,20 +67,20 @@
</div>
<h3>flex-box has box-sizing: border-box and flex-wrap: wrap;</h3>
-<div class="flexbox column" style="box-sizing: border-box; border: 2px solid lightblue; padding: 3px; height: 200px; width: 100px; -webkit-flex-wrap: wrap; position: relative" data-expected-width=100 data-expected-height=200>
+<div class="flexbox column wrap" style="box-sizing: border-box; border: 2px solid lightblue; padding: 3px; height: 200px; width: 100px; position: relative" data-expected-width=100 data-expected-height=200>
<div data-offset-x=3></div><div data-offset-x=103></div><div data-offset-x=203></div>
</div>
<h3>flex-box has box-sizing: default and flex-wrap: wrap;</h3>
-<div class="flexbox column" style="border: 2px solid lightblue; padding: 3px; height: 200px; width: 100px; -webkit-flex-wrap: wrap; position: relative" data-expected-width=110 data-expected-height=210>
+<div class="flexbox column wrap" style="border: 2px solid lightblue; padding: 3px; height: 200px; width: 100px; position: relative" data-expected-width=110 data-expected-height=210>
<div data-offset-x=3></div><div data-offset-x=3></div><div data-offset-x=103></div>
</div>
<h3>flex-flow: column, flex-box has box-sizing: border-box, flex items have flex: 1</h3>
<div class="flexbox column" style="box-sizing: border-box; border: 2px solid lightblue; padding: 3px; height: 343px; width: 100px;" data-expected-width=100 data-expected-height=343>
- <div style="-webkit-flex: 1" data-expected-height=111></div>
- <div style="-webkit-flex: 1" data-expected-height=111></div>
- <div style="-webkit-flex: 1" data-expected-height=111></div>
+ <div style="-webkit-flex: 1; -moz-flex: 1" data-expected-height=111></div>
+ <div style="-webkit-flex: 1; -moz-flex: 1" data-expected-height=111></div>
+ <div style="-webkit-flex: 1; -moz-flex: 1" data-expected-height=111></div>
</div>
<script>
diff --git a/LayoutTests/css3/flexbox/child-overflow-expected.html b/LayoutTests/css3/flexbox/child-overflow-expected.html
index 2581602..c50de88 100644
--- a/LayoutTests/css3/flexbox/child-overflow-expected.html
+++ b/LayoutTests/css3/flexbox/child-overflow-expected.html
@@ -21,6 +21,7 @@
width: 120px;
height: 120px;
background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);
+ background: -moz-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);
}
p {
diff --git a/LayoutTests/css3/flexbox/child-overflow.html b/LayoutTests/css3/flexbox/child-overflow.html
index fdd267a..4888d6e 100644
--- a/LayoutTests/css3/flexbox/child-overflow.html
+++ b/LayoutTests/css3/flexbox/child-overflow.html
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
+<link href="resources/flexbox.css" rel="stylesheet">
<style>
.container {
display: inline-block;
@@ -23,25 +24,8 @@
-webkit-writing-mode: vertical-lr;
}
-.row {
- -webkit-flex-direction: row;
-}
-
-.row-reverse {
- -webkit-flex-direction: row-reverse;
-}
-
-.column {
- -webkit-flex-direction: column;
-}
-
-.column-reverse {
- -webkit-flex-direction: column-reverse;
-}
-
.flexbox {
border: 5px solid pink;
- display: -webkit-flex;
height: 100px;
width: 100px;
}
@@ -56,6 +40,7 @@
width: 120px;
height: 120px;
background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);
+ background: -moz-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);
}
p {
@@ -77,7 +62,7 @@
document.body.innerHTML +=
"<div class='" + containerClass + "'>" +
"<div class='" + flexboxClass + "'>" +
- "<div style='-webkit-flex: 0 1 auto'><div></div></div>" +
+ "<div><div></div></div>" +
"</div>" +
"</div> ";
});
diff --git a/LayoutTests/css3/flexbox/columns-auto-size.html b/LayoutTests/css3/flexbox/columns-auto-size.html
index 1d27988..88defaf 100644
--- a/LayoutTests/css3/flexbox/columns-auto-size.html
+++ b/LayoutTests/css3/flexbox/columns-auto-size.html
@@ -1,13 +1,12 @@
<!DOCTYPE html>
<html>
+<link href="resources/flexbox.css" rel="stylesheet">
<style>
body {
margin: 0;
}
.flexbox {
- display: -webkit-flex;
- -webkit-flex-flow: column;
background-color: #aaa;
position: relative;
}
@@ -48,70 +47,70 @@
</script>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.flexbox')">
-<div class="flexbox horizontal">
- <div data-expected-height="10" data-offset-y="0" style="-webkit-flex: 1 0 10px"></div>
+<div class="flexbox column horizontal">
+ <div data-expected-height="10" data-offset-y="0" style="-webkit-flex: 1 0 10px; -moz-flex: 1 0 10px"></div>
<div data-expected-height="10" data-offset-y="10" style="height: 10px;"></div>
<div data-expected-height="10" data-offset-y="20"><div data-expected-height="10" data-offset-y="20" style="height: 10px"></div></div>
</div>
<!-- The last div is sized to 0 because there is no available space, however its child overflows. -->
-<div class="flexbox horizontal">
- <div data-expected-height="0" data-offset-y="0" style="-webkit-flex: 1"></div>
+<div class="flexbox column horizontal">
+ <div data-expected-height="0" data-offset-y="0" style="-webkit-flex: 1; -moz-flex: 1"></div>
<div data-expected-height="10" data-offset-y="0" style="height: 10px;"></div>
- <div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 1 auto"><div style="height: 10px"></div></div>
- <div data-expected-height="0" data-offset-y="20" style="min-height: 0; -webkit-flex: 1"><div data-expected-height="10" data-offset-y="20" class="child-div" style="height: 10px"></div></div>
+ <div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 1 auto; -moz-flex: 1 auto"><div style="height: 10px"></div></div>
+ <div data-expected-height="0" data-offset-y="20" style="min-height: 0; -webkit-flex: 1; -moz-flex: 1"><div data-expected-height="10" data-offset-y="20" class="child-div" style="height: 10px"></div></div>
</div>
-<div class="flexbox horizontal">
- <div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 1 0 10px; margin-top: 10px;"></div>
+<div class="flexbox column horizontal">
+ <div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 1 0 10px; -moz-flex: 1 0 10px; margin-top: 10px;"></div>
<div data-expected-height="10" data-offset-y="20" style="height: 10px; margin-bottom: 20px;"></div>
<div data-expected-height="20" data-offset-y="50" style="padding-top: 10px"><div data-expected-height="10" data-offset-y="60" style="height: 10px"></div></div>
</div>
<!-- Same as previous test case but with a justify-content set. Since there's no
available space, it should layout the same. -->
-<div class="flexbox horizontal" style="-webkit-justify-content: space-between">
- <div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 1 0 10px; margin-top: 10px;"></div>
+<div class="flexbox column horizontal justify-content-space-between">
+ <div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 1 0 10px; -moz-flex: 1 0 10px; margin-top: 10px;"></div>
<div data-expected-height="10" data-offset-y="20" style="height: 10px; margin-bottom: 20px;"></div>
<div data-expected-height="20" data-offset-y="50" style="padding-top: 10px"><div data-expected-height="10" data-offset-y="60" style="height: 10px"></div></div>
</div>
-<div class="flexbox horizontal" data-expected-height="20">
- <div data-expected-height="10" data-offset-y="0" style="-webkit-flex: 0 1 auto"><div style="height: 10px"></div></div>
- <div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 0 2 auto"><div style="height: 10px"></div></div>
+<div class="flexbox column horizontal" data-expected-height="20">
+ <div data-expected-height="10" data-offset-y="0" style="-webkit-flex: 0 1 auto; -moz-flex: 0 1 auto"><div style="height: 10px"></div></div>
+ <div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 0 2 auto; -moz-flex: 0 2 auto"><div style="height: 10px"></div></div>
</div>
-<div class="flexbox horizontal" style="min-height: 10px" data-expected-height="20">
- <div data-expected-height="10" data-offset-y="0" style="-webkit-flex: 0 1 auto"><div style="height: 10px"></div></div>
- <div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 0 2 auto"><div style="height: 10px"></div></div>
+<div class="flexbox column horizontal" style="min-height: 10px" data-expected-height="20">
+ <div data-expected-height="10" data-offset-y="0" style="-webkit-flex: 0 1 auto; -moz-flex: 0 1 auto"><div style="height: 10px"></div></div>
+ <div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 0 2 auto; -moz-flex: 0 2 auto"><div style="height: 10px"></div></div>
</div>
-<div class="flexbox horizontal" style="min-height: 5px; max-height: 17px;" data-expected-height="17">
- <div data-expected-height="9" data-offset-y="0" style="min-height: 0; -webkit-flex: 0 1 auto"><div style="height: 10px"></div></div>
- <div data-expected-height="8" data-offset-y="9" style="min-height: 0; -webkit-flex: 0 2 auto"><div style="height: 10px"></div></div>
+<div class="flexbox column horizontal" style="min-height: 5px; max-height: 17px;" data-expected-height="17">
+ <div data-expected-height="9" data-offset-y="0" style="min-height: 0; -webkit-flex: 0 1 auto; -moz-flex: 0 1 auto"><div style="height: 10px"></div></div>
+ <div data-expected-height="8" data-offset-y="9" style="min-height: 0; -webkit-flex: 0 2 auto; -moz-flex: 0 2 auto"><div style="height: 10px"></div></div>
</div>
-<div class="flexbox horizontal" style="min-height: 5px; max-height: 30px; padding-top: 1px; padding-bottom: 2px;" data-expected-height="33">
- <div data-expected-height="15" data-offset-y="1" style="min-height: 0; -webkit-flex: 0 1 auto"><div style="height: 20px"></div></div>
- <div data-expected-height="15" data-offset-y="16" style="min-height: 0; -webkit-flex: 0 1 auto"><div style="height: 20px"></div></div>
+<div class="flexbox column horizontal" style="min-height: 5px; max-height: 30px; padding-top: 1px; padding-bottom: 2px;" data-expected-height="33">
+ <div data-expected-height="15" data-offset-y="1" style="min-height: 0; -webkit-flex: 0 1 auto; -moz-flex: 0 1 auto"><div style="height: 20px"></div></div>
+ <div data-expected-height="15" data-offset-y="16" style="min-height: 0; -webkit-flex: 0 1 auto; -moz-flex: 0 1 auto"><div style="height: 20px"></div></div>
</div>
-<div class="flexbox horizontal">
+<div class="flexbox column horizontal">
<div data-expected-client-height="10" data-offset-y="0" style="overflow: scroll"><div data-expected-height=10 style="height: 10px"></div></div>
</div>
-<div class="flexbox vertical">
- <div data-expected-width="10" data-offset-x="20" style="-webkit-flex: 1 0 10px"></div>
+<div class="flexbox column vertical">
+ <div data-expected-width="10" data-offset-x="20" style="-webkit-flex: 1 0 10px; -moz-flex: 1 0 10px"></div>
<div data-expected-width="10" data-offset-x="10" style="width: 10px;"></div>
<div data-expected-width="10" data-offset-x="0"><div data-expected-width="10" data-offset-x="0" style="width: 10px"></div></div>
</div>
<!-- The first div overflows to the left, so give it a margin-left so we can see box it paints. -->
-<div class="flexbox vertical" style="margin-left: 100px;">
- <div data-expected-width="0" data-offset-x="20" style="min-width: 0; -webkit-flex: 1"><div data-expected-width="50" data-offset-x="-30" class="child-div" style="width: 50px"></div></div>
- <div data-expected-width="0" data-offset-x="20" style="-webkit-flex: 1"></div>
+<div class="flexbox column vertical" style="margin-left: 100px;">
+ <div data-expected-width="0" data-offset-x="20" style="min-width: 0; -webkit-flex: 1; -moz-flex: 1"><div data-expected-width="50" data-offset-x="-30" class="child-div" style="width: 50px"></div></div>
+ <div data-expected-width="0" data-offset-x="20" style="-webkit-flex: 1; -moz-flex: 1"></div>
<div data-expected-width="10" data-offset-x="10" style="width: 10px;"></div>
- <div data-expected-width="10" data-offset-x="0" style="-webkit-flex: 1 auto"><div style="width: 10px"></div></div>
+ <div data-expected-width="10" data-offset-x="0" style="-webkit-flex: 1 auto; -moz-flex: 1 auto"><div style="width: 10px"></div></div>
</div>
</body>
diff --git a/LayoutTests/css3/flexbox/columns-height-set-via-top-bottom.html b/LayoutTests/css3/flexbox/columns-height-set-via-top-bottom.html
index 60ab86d..7d3098d 100644
--- a/LayoutTests/css3/flexbox/columns-height-set-via-top-bottom.html
+++ b/LayoutTests/css3/flexbox/columns-height-set-via-top-bottom.html
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
+<link href="resources/flexbox.css" rel="stylesheet">
<style>
.container {
position: relative;
@@ -8,8 +9,7 @@
border: 2px solid orange;
}
.flexbox {
- display: -webkit-flex;
- -webkit-flex-flow: column;
+ -webkit-flex-direction: column;
position: absolute;
top: 0;
right: 0;
@@ -32,16 +32,16 @@
<body onload="checkLayout('.flexbox')">
<div class="container">
- <div data-expected-height=100 class="flexbox">
+ <div data-expected-height=100 class="flexbox column">
<div data-expected-height=30 data-expected-width=80 style="height: 30px"></div>
- <div data-expected-height=50 data-expected-width=80 style="-webkit-flex: 1"></div>
+ <div data-expected-height=50 data-expected-width=80 style="-webkit-flex: 1; -moz-flex: 1"></div>
</div>
</div>
<div class="container">
- <div style="-webkit-flex-wrap: wrap" class="flexbox">
+ <div class="flexbox column wrap">
<div data-expected-height=50 data-expected-width=40 style="height: 50px"></div>
- <div data-expected-height=80 data-expected-width=40 style="-webkit-flex: 1 50px"></div>
+ <div data-expected-height=80 data-expected-width=40 style="-webkit-flex: 1 50px; -moz-flex: 1 50px"></div>
</div>
</div>
</body>
diff --git a/LayoutTests/css3/flexbox/content-height-with-scrollbars.html b/LayoutTests/css3/flexbox/content-height-with-scrollbars.html
index c023aa8..52ef3f3 100644
--- a/LayoutTests/css3/flexbox/content-height-with-scrollbars.html
+++ b/LayoutTests/css3/flexbox/content-height-with-scrollbars.html
@@ -1,17 +1,16 @@
<!DOCTYPE html>
<html>
<head>
+<link href="resources/flexbox.css" rel="stylesheet">
<style>
-.outer {
- display: -webkit-flex;
- -webkit-flex-flow: column;
+.flexbox {
height: 100px;
overflow: scroll;
}
-.outer > :nth-child(1) {
+.flexbox > :nth-child(1) {
background-color: lightgreen;
}
-.outer > :nth-child(2) {
+.flexbox > :nth-child(2) {
background-color: lightblue;
}
</style>
@@ -21,20 +20,20 @@
height, we use the content height with scrollbars. The content should not be
scrollable in any of the test cases below.</p>
-<div class="outer">
+<div class="flexbox column">
<div style="height: 100%"></div>
</div>
-<div class="outer">
+<div class="flexbox column">
<div style="height: 100%; box-sizing: border-box; border: 5px solid green"></div>
</div>
-<div class="outer" style="-webkit-flex-wrap: wrap">
+<div class="flexbox column wrap">
<div style="height: 50px; width: 50%;"></div>
<div style="height: 50px; width: 50%; background-color: lightblue"></div>
</div>
-<div class="outer" style="-webkit-flex-wrap: wrap; -webkit-align-content: flex-start; height: auto; max-height: 100px; padding: 10px;">
+<div class="flexbox column wrap align-content-flex-start" style="height: auto; max-height: 100px; padding: 10px;">
<div style="height: 50px; width: 300px;"></div>
<div style="height: 50px; width: 300px; background-color: lightblue"></div>
</div>
diff --git a/LayoutTests/css3/flexbox/cross-axis-scrollbar.html b/LayoutTests/css3/flexbox/cross-axis-scrollbar.html
index b206081..ffc6fd8 100644
--- a/LayoutTests/css3/flexbox/cross-axis-scrollbar.html
+++ b/LayoutTests/css3/flexbox/cross-axis-scrollbar.html
@@ -1,13 +1,13 @@
<!DOCTYPE html>
<html>
<head>
+<link href="resources/flexbox.css" rel="stylesheet">
<style>
body {
margin: 0;
}
.flexbox {
- display: -webkit-flex;
background-color: red;
}
@@ -19,10 +19,6 @@
-webkit-writing-mode: vertical-lr;
}
-.column {
- -webkit-flex-direction: column;
-}
-
.column > div {
background-color: green;
width: 100px;
@@ -32,6 +28,7 @@
.row > div {
background-color: green;
-webkit-flex: 1;
+ -moz-flex: 1;
height: 50px;
min-height: 0;
}
@@ -43,6 +40,7 @@
.vertical-lr > .row > div {
-webkit-flex: 1;
+ -moz-flex: 1;
width: 100px;
}
@@ -56,81 +54,81 @@
<div style="position: absolute; top: 0; left: 0;">
<div class="flexbox column" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;">
- <div style="-webkit-align-self: flex-start"></div>
- <div style="-webkit-align-self: center"></div>
- <div style="-webkit-align-self: flex-end"></div>
- <div style="-webkit-align-self: baseline"></div>
- <div style="-webkit-align-self: stretch"></div>
+ <div class="align-self-flex-start"></div>
+ <div class="align-self-center"></div>
+ <div class="align-self-flex-end"></div>
+ <div class="align-self-baseline"></div>
+ <div class="align-self-stretch"></div>
</div>
</div>
<div style="position: absolute; top: 0; left: 150px;">
<div class="flexbox column" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;">
- <div style="-webkit-align-self: flex-start"></div>
- <div style="-webkit-align-self: center"></div>
- <div style="-webkit-align-self: flex-end"></div>
- <div style="-webkit-align-self: baseline"></div>
- <div style="-webkit-align-self: stretch"></div>
+ <div class="align-self-flex-start"></div>
+ <div class="align-self-center"></div>
+ <div class="align-self-flex-end"></div>
+ <div class="align-self-baseline"></div>
+ <div class="align-self-stretch"></div>
</div>
</div>
<div style="position: absolute; top:0; left: 300px" class="vertical-lr">
<div class="flexbox column" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;">
- <div style="-webkit-align-self: flex-start"></div>
- <div style="-webkit-align-self: center"></div>
- <div style="-webkit-align-self: flex-end"></div>
- <div style="-webkit-align-self: baseline"></div>
- <div style="-webkit-align-self: flex-start"></div>
+ <div class="align-self-flex-start"></div>
+ <div class="align-self-center"></div>
+ <div class="align-self-flex-end"></div>
+ <div class="align-self-baseline"></div>
+ <div class="align-self-flex-start"></div>
</div>
</div>
<div style="position: absolute; top:0; left: 450px;" class="vertical-lr">
<div class="flexbox column" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;">
- <div style="-webkit-align-self: flex-start"></div>
- <div style="-webkit-align-self: center"></div>
- <div style="-webkit-align-self: flex-end"></div>
- <div style="-webkit-align-self: baseline"></div>
- <div style="-webkit-align-self: flex-start"></div>
+ <div class="align-self-flex-start"></div>
+ <div class="align-self-center"></div>
+ <div class="align-self-flex-end"></div>
+ <div class="align-self-baseline"></div>
+ <div class="align-self-flex-start"></div>
</div>
</div>
<div style="height: 20px; width: 100px; position: absolute; top: 100px; left: 0">
<div class="flexbox row" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;">
- <div style="-webkit-align-self: flex-start"></div>
- <div style="-webkit-align-self: center"></div>
- <div style="-webkit-align-self: flex-end"></div>
- <div style="-webkit-align-self: baseline"></div>
- <div style="-webkit-align-self: stretch"></div>
+ <div class="align-self-flex-start"></div>
+ <div class="align-self-center"></div>
+ <div class="align-self-flex-end"></div>
+ <div class="align-self-baseline"></div>
+ <div class="align-self-stretch"></div>
</div>
</div>
<div style="height: 20px; width: 100px; position: absolute; top: 100px; left: 150px">
<div class="flexbox row" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;">
- <div style="-webkit-align-self: flex-start"></div>
- <div style="-webkit-align-self: center"></div>
- <div style="-webkit-align-self: flex-end"></div>
- <div style="-webkit-align-self: baseline"></div>
- <div style="-webkit-align-self: stretch"></div>
+ <div class="align-self-flex-start"></div>
+ <div class="align-self-center"></div>
+ <div class="align-self-flex-end"></div>
+ <div class="align-self-baseline"></div>
+ <div class="align-self-stretch"></div>
</div>
</div>
<div style="height: 50px; width: 50px; position: absolute; top: 100px; left: 300px" class="vertical-lr">
<div class="flexbox row" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;">
- <div style="-webkit-align-self: flex-start"></div>
- <div style="-webkit-align-self: center"></div>
- <div style="-webkit-align-self: flex-end"></div>
- <div style="-webkit-align-self: baseline"></div>
- <div style="-webkit-align-self: stretch"></div>
+ <div class="align-self-flex-start"></div>
+ <div class="align-self-center"></div>
+ <div class="align-self-flex-end"></div>
+ <div class="align-self-baseline"></div>
+ <div class="align-self-stretch"></div>
</div>
</div>
<div style="height: 50px; width: 50px; position: absolute; top: 100px; left: 450px" class="vertical-lr">
<div class="flexbox row" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;">
- <div style="-webkit-align-self: flex-start"></div>
- <div style="-webkit-align-self: center"></div>
- <div style="-webkit-align-self: flex-end"></div>
- <div style="-webkit-align-self: baseline"></div>
- <div style="-webkit-align-self: stretch"></div>
+ <div class="align-self-flex-start"></div>
+ <div class="align-self-center"></div>
+ <div class="align-self-flex-end"></div>
+ <div class="align-self-baseline"></div>
+ <div class="align-self-stretch"></div>
</div>
</div>
diff --git a/LayoutTests/css3/flexbox/flex-algorithm-min-max.html b/LayoutTests/css3/flexbox/flex-algorithm-min-max.html
index 0c3318d..9273b1d 100644
--- a/LayoutTests/css3/flexbox/flex-algorithm-min-max.html
+++ b/LayoutTests/css3/flexbox/flex-algorithm-min-max.html
@@ -1,12 +1,12 @@
<!DOCTYPE html>
<html>
+<link href="resources/flexbox.css" rel="stylesheet">
<style>
body {
margin: 0;
}
.flexbox {
width: 600px;
- display: -webkit-flex;
background-color: #aaa;
position: relative;
}
@@ -24,6 +24,23 @@
.flexbox :nth-child(3) {
background-color: red;
}
+
+.flex1 {
+ -webkit-flex: 1;
+ -moz-flex: 1;
+}
+.flex2 {
+ -webkit-flex: 2;
+ -moz-flex: 2;
+}
+.flex3 {
+ -webkit-flex: 3;
+ -moz-flex: 3;
+}
+.flex1-0-0 {
+ -webkit-flex: 1 0 0px;
+ -moz-flex: 1 0 0px;
+}
</style>
<script>
if (window.testRunner)
@@ -32,73 +49,73 @@
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.flexbox')">
<div class="flexbox">
- <div data-expected-width="100" style="-webkit-flex: 1 0 0; max-width: 100px;"></div>
- <div data-expected-width="250" style="-webkit-flex: 1 0 0;"></div>
- <div data-expected-width="250" style="-webkit-flex: 1 0 0;"></div>
+ <div data-expected-width="100" class="flex1-0-0" style="max-width: 100px;"></div>
+ <div data-expected-width="250" class="flex1-0-0"></div>
+ <div data-expected-width="250" class="flex1-0-0"></div>
</div>
<!-- The first two flexitems should hit their max width and the third item fills the remaining space. -->
<div class="flexbox">
- <div data-expected-width="50" style="-webkit-flex: 1 0 0; max-width: 50px;"></div>
- <div data-expected-width="300" style="-webkit-flex: 4 0 0; max-width: 300px;"></div>
- <div data-expected-width="250" style="-webkit-flex: 1 0 0;"></div>
+ <div data-expected-width="50" class="flex1-0-0" style="max-width: 50px;"></div>
+ <div data-expected-width="300" style="-webkit-flex: 4 0 0; -moz-flex: 4 0 0; max-width: 300px;"></div>
+ <div data-expected-width="250" style="-webkit-flex: 1 0 0; -moz-flex: 1 0 0"></div>
</div>
<div class="flexbox">
- <div data-expected-width="100" style="-webkit-flex: 1 0 0; max-width: 100px;"></div>
- <div data-expected-width="300" style="-webkit-flex: 1 0 200px; max-width: 300px;"></div>
- <div data-expected-width="200" style="-webkit-flex: 1 0 0;"></div>
+ <div data-expected-width="100" class="flex1-0-0" style="max-width: 100px;"></div>
+ <div data-expected-width="300" style="-webkit-flex: 1 0 200px; -moz-flex: 1 0 200px; max-width: 300px;"></div>
+ <div data-expected-width="200" class="flex1-0-0"></div>
</div>
<!-- Test min-width. -->
<div class="flexbox">
- <div data-expected-width="350" style="-webkit-flex: 1 1 400px; min-width: 350px;"></div>
- <div data-expected-width="250" style="-webkit-flex: 1 1 400px;"></div>
+ <div data-expected-width="350" style="-webkit-flex: 1 1 400px; -moz-flex: 1 1 400px; min-width: 350px;"></div>
+ <div data-expected-width="250" style="-webkit-flex: 1 1 400px; -moz-flex: 1 1 400px"></div>
</div>
<!-- The flex items can overflow the flexbox. -->
<div class="flexbox">
- <div data-expected-width="350" style="-webkit-flex: 1 1 400px; min-width: 350px;"></div>
- <div data-expected-width="300" style="-webkit-flex: 2 0 300px; max-width: 300px;"></div>
- <div data-expected-width="0" style="-webkit-flex: 1 0 0;"></div>
+ <div data-expected-width="350" style="-webkit-flex: 1 1 400px; -moz-flex: 1 1 400px; min-width: 350px;"></div>
+ <div data-expected-width="300" style="-webkit-flex: 2 0 300px; -moz-flex: 2 0 300px; max-width: 300px;"></div>
+ <div data-expected-width="0" class="flex1-0-0"></div>
</div>
<div class="flexbox">
- <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; margin: 0 auto; max-width: 100px;"></div>
- <div data-expected-width="333" data-offset-x="100" style="-webkit-flex: 2 0 0;"></div>
- <div data-expected-width="167" data-offset-x="433" style="-webkit-flex: 1 0 0;"></div>
+ <div data-expected-width="100" data-offset-x="0" class="flex1-0-0" style="margin: 0 auto; max-width: 100px;"></div>
+ <div data-expected-width="333" data-offset-x="100" style="-webkit-flex: 2 0 0; -moz-flex: 2 0 0"></div>
+ <div data-expected-width="167" data-offset-x="433" class="flex1-0-0"></div>
</div>
<!-- min-width and max-width take priority over the preferred size. -->
<div class="flexbox">
- <div data-expected-width="500" style="-webkit-flex: 1 0 0; min-width: 300px"></div>
- <div data-expected-width="100" style="-webkit-flex: 1 0 50%; max-width: 100px"></div>
+ <div data-expected-width="500" class="flex1-0-0" style="min-width: 300px"></div>
+ <div data-expected-width="100" style="-webkit-flex: 1 0 50%; -moz-flex: 1 0 50%; max-width: 100px"></div>
</div>
<div class="flexbox" style="width: 200px">
- <div data-expected-width="150" style="-webkit-flex: 1; min-width: 150px"></div>
- <div data-expected-width="50" style="-webkit-flex: 1; max-width: 90px"></div>
+ <div data-expected-width="150" class="flex1" style="min-width: 150px"></div>
+ <div data-expected-width="50" class="flex1" style="max-width: 90px"></div>
</div>
<div class="flexbox" style="width: 200px">
- <div data-expected-width="150" style="-webkit-flex: 1; min-width: 120px"></div>
- <div data-expected-width="50" style="-webkit-flex: 1; max-width: 50px"></div>
+ <div data-expected-width="150" class="flex1" style="min-width: 120px"></div>
+ <div data-expected-width="50" class="flex1" style="max-width: 50px"></div>
</div>
<div class="flexbox" style="width: 200px">
- <div data-expected-width="100" style="-webkit-flex: 1; min-width: 100px"></div>
- <div data-expected-width="100" style="-webkit-flex: 3;"></div>
+ <div data-expected-width="100" class="flex1" style="min-width: 100px"></div>
+ <div data-expected-width="100" class="flex3"></div>
</div>
<div class="flexbox" style="width: 200px">
- <div data-expected-width="150" style="-webkit-flex: 1 50px; min-width: 100px"></div>
- <div data-expected-width="50" style="-webkit-flex: 1 100px; max-width: 50px"></div>
+ <div data-expected-width="150" style="-webkit-flex: 1 50px; -moz-flex: 1 50px; min-width: 100px"></div>
+ <div data-expected-width="50" style="-webkit-flex: 1 100px; -moz-flex: 1 100px; max-width: 50px"></div>
</div>
<div class="flexbox">
- <div data-expected-width="80" style="-webkit-flex: 1"></div>
- <div data-expected-width="160" style="-webkit-flex: 2"></div>
- <div data-expected-width="360" style="-webkit-flex: 1; min-width: 360px"></div>
+ <div data-expected-width="80" class="flex1"></div>
+ <div data-expected-width="160" class="flex2"></div>
+ <div data-expected-width="360" class="flex1" style="min-width: 360px"></div>
</div>
</body>
diff --git a/LayoutTests/css3/flexbox/flex-algorithm-with-margins.html b/LayoutTests/css3/flexbox/flex-algorithm-with-margins.html
index c99c9ec..93e8f02 100644
--- a/LayoutTests/css3/flexbox/flex-algorithm-with-margins.html
+++ b/LayoutTests/css3/flexbox/flex-algorithm-with-margins.html
@@ -1,12 +1,12 @@
<!DOCTYPE html>
<html>
+<link href="resources/flexbox.css" rel="stylesheet">
<style>
body {
margin: 0;
}
.flexbox {
width: 600px;
- display: -webkit-flex;
background-color: #aaa;
position: relative;
}
@@ -24,6 +24,27 @@
.flexbox :nth-child(3) {
background-color: red;
}
+
+.flex1 {
+ -webkit-flex: 1;
+ -moz-flex: 1;
+}
+.flex2 {
+ -webkit-flex: 2;
+ -moz-flex: 2;
+}
+.flex4 {
+ -webkit-flex: 4;
+ -moz-flex: 4;
+}
+.flex1-0-0 {
+ -webkit-flex: 1 0 0px;
+ -moz-flex: 1 0 0px;
+}
+.flex2-0-0 {
+ -webkit-flex: 2 0 0px;
+ -moz-flex: 2 0 0px;
+}
</style>
<script>
if (window.testRunner)
@@ -32,70 +53,70 @@
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.flexbox')">
<div class="flexbox">
- <div data-expected-width="200" style="-webkit-flex: 1 0 0;"></div>
- <div data-expected-width="100" data-offset-x="250" style="width: 100px; margin: 0 50px; -webkit-flex: none;"></div>
- <div data-expected-width="200" data-offset-x="400" style="-webkit-flex: 1 0 0"></div>
+ <div data-expected-width="200" class="flex1-0-0"></div>
+ <div data-expected-width="100" data-offset-x="250" class="flex-none" style="width: 100px; margin: 0 50px;"></div>
+ <div data-expected-width="200" data-offset-x="400" class="flex1-0-0"></div>
</div>
<div data-expected-height="120" class="flexbox">
- <div data-expected-width="200" data-offset-y="50" style="-webkit-flex: 1 0 0; margin: 50px 0;"></div>
- <div data-expected-width="100" data-offset-x="250" style="width: 100px; margin: 0 50px; -webkit-flex: none;"></div>
- <div data-expected-width="200" data-offset-x="400" style="-webkit-flex: 1 0 0"></div>
+ <div data-expected-width="200" data-offset-y="50" class="flex1-0-0" style="margin: 50px 0;"></div>
+ <div data-expected-width="100" data-offset-x="250" class="flex-none" style="width: 100px; margin: 0 50px"></div>
+ <div data-expected-width="200" data-offset-x="400" class="flex1-0-0"></div>
</div>
<!-- Margins set to auto get space only if there's space available after flexing. -->
<div class="flexbox">
- <div data-expected-width="200" style="-webkit-flex: 1 0 0;"></div>
- <div data-expected-width="200" data-offset-x="200" style="width: 200px; margin: 0 auto; -webkit-flex: none;"></div>
- <div data-expected-width="200" data-offset-x="400" style="-webkit-flex: 1 0 0"></div>
+ <div data-expected-width="200" class="flex1-0-0"></div>
+ <div data-expected-width="200" data-offset-x="200" class="flex-none" style="width: 200px; margin: 0 auto"></div>
+ <div data-expected-width="200" data-offset-x="400" class="flex1-0-0"></div>
</div>
<div class="flexbox">
- <div data-expected-width="100" style="-webkit-flex: 1 0 0;"></div>
- <div data-expected-width="300" data-offset-x="100" style="-webkit-flex: 2 0 100px; margin-left: auto;"></div>
- <div data-expected-width="100" data-offset-x="400" style="-webkit-flex: 1 0 0; margin-right: 100px"></div>
+ <div data-expected-width="100" class="flex1-0-0"></div>
+ <div data-expected-width="300" data-offset-x="100" style="-webkit-flex: 2 0 100px; -moz-flex: 2 0 100px; margin-left: auto;"></div>
+ <div data-expected-width="100" data-offset-x="400" class="flex1-0-0" style="margin-right: 100px"></div>
</div>
<!-- Margins set to auto don't have negative flex. -->
<div class="flexbox">
- <div data-expected-width="150" style="-webkit-flex: 1 1 300px;"></div>
- <div data-expected-width="300" data-offset-x="150" style="-webkit-flex: 1 0 300px; margin: 0 auto;"></div>
- <div data-expected-width="150" data-offset-x="450" style="-webkit-flex: 1 1 300px;"></div>
+ <div data-expected-width="150" style="-webkit-flex: 1 1 300px; -moz-flex: 1 1 300px"></div>
+ <div data-expected-width="300" data-offset-x="150" style="-webkit-flex: 1 0 300px; -moz-flex: 1 0 300px; margin: 0 auto;"></div>
+ <div data-expected-width="150" data-offset-x="450" style="-webkit-flex: 1 1 300px; -moz-flex: 1 1 300px"></div>
</div>
<div class="flexbox">
- <div data-expected-width="300px" data-offset-x="150" style="-webkit-flex: 0 0 300px; margin: 0 auto;"></div>
+ <div data-expected-width="300px" data-offset-x="150" style="-webkit-flex: 0 0 300px; -moz-flex: 0 0 300px; margin: 0 auto;"></div>
</div>
<!-- margin: auto safe centers, which means it won't overflow to before the start of the flexbox. -->
<div class="flexbox">
- <div data-expected-width="700px" data-offset-x="0" style="-webkit-flex: 0 0 700px; margin: 0 auto;"></div>
+ <div data-expected-width="700px" data-offset-x="0" style="-webkit-flex: 0 0 700px; -moz-flex: 0 0 700px; margin: 0 auto;"></div>
</div>
<div class="flexbox">
- <div data-expected-width="600px" data-offset-x="0" style="-webkit-flex: 1 0 300px; margin: 0 auto;"></div>
+ <div data-expected-width="600px" data-offset-x="0" style="-webkit-flex: 1 0 300px; -moz-flex: 1 0 300px; margin: 0 auto;"></div>
</div>
<div class="flexbox">
- <div data-expected-width="600" data-offset-x="0" style="-webkit-flex: 4; margin: 0 auto;">
+ <div data-expected-width="600" data-offset-x="0" class="flex4" style="margin: 0 auto;">
<div style="width: 100px; height: 100%;"></div>
</div>
</div>
<div class="flexbox" style="margin: 100px;">
- <div data-expected-width="300" data-offset-x="0" style="-webkit-flex: 1; margin: 0 auto;"></div>
- <div data-expected-width="300" data-offset-x="300" style="-webkit-flex: 1; margin: 0 auto;"></div>
+ <div data-expected-width="300" data-offset-x="0" class="flex1" style="margin: 0 auto;"></div>
+ <div data-expected-width="300" data-offset-x="300" class="flex1" style="margin: 0 auto;"></div>
</div>
<div class="flexbox" style="padding: 100px;">
- <div data-expected-width="300" data-offset-x="100" style="-webkit-flex: 1 0 0px; margin: 0 auto;"></div>
- <div data-expected-width="300" data-offset-x="400" style="-webkit-flex: 1 0 0em; margin: 0 auto;"></div>
+ <div data-expected-width="300" data-offset-x="100" style="-webkit-flex: 1 0 0px; -moz-flex: 1 0 0px; margin: 0 auto;"></div>
+ <div data-expected-width="300" data-offset-x="400" style="-webkit-flex: 1 0 0em; -moz-flex: 1 0 0em; margin: 0 auto;"></div>
</div>
<div class="flexbox">
- <div data-expected-width="75" data-offset-x="0" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div>
- <div data-expected-width="350" data-offset-x="75" style="-webkit-flex: 2 0 0; padding: 0 100px;"></div>
- <div data-expected-width="75" data-offset-x="525" style="-webkit-flex: 1 0 0; margin-left: 100px;"></div>
+ <div data-expected-width="75" data-offset-x="0" class="flex1-0-0" style="margin: 0 auto;"></div>
+ <div data-expected-width="350" data-offset-x="75" class="flex2-0-0" style="padding: 0 100px;"></div>
+ <div data-expected-width="75" data-offset-x="525" class="flex1-0-0" style="margin-left: 100px;"></div>
</div>
</body>
diff --git a/LayoutTests/css3/flexbox/flex-algorithm.html b/LayoutTests/css3/flexbox/flex-algorithm.html
index 808f8b6..31e93ae 100644
--- a/LayoutTests/css3/flexbox/flex-algorithm.html
+++ b/LayoutTests/css3/flexbox/flex-algorithm.html
@@ -1,12 +1,12 @@
<!DOCTYPE html>
<html>
+<link href="resources/flexbox.css" rel="stylesheet">
<style>
body {
margin: 0;
}
.flexbox {
width: 600px;
- display: -webkit-flex;
}
.flexbox div {
height: 20px;
@@ -22,6 +22,23 @@
.flexbox :nth-child(3) {
background-color: red;
}
+
+.flex1 {
+ -webkit-flex: 1;
+ -moz-flex: 1;
+}
+.flex2 {
+ -webkit-flex: 2;
+ -moz-flex: 2;
+}
+.flex3 {
+ -webkit-flex: 3;
+ -moz-flex: 3;
+}
+.flex1-0-0 {
+ -webkit-flex: 1 0 0px;
+ -moz-flex: 1 0 0px;
+}
</style>
<script>
if (window.testRunner)
@@ -31,166 +48,166 @@
<body onload="checkLayout('.flexbox')">
<div class="flexbox">
- <div data-expected-width="200" style="-webkit-flex: 1"></div>
- <div data-expected-width="200" style="-webkit-flex: 1"></div>
- <div data-expected-width="200" style="-webkit-flex: 1"></div>
+ <div data-expected-width="200" class="flex1"></div>
+ <div data-expected-width="200" class="flex1"></div>
+ <div data-expected-width="200" class="flex1"></div>
</div>
<div class="flexbox">
- <div data-expected-width="200" style="-webkit-flex: .5"></div>
- <div data-expected-width="200" style="-webkit-flex: .5"></div>
- <div data-expected-width="200" style="-webkit-flex: .5"></div>
+ <div data-expected-width="200" style="-webkit-flex: .5; -moz-flex: .5"></div>
+ <div data-expected-width="200" style="-webkit-flex: .5; -moz-flex: .5"></div>
+ <div data-expected-width="200" style="-webkit-flex: .5; -moz-flex: .5"></div>
</div>
<div class="flexbox">
- <div data-expected-width="300" style="-webkit-flex: 3"></div>
- <div data-expected-width="200" style="-webkit-flex: 2"></div>
- <div data-expected-width="100" style="-webkit-flex: 1"></div>
+ <div data-expected-width="300" class="flex3"></div>
+ <div data-expected-width="200" class="flex2"></div>
+ <div data-expected-width="100" class="flex1"></div>
</div>
<div class="flexbox">
- <div data-expected-width="250" style="-webkit-flex: 1"></div>
- <div data-expected-width="250" style="-webkit-flex: 1"></div>
- <div data-expected-width="100" style="width: 100px; -webkit-flex: none;"></div>
+ <div data-expected-width="250" class="flex1"></div>
+ <div data-expected-width="250" class="flex1"></div>
+ <div data-expected-width="100" class="flex-none" style="width: 100px"></div>
</div>
<div class="flexbox">
- <div data-expected-width="150" style="-webkit-flex: 1"></div>
- <div data-expected-width="150" style="-webkit-flex: 1"></div>
- <div data-expected-width="300" style="width: 50%; -webkit-flex: none;"></div>
+ <div data-expected-width="150" class="flex1"></div>
+ <div data-expected-width="150" class="flex1"></div>
+ <div data-expected-width="300" class="flex-none" style="width: 50%"></div>
</div>
<!-- The first two boxes should fill the extra 300px evenly (each gets 150px extra). -->
<div class="flexbox">
- <div data-expected-width="150" style="-webkit-flex: 1"></div>
- <div data-expected-width="350" style="-webkit-flex: 1 200px"></div>
- <div data-expected-width="100" style="width: 100px; -webkit-flex: none;"></div>
+ <div data-expected-width="150" class="flex1"></div>
+ <div data-expected-width="350" style="-webkit-flex: 1 200px; -moz-flex: 1 200px"></div>
+ <div data-expected-width="100" class="flex-none" style="width: 100px"></div>
</div>
<!-- Like the last test, except the middle box gets more space than the first box. -->
<div class="flexbox">
- <div data-expected-width="100" style="-webkit-flex: 1"></div>
- <div data-expected-width="400" style="-webkit-flex: 2 33.333333%"></div>
- <div data-expected-width="100" style="width: 100px; -webkit-flex: none;"></div>
+ <div data-expected-width="100" class="flex1"></div>
+ <div data-expected-width="400" style="-webkit-flex: 2 33.333333%; -moz-flex: 2 33.333333%"></div>
+ <div data-expected-width="100" class="flex-none" style="width: 100px"></div>
</div>
<!-- Test some negative flexing. -->
<div class="flexbox">
- <div data-expected-width="200" style="-webkit-flex: 1 1 300px"></div>
- <div data-expected-width="200" style="-webkit-flex: 2 1 300px"></div>
- <div data-expected-width="200" style="-webkit-flex: 3 1 300px"></div>
+ <div data-expected-width="200" style="-webkit-flex: 1 1 300px; -moz-flex: 1 1 300px"></div>
+ <div data-expected-width="200" style="-webkit-flex: 2 1 300px; -moz-flex: 2 1 300px"></div>
+ <div data-expected-width="200" style="-webkit-flex: 3 1 300px; -moz-flex: 3 1 300px"></div>
</div>
<div class="flexbox">
- <div data-expected-width="250" style="-webkit-flex: 1 1 300px"></div>
- <div data-expected-width="150" style="-webkit-flex: 2 3 300px"></div>
- <div data-expected-width="200" style="width: 200px; -webkit-flex: none;"></div>
+ <div data-expected-width="250" style="-webkit-flex: 1 1 300px; -moz-flex: 1 1 300px"></div>
+ <div data-expected-width="150" style="-webkit-flex: 2 3 300px; -moz-flex: 2 3 300px"></div>
+ <div data-expected-width="200" class="flex-none" style="width: 200px"></div>
</div>
<div class="flexbox">
- <div data-expected-width="50" style="-webkit-flex: 1 1 100px"></div>
- <div data-expected-width="250" style="-webkit-flex: 1 1 500px"></div>
- <div data-expected-width="300" style="width: 300px; -webkit-flex: none"></div>
+ <div data-expected-width="50" style="-webkit-flex: 1 1 100px; -moz-flex: 1 1 100px"></div>
+ <div data-expected-width="250" style="-webkit-flex: 1 1 500px; -moz-flex: 1 1 500px"></div>
+ <div data-expected-width="300" class="flex-none" style="width: 300px"></div>
</div>
<div class="flexbox">
- <div data-expected-width="50" style="-webkit-flex: 1 1 100px"></div>
- <div data-expected-width="250" style="-webkit-flex: 1 1 500px; margin-right: 300px;"></div>
+ <div data-expected-width="50" style="-webkit-flex: 1 1 100px; -moz-flex: 1 1 100px"></div>
+ <div data-expected-width="250" style="-webkit-flex: 1 1 500px; -moz-flex: 1 1 500px; margin-right: 300px;"></div>
</div>
<div class="flexbox">
- <div data-expected-width="50" style="-webkit-flex: 1 1 100px"></div>
- <div data-expected-width="550" style="-webkit-flex: 1 1 500px; padding-left: 300px;"></div>
+ <div data-expected-width="50" style="-webkit-flex: 1 1 100px; -moz-flex: 1 1 100px"></div>
+ <div data-expected-width="550" style="-webkit-flex: 1 1 500px; -moz-flex: 1 1 500px; padding-left: 300px;"></div>
</div>
<div class="flexbox">
- <div data-expected-width="50" style="-webkit-flex: 1 1 100px"></div>
- <div data-expected-width="550" style="-webkit-flex: 1 1 500px; border-left: 200px dashed orange; border-right: 100px dashed orange;"></div>
+ <div data-expected-width="50" style="-webkit-flex: 1 1 100px; -moz-flex: 1 1 100px"></div>
+ <div data-expected-width="550" style="-webkit-flex: 1 1 500px; -moz-flex: 1 1 500px; border-left: 200px dashed orange; border-right: 100px dashed orange;"></div>
</div>
<!-- Test some overflow cases. -->
<div class="flexbox">
- <div data-expected-width="600" style="-webkit-flex: 0 100000000000000000000000000000000000000 600px"></div>
- <div data-expected-width="600" style="-webkit-flex: 0 100000000000000000000000000000000000000 600px"></div>
+ <div data-expected-width="600" style="-webkit-flex: 0 100000000000000000000000000000000000000 600px; -moz-flex: 0 100000000000000000000000000000000000000 600px"></div>
+ <div data-expected-width="600" style="-webkit-flex: 0 100000000000000000000000000000000000000 600px; -moz-flex: 0 100000000000000000000000000000000000000 600px"></div>
</div>
<div class="flexbox">
- <div data-expected-width="600" style="-webkit-flex: 100000000000000000000000000000000000000 0 600px"></div>
- <div data-expected-width="600" style="-webkit-flex: 0 100000000000000000000000000000000000000 600px"></div>
- <div data-expected-width="0" style="-webkit-flex: 1 1 100000000000000000000000000000000000000px"></div>
+ <div data-expected-width="600" style="-webkit-flex: 100000000000000000000000000000000000000 0 600px; -moz-flex: 100000000000000000000000000000000000000 0 600px"></div>
+ <div data-expected-width="600" style="-webkit-flex: 0 100000000000000000000000000000000000000 600px; -moz-flex: 0 100000000000000000000000000000000000000 600px"></div>
+ <div data-expected-width="0" style="-webkit-flex: 1 1 100000000000000000000000000000000000000px; -moz-flex: 1 1 100000000000000000000000000000000000000px"></div>
</div>
<!-- Test flexitem borders. -->
<div class="flexbox">
- <div data-expected-width="250" style="-webkit-flex: 1; border-left: 150px solid black"></div>
- <div data-expected-width="250" style="-webkit-flex: 1 0 0px; border-right: 150px solid orange"></div>
- <div data-expected-width="100" style="-webkit-flex: 1 0 0px"></div>
+ <div data-expected-width="250" class="flex1" style="border-left: 150px solid black"></div>
+ <div data-expected-width="250" class="flex1-0-0" style="border-right: 150px solid orange"></div>
+ <div data-expected-width="100" class="flex1-0-0"></div>
</div>
<div class="flexbox">
<div data-expected-width="300" style="width: 100px; border: 100px solid black; -webkit-flex: none;"></div>
- <div data-expected-width="200" style="-webkit-flex: 2"></div>
- <div data-expected-width="100" style="-webkit-flex: 1"></div>
+ <div data-expected-width="200" class="flex2"></div>
+ <div data-expected-width="100" class="flex1"></div>
</div>
<!-- Test flexitem padding. -->
<div class="flexbox">
- <div data-expected-width="250" style="-webkit-flex: 1; padding-left: 150px"></div>
- <div data-expected-width="250" style="-webkit-flex: 1 0 0px; padding-right: 150px"></div>
- <div data-expected-width="100" style="-webkit-flex: 1 0 0px"></div>
+ <div data-expected-width="250" class="flex1" style="padding-left: 150px"></div>
+ <div data-expected-width="250" class="flex1-0-0" style="padding-right: 150px"></div>
+ <div data-expected-width="100" class="flex1-0-0"></div>
</div>
<div class="flexbox">
- <div data-expected-width="300" style="width: 100px; padding: 100px; -webkit-flex: none;"></div>
- <div data-expected-width="200" style="-webkit-flex: 2"></div>
- <div data-expected-width="100" style="-webkit-flex: 1"></div>
+ <div data-expected-width="300" class="flex-none" style="width: 100px; padding: 100px"></div>
+ <div data-expected-width="200" class="flex2"></div>
+ <div data-expected-width="100" class="flex1"></div>
</div>
<div class="flexbox">
- <div data-expected-width="200" style="-webkit-flex: 1; padding-left: 25%"></div>
- <div data-expected-width="150" style="-webkit-flex: 3;"></div>
- <div data-expected-width="250" style="width: 100px; padding-right: 25%; -webkit-flex: none;"></div>
+ <div data-expected-width="200" class="flex1" style="padding-left: 25%"></div>
+ <div data-expected-width="150" class="flex3"></div>
+ <div data-expected-width="250" class="flex-none" style="width: 100px; padding-right: 25%"></div>
</div>
<div class="flexbox">
- <div data-expected-width="200" style="-webkit-flex: 1; padding-left: 50px; border-right: 50px solid black"></div>
- <div data-expected-width="250" style="-webkit-flex: 2; border-right: 50px solid orange"></div>
- <div data-expected-width="150" style="-webkit-flex: 1; padding-right: 50px;"></div>
+ <div data-expected-width="200" class="flex1" style="padding-left: 50px; border-right: 50px solid black"></div>
+ <div data-expected-width="250" class="flex2" style="border-right: 50px solid orange"></div>
+ <div data-expected-width="150" class="flex1" style="padding-right: 50px;"></div>
</div>
<!-- Test items with an intrinsic size. -->
<div class="flexbox">
- <div data-expected-width="120" style="-webkit-flex: 1">
+ <div data-expected-width="120" class="flex1">
<div style="width: 100px; height: 100%;"></div>
</div>
- <div data-expected-width="240" style="-webkit-flex: 2"></div>
- <div data-expected-width="240" style="-webkit-flex: 2"></div>
+ <div data-expected-width="240" class="flex2"></div>
+ <div data-expected-width="240" class="flex2"></div>
</div>
<div class="flexbox">
- <div data-expected-width="200" style="-webkit-flex: 1 0 0">
+ <div data-expected-width="200" class="flex1-0-0">
<div style="width: 100px; height: 100%;"></div>
</div>
- <div data-expected-width="200" style="-webkit-flex: 1"></div>
- <div data-expected-width="200" style="-webkit-flex: 1"></div>
+ <div data-expected-width="200" class="flex1"></div>
+ <div data-expected-width="200" class="flex1"></div>
</div>
<div class="flexbox">
- <div data-expected-width="200" style="-webkit-flex: auto">
+ <div data-expected-width="200" class="flex-auto">
<div style="width: 100px;"></div>
</div>
- <div data-expected-width="100" style="-webkit-flex: auto"></div>
- <div data-expected-width="300" style="-webkit-flex: auto">
+ <div data-expected-width="100" class="flex-auto"></div>
+ <div data-expected-width="300" class="flex-auto">
<div style="width: 200px;"></div>
</div>
</div>
<!-- Test border/padding/margin on the flexbox itself. -->
<div data-expected-width="830" style="border: 10px solid; display: inline-block;">
- <div data-expected-width="700" style="display: -webkit-flex; padding-left: 10px; padding-right: 20px; border-left: 30px solid; border-right: 40px solid; margin-left: 50px; margin-right:60px;" class="flexbox ">
- <div data-offset-x="100" data-expected-width="200" style="-webkit-flex: 1"></div>
- <div data-offset-x="300" data-expected-width="200" style="-webkit-flex: 1"></div>
- <div data-offset-x="500" data-expected-width="200" style="-webkit-flex: 1"></div>
+ <div data-expected-width="700" style="padding-left: 10px; padding-right: 20px; border-left: 30px solid; border-right: 40px solid; margin-left: 50px; margin-right:60px;" class="flexbox">
+ <div data-offset-x="100" data-expected-width="200" class="flex1"></div>
+ <div data-offset-x="300" data-expected-width="200" class="flex1"></div>
+ <div data-offset-x="500" data-expected-width="200" class="flex1"></div>
</div>
</div>
diff --git a/LayoutTests/css3/flexbox/resources/flexbox.css b/LayoutTests/css3/flexbox/resources/flexbox.css
new file mode 100644
index 0000000..a8a1597
--- /dev/null
+++ b/LayoutTests/css3/flexbox/resources/flexbox.css
@@ -0,0 +1,135 @@
+.flexbox {
+ display: -webkit-flex;
+ display: -moz-flex;
+}
+.inline-flexbox {
+ display: -webkit-inline-flex;
+ display: -moz-inline-flex;
+}
+
+.flex-none {
+ -webkit-flex: none;
+ -moz-flex: none;
+}
+.flex-auto {
+ -webkit-flex: auto;
+ -moz-flex: auto;
+}
+
+.row {
+ -webkit-flex-direction: row;
+ -moz-flex-direction: row;
+}
+.row-reverse {
+ -webkit-flex-direction: row-reverse;
+ -moz-flex-direction: row-reverse;
+}
+.column {
+ -webkit-flex-direction: column;
+ -moz-flex-direction: column;
+}
+.column-reverse {
+ -webkit-flex-direction: column-reverse;
+ -moz-flex-direction: column-reverse;
+}
+
+.wrap {
+ -webkit-flex-wrap: wrap;
+ -moz-flex-wrap: wrap;
+}
+.wrap-reverse {
+ -webkit-flex-wrap: wrap-reverse;
+ -moz-flex-wrap: wrap-reverse;
+}
+
+.align-content-flex-start {
+ -webkit-align-content: flex-start;
+ -moz-align-content: flex-start;
+}
+.align-content-flex-end {
+ -webkit-align-content: flex-end;
+ -moz-align-content: flex-end;
+}
+.align-content-center {
+ -webkit-align-content: center;
+ -moz-align-content: center;
+}
+.align-content-space-between {
+ -webkit-align-content: space-between;
+ -moz-align-content: space-between;
+}
+.align-content-space-around {
+ -webkit-align-content: space-around;
+ -moz-align-content: space-around;
+}
+.align-content-stretch {
+ -webkit-align-content: stretch;
+ -moz-align-content: stretch;
+}
+
+.align-items-flex-start {
+ -webkit-align-items: flex-start;
+ -moz-align-items: flex-start;
+}
+.align-items-flex-end {
+ -webkit-align-items: flex-end;
+ -moz-align-items: flex-end;
+}
+.align-items-center {
+ -webkit-align-items: center;
+ -moz-align-items: center;
+}
+.align-items-baseline {
+ -webkit-align-items: baseline;
+ -moz-align-items: baseline;
+}
+.align-items-stretch {
+ -webkit-align-items: stretch;
+ -moz-align-items: stretch;
+}
+
+.align-self-auto {
+ -webkit-align-items: auto;
+ -moz-align-items: auto;
+}
+.align-self-flex-start {
+ -webkit-align-items: flex-start;
+ -moz-align-items: flex-start;
+}
+.align-self-flex-end {
+ -webkit-align-items: flex-end;
+ -moz-align-items: flex-end;
+}
+.align-self-center {
+ -webkit-align-items: center;
+ -moz-align-items: center;
+}
+.align-self-baseline {
+ -webkit-align-items: baseline;
+ -moz-align-items: baseline;
+}
+.align-self-stretch {
+ -webkit-align-items: stretch;
+ -moz-align-items: stretch;
+}
+
+.justify-content-flex-start {
+ -webkit-justify-content: flex-start;
+ -moz-justify-content: flex-start;
+}
+.justify-content-flex-end {
+ -webkit-justify-content: flex-end;
+ -moz-justify-content: flex-end;
+}
+.justify-content-center {
+ -webkit-justify-content: center;
+ -moz-justify-content: center;
+}
+.justify-content-space-between {
+ -webkit-justify-content: space-between;
+ -moz-justify-content: space-between;
+}
+.justify-content-space-around {
+ -webkit-justify-content: space-around;
+ -moz-justify-content: space-around;
+}
