Convert some flexbox tests to run in mozilla
authortony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 5 Oct 2012 04:37:39 +0000 (04:37 +0000)
committertony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 5 Oct 2012 04:37:39 +0000 (04:37 +0000)
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: https://svn.webkit.org/repository/webkit/trunk@130457 268f45cc-cd09-0410-ab3c-d52691b4dbfc

20 files changed:
LayoutTests/ChangeLog
LayoutTests/css3/flexbox/align-absolute-child.html
LayoutTests/css3/flexbox/align-baseline-expected.html
LayoutTests/css3/flexbox/align-baseline.html
LayoutTests/css3/flexbox/anonymous-block-merge-crash.html
LayoutTests/css3/flexbox/anonymous-block.html
LayoutTests/css3/flexbox/auto-height-dynamic.html
LayoutTests/css3/flexbox/auto-margins.html
LayoutTests/css3/flexbox/box-sizing-min-max-sizes.html
LayoutTests/css3/flexbox/box-sizing.html
LayoutTests/css3/flexbox/child-overflow-expected.html
LayoutTests/css3/flexbox/child-overflow.html
LayoutTests/css3/flexbox/columns-auto-size.html
LayoutTests/css3/flexbox/columns-height-set-via-top-bottom.html
LayoutTests/css3/flexbox/content-height-with-scrollbars.html
LayoutTests/css3/flexbox/cross-axis-scrollbar.html
LayoutTests/css3/flexbox/flex-algorithm-min-max.html
LayoutTests/css3/flexbox/flex-algorithm-with-margins.html
LayoutTests/css3/flexbox/flex-algorithm.html
LayoutTests/css3/flexbox/resources/flexbox.css [new file with mode: 0644]

index c6bc7a8..a0d6e34 100644 (file)
@@ -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.
index 929843d..6860c21 100644 (file)
@@ -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 @@ body {
 }
 .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 @@ body {
     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 @@ body {
     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 {
 
 <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 @@ body {
 </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 @@ body {
     <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 @@ body {
   <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 @@ for (key in beforePosition)
     shouldBe('beforePosition[key]', 'afterPosition[key]');
 </script>
 </body>
+</html>
index 84020c5..074433d 100644 (file)
@@ -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>
index a4faa56..2073104 100644 (file)
@@ -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>
index 64b00ee..05d3a85 100644 (file)
@@ -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()
index 53ea868..2c7986b 100644 (file)
@@ -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>
index 31cb047..583bd26 100644 (file)
@@ -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 @@ if (window.testRunner)
 <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>
 
index ca98b81..b63e3ca 100644 (file)
@@ -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; }
 <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>
index b49a65a..647680c 100644 (file)
@@ -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)
index bcf3d3a..f6242da 100644 (file)
@@ -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 @@ All blue boxes are 100x100px with box-sizing: border-box and 2px border (4px bor
 </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>
index 2581602..c50de88 100644 (file)
@@ -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 {
index fdd267a..4888d6e 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+<link href="resources/flexbox.css" rel="stylesheet">
 <style>
 .container {
     display: inline-block;
     -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 @@ writingModes.forEach(function(writingMode) {
         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> ";
     });
index 1d27988..88defaf 100644 (file)
@@ -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 @@ if (window.testRunner)
 </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>
index 60ab86d..7d3098d 100644 (file)
@@ -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 @@ if (window.testRunner)
 <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>
index c023aa8..52ef3f3 100644 (file)
@@ -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>
 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>
index b206081..ffc6fd8 100644 (file)
@@ -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 @@ body {
     -webkit-writing-mode: vertical-lr;
 }
 
-.column {
-    -webkit-flex-direction: column;
-}
-
 .column > div {
     background-color: green;
     width: 100px;
@@ -32,6 +28,7 @@ body {
 .row > div {
     background-color: green;
     -webkit-flex: 1;
+    -moz-flex: 1;
     height: 50px;
     min-height: 0;
 }
@@ -43,6 +40,7 @@ body {
 
 .vertical-lr > .row > div {
     -webkit-flex: 1;
+    -moz-flex: 1;
     width: 100px;
 }
 
@@ -56,81 +54,81 @@ This test passes if no red is showing.
 
 <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>
 
index 0c3318d..9273b1d 100644 (file)
@@ -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 @@ body {
 .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 @@ if (window.testRunner)
 <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>
index c99c9ec..93e8f02 100644 (file)
@@ -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 @@ body {
 .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 @@ if (window.testRunner)
 <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>
index 808f8b6..31e93ae 100644 (file)
@@ -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 @@ body {
 .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 @@ if (window.testRunner)
 <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 (file)
index 0000000..a8a1597
--- /dev/null
@@ -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;
+}