Implement new flex property and deprecate flex function
authortony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 3 Apr 2012 22:34:03 +0000 (22:34 +0000)
committertony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 3 Apr 2012 22:34:03 +0000 (22:34 +0000)
https://bugs.webkit.org/show_bug.cgi?id=82128

Reviewed by Ojan Vafai.

Source/WebCore:

No new tests. Tests were updated to use the new syntax and they should
all pass.

* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::preferredFlexLengthForChild): Grab the
preferred size and if it's auto, fall back to width or height.
(WebCore::RenderFlexibleBox::preferredMainAxisContentExtentForChild):
(WebCore::RenderFlexibleBox::positiveFlexForChild): Use the value from the flex property.
(WebCore::RenderFlexibleBox::negativeFlexForChild): Use the value from the flex property.
(WebCore::RenderFlexibleBox::computeMainAxisPreferredSizes):
* rendering/RenderFlexibleBox.h:

LayoutTests:

Update tests to use the -webkit-flex: propery instead of the function.
In most cases this was just a simple find & replace, but in a few cases
we had to clear the flex value.

* css3/flexbox/auto-height-dynamic.html:
* css3/flexbox/child-overflow.html:
* css3/flexbox/columns-auto-size.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/flex-align-column.html:
* css3/flexbox/flex-align-max.html:
* css3/flexbox/flex-align-percent-height.html:
* css3/flexbox/flex-align-stretch.html:
* css3/flexbox/flex-align-vertical-writing-mode.html:
* css3/flexbox/flex-align.html:
* css3/flexbox/flex-flow-border.html:
* css3/flexbox/flex-flow-margins-auto-size-expected.txt: This test had expected failures that needed to be updated.
* css3/flexbox/flex-flow-margins-auto-size.html:
* css3/flexbox/flex-flow-margins.html:
* css3/flexbox/flex-flow-overflow.html:
* css3/flexbox/flex-flow-padding.html:
* css3/flexbox/flex-flow.html:
* css3/flexbox/flex-no-flex.html:
* css3/flexbox/flex-order.html:
* css3/flexbox/flex-pack.html:
* css3/flexbox/line-wrapping.html:
* css3/flexbox/multiline-align.html:
* css3/flexbox/multiline-line-pack-horizontal-column.html:
* css3/flexbox/multiline-reverse-wrap-baseline.html:
* css3/flexbox/multiline-reverse-wrap-overflow.html:
* css3/flexbox/multiline.html:
* css3/flexbox/orthogonal-flex-directions.html:
* css3/flexbox/position-absolute-child.html:
* css3/flexbox/repaint-rtl-column.html:
* css3/flexbox/repaint.html:
* css3/flexbox/writing-modes.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@113097 268f45cc-cd09-0410-ab3c-d52691b4dbfc

38 files changed:
LayoutTests/ChangeLog
LayoutTests/css3/flexbox/auto-height-dynamic.html
LayoutTests/css3/flexbox/child-overflow.html
LayoutTests/css3/flexbox/columns-auto-size.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/flex-align-column.html
LayoutTests/css3/flexbox/flex-align-max.html
LayoutTests/css3/flexbox/flex-align-percent-height.html
LayoutTests/css3/flexbox/flex-align-stretch.html
LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html
LayoutTests/css3/flexbox/flex-align.html
LayoutTests/css3/flexbox/flex-flow-border.html
LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt
LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html
LayoutTests/css3/flexbox/flex-flow-margins.html
LayoutTests/css3/flexbox/flex-flow-overflow.html
LayoutTests/css3/flexbox/flex-flow-padding.html
LayoutTests/css3/flexbox/flex-flow.html
LayoutTests/css3/flexbox/flex-no-flex.html
LayoutTests/css3/flexbox/flex-order.html
LayoutTests/css3/flexbox/flex-pack.html
LayoutTests/css3/flexbox/line-wrapping.html
LayoutTests/css3/flexbox/multiline-align.html
LayoutTests/css3/flexbox/multiline-line-pack-horizontal-column.html
LayoutTests/css3/flexbox/multiline-reverse-wrap-baseline.html
LayoutTests/css3/flexbox/multiline-reverse-wrap-overflow.html
LayoutTests/css3/flexbox/multiline.html
LayoutTests/css3/flexbox/orthogonal-flex-directions.html
LayoutTests/css3/flexbox/position-absolute-child.html
LayoutTests/css3/flexbox/repaint-rtl-column.html
LayoutTests/css3/flexbox/repaint.html
LayoutTests/css3/flexbox/writing-modes.html
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderFlexibleBox.cpp
Source/WebCore/rendering/RenderFlexibleBox.h

index 8bab021..d5cffae 100644 (file)
@@ -1,3 +1,49 @@
+2012-04-03  Tony Chang  <tony@chromium.org>
+
+        Implement new flex property and deprecate flex function
+        https://bugs.webkit.org/show_bug.cgi?id=82128
+
+        Reviewed by Ojan Vafai.
+
+        Update tests to use the -webkit-flex: propery instead of the function.
+        In most cases this was just a simple find & replace, but in a few cases
+        we had to clear the flex value.
+
+        * css3/flexbox/auto-height-dynamic.html:
+        * css3/flexbox/child-overflow.html:
+        * css3/flexbox/columns-auto-size.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/flex-align-column.html:
+        * css3/flexbox/flex-align-max.html:
+        * css3/flexbox/flex-align-percent-height.html:
+        * css3/flexbox/flex-align-stretch.html:
+        * css3/flexbox/flex-align-vertical-writing-mode.html:
+        * css3/flexbox/flex-align.html:
+        * css3/flexbox/flex-flow-border.html:
+        * css3/flexbox/flex-flow-margins-auto-size-expected.txt: This test had expected failures that needed to be updated.
+        * css3/flexbox/flex-flow-margins-auto-size.html:
+        * css3/flexbox/flex-flow-margins.html:
+        * css3/flexbox/flex-flow-overflow.html:
+        * css3/flexbox/flex-flow-padding.html:
+        * css3/flexbox/flex-flow.html:
+        * css3/flexbox/flex-no-flex.html:
+        * css3/flexbox/flex-order.html:
+        * css3/flexbox/flex-pack.html:
+        * css3/flexbox/line-wrapping.html:
+        * css3/flexbox/multiline-align.html:
+        * css3/flexbox/multiline-line-pack-horizontal-column.html:
+        * css3/flexbox/multiline-reverse-wrap-baseline.html:
+        * css3/flexbox/multiline-reverse-wrap-overflow.html:
+        * css3/flexbox/multiline.html:
+        * css3/flexbox/orthogonal-flex-directions.html:
+        * css3/flexbox/position-absolute-child.html:
+        * css3/flexbox/repaint-rtl-column.html:
+        * css3/flexbox/repaint.html:
+        * css3/flexbox/writing-modes.html:
+
 2012-04-03  Ami Fischman  <fischman@chromium.org>
 
         http/tests/media/video-cancel-load.html is flaky on linux
index 98cd1e1..54c1454 100644 (file)
@@ -20,18 +20,18 @@ if (window.layoutTestController)
 <body onload="checkFlexBoxen()">
 
 <div class="flexbox" data-expected-height=0>
-    <div class="flexitem" data-expected-height=0 style="height: 100px"></div>
+    <div class="flexitem" data-expected-height=0 style="-webkit-flex: 100px"></div>
 </div>
 
 <div class="flexbox" data-expected-height=0>
-    <div class="flexitem2" data-expected-height=0 style="height: 100px"></div>
+    <div class="flexitem2" data-expected-height=0 style="-webkit-flex: 100px"></div>
 </div>
 
 <script>
 document.querySelector('.flexitem').offsetHeight;
 document.querySelector('.flexitem2').offsetHeight;
-document.querySelector('.flexitem').style.height = "-webkit-flex(1)";
-document.querySelector('.flexitem2').style.height = "-webkit-flex(1 auto)";
+document.querySelector('.flexitem').style.webkitFlex = "1";
+document.querySelector('.flexitem2').style.webkitFlex = "1 auto";
 </script>
 
 </body>
index c198bee..f40ba38 100644 (file)
@@ -76,7 +76,7 @@ writingModes.forEach(function(writingMode) {
         document.body.innerHTML +=
             "<div class='" + containerClass + "'>" +
             "<div class='" + flexboxClass + "'>" +
-            "<div style='width: -webkit-flex(0 1 auto); height: -webkit-flex(0 1 auto)'><div></div></div>" +
+            "<div style='-webkit-flex: 0 1 auto; -webkit-flex: 0 1 auto'><div></div></div>" +
             "</div>" +
             "</div> ";
     });
index 05e4aec..db753c8 100644 (file)
@@ -49,21 +49,21 @@ if (window.layoutTestController)
 <script src="resources/flexbox.js"></script>
 <body onload="checkFlexBoxen()">
 <div class="flexbox horizontal">
-  <div data-expected-height="10" data-offset-y="0" style="height: -webkit-flex(1 0 10px)"></div>
+  <div data-expected-height="10" data-offset-y="0" style="-webkit-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="height: -webkit-flex(1)"></div>
+  <div data-expected-height="0" data-offset-y="0" style="-webkit-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="height: -webkit-flex(1 auto)"><div style="height: 10px"></div></div>
-  <div data-expected-height="0" data-offset-y="20" style="height: -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"><div style="height: 10px"></div></div>
+  <div data-expected-height="0" data-offset-y="20" style="-webkit-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="height: -webkit-flex(1 0 10px); margin-top: 10px;"></div>
+  <div data-expected-height="10" data-offset-y="10" style="-webkit-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>
@@ -71,29 +71,29 @@ if (window.layoutTestController)
 <!-- Same as previous test case but with a flex-pack set.  Since there's no
      available space, it should layout the same. -->
 <div class="flexbox horizontal" style="-webkit-flex-pack: justify">
-  <div data-expected-height="10" data-offset-y="10" style="height: -webkit-flex(1 0 10px); margin-top: 10px;"></div>
+  <div data-expected-height="10" data-offset-y="10" style="-webkit-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="height: -webkit-flex(0 1 auto)"><div style="height: 10px"></div></div>
-  <div data-expected-height="10" data-offset-y="10" style="height: -webkit-flex(0 2 auto)"><div style="height: 10px"></div></div>
+  <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>
 
 <div class="flexbox horizontal" style="min-height: 10px" data-expected-height="20">
-  <div data-expected-height="10" data-offset-y="0" style="height: -webkit-flex(0 1 auto)"><div style="height: 10px"></div></div>
-  <div data-expected-height="10" data-offset-y="10" style="height: -webkit-flex(0 2 auto)"><div style="height: 10px"></div></div>
+  <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>
 
 <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="height: -webkit-flex(0 1 auto)"><div style="height: 10px"></div></div>
-  <div data-expected-height="8" data-offset-y="9" style="height: -webkit-flex(0 2 auto)"><div style="height: 10px"></div></div>
+  <div data-expected-height="9" data-offset-y="0" style="-webkit-flex: 0 1 auto"><div style="height: 10px"></div></div>
+  <div data-expected-height="8" data-offset-y="9" style="-webkit-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="height: -webkit-flex(0 1 auto)"><div style="height: 20px"></div></div>
-  <div data-expected-height="15" data-offset-y="16" style="height: -webkit-flex(0 1 auto)"><div style="height: 20px"></div></div>
+  <div data-expected-height="15" data-offset-y="1" style="-webkit-flex: 0 1 auto"><div style="height: 20px"></div></div>
+  <div data-expected-height="15" data-offset-y="16" style="-webkit-flex: 0 1 auto"><div style="height: 20px"></div></div>
 </div>
 
 <div class="flexbox horizontal">
@@ -101,17 +101,17 @@ if (window.layoutTestController)
 </div>
 
 <div class="flexbox vertical">
-  <div data-expected-width="10" data-offset-x="20" style="width: -webkit-flex(1 0 10px)"></div>
+  <div data-expected-width="10" data-offset-x="20" style="-webkit-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="width: -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="width: -webkit-flex(1)"></div>
+  <div data-expected-width="0" data-offset-x="20" style="-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 data-expected-width="10" data-offset-x="10" style="width: 10px;"></div>
-  <div data-expected-width="10" data-offset-x="0" style="width: -webkit-flex(1 auto)"><div style="width: 10px"></div></div>
+  <div data-expected-width="10" data-offset-x="0" style="-webkit-flex: 1 auto"><div style="width: 10px"></div></div>
 </div>
 
 </body>
index 945552e..5e4945f 100644 (file)
@@ -31,7 +31,7 @@ body {
 
 .row > div {
     background-color: green;
-    width: -webkit-flex(1);
+    -webkit-flex: 1;
     height: 50px;
 }
 
@@ -41,7 +41,7 @@ body {
 }
 
 .vertical-lr > .row > div {
-    height: -webkit-flex(1);
+    -webkit-flex: 1;
     width: 100px;
 }
 
index fa575b0..3e4d722 100644 (file)
@@ -32,73 +32,73 @@ if (window.layoutTestController)
 <script src="resources/flexbox.js"></script>
 <body onload="checkFlexBoxen()">
 <div class="flexbox">
-  <div data-expected-width="100" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
-  <div data-expected-width="250" style="width: -webkit-flex(1 0 0);"></div>
-  <div data-expected-width="250" style="width: -webkit-flex(1 0 0);"></div>
+  <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>
 
 <!-- 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="width: -webkit-flex(1 0 0); max-width: 50px;"></div>
-  <div data-expected-width="300" style="width: -webkit-flex(4 0 0); max-width: 300px;"></div>
-  <div data-expected-width="250" style="width: -webkit-flex(1 0 0);"></div>
+  <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>
 
 <div class="flexbox">
-  <div data-expected-width="100" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
-  <div data-expected-width="300" style="width: -webkit-flex(1 0 200px); max-width: 300px;"></div>
-  <div data-expected-width="200" style="width: -webkit-flex(1 0 0);"></div>
+  <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>
 
 <!-- Test min-width. -->
 <div class="flexbox">
-  <div data-expected-width="350" style="width: -webkit-flex(1 1 400px); min-width: 350px;"></div>
-  <div data-expected-width="250" style="width: -webkit-flex(1 1 400px);"></div>
+  <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>
 
 <!-- The flex items can overflow the flexbox. -->
 <div class="flexbox">
-  <div data-expected-width="350" style="width: -webkit-flex(1 1 400px); min-width: 350px;"></div>
-  <div data-expected-width="300" style="width: -webkit-flex(2 0 300px); max-width: 300px;"></div>
-  <div data-expected-width="0" style="width: -webkit-flex(1 0 0);"></div>
+  <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>
 
 <div class="flexbox">
-  <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); margin: 0 auto; max-width: 100px;"></div>
-  <div data-expected-width="333" data-offset-x="100" style="width: -webkit-flex(2 0 0);"></div>
-  <div data-expected-width="167" data-offset-x="433" style="width: -webkit-flex(1 0 0);"></div>
+  <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>
 
 <!-- min-width and max-width take priority over the preferred size. -->
 <div class="flexbox">
-  <div data-expected-width="500" style="width: -webkit-flex(1 0 0); min-width: 300px"></div>
-  <div data-expected-width="100" style="width: -webkit-flex(1 0 50%); max-width: 100px"></div>
+  <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>
 
 <div class="flexbox" style="width: 200px">
-  <div data-expected-width="150" style="width: -webkit-flex(1); min-width: 150px"></div>
-  <div data-expected-width="50" style="width: -webkit-flex(1); max-width: 90px"></div>
+  <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>
 
 <div class="flexbox" style="width: 200px">
-  <div data-expected-width="150" style="width: -webkit-flex(1); min-width: 120px"></div>
-  <div data-expected-width="50" style="width: -webkit-flex(1); max-width: 50px"></div>
+  <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>
 
 <div class="flexbox" style="width: 200px">
-  <div data-expected-width="100" style="width: -webkit-flex(1); min-width: 100px"></div>
-  <div data-expected-width="100" style="width: -webkit-flex(3);"></div>
+  <div data-expected-width="100" style="-webkit-flex: 1; min-width: 100px"></div>
+  <div data-expected-width="100" style="-webkit-flex: 3;"></div>
 </div>
 
 <div class="flexbox" style="width: 200px">
-  <div data-expected-width="150" style="width: -webkit-flex(1 50px); min-width: 100px"></div>
-  <div data-expected-width="50" style="width: -webkit-flex(1 100px); max-width: 50px"></div>
+  <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>
 
 <div class="flexbox">
-  <div data-expected-width="80" style="width: -webkit-flex(1)"></div>
-  <div data-expected-width="160" style="width: -webkit-flex(2)"></div>
-  <div data-expected-width="360" style="width: -webkit-flex(1); min-width: 360px"></div>
+  <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>
 
 </body>
index 8585a8f..a736b72 100644 (file)
@@ -32,66 +32,66 @@ if (window.layoutTestController)
 <script src="resources/flexbox.js"></script>
 <body onload="checkFlexBoxen()">
 <div class="flexbox">
-  <div data-expected-width="200" style="width: -webkit-flex(1 0 0);"></div>
+  <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;"></div>
-  <div data-expected-width="200" data-offset-x="400" style="width: -webkit-flex(1 0 0)"></div>
+  <div data-expected-width="200" data-offset-x="400" style="-webkit-flex: 1 0 0"></div>
 </div>
 
 <div data-expected-height="120" class="flexbox">
-  <div data-expected-width="200" data-offset-y="50" style="width: -webkit-flex(1 0 0); margin: 50px 0;"></div>
+  <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;"></div>
-  <div data-expected-width="200" data-offset-x="400" style="width: -webkit-flex(1 0 0)"></div>
+  <div data-expected-width="200" data-offset-x="400" style="-webkit-flex: 1 0 0"></div>
 </div>
 
 <!-- Margins set to auto have a value of 0. -->
 <div class="flexbox">
-  <div data-expected-width="200" style="width: -webkit-flex(1 0 0);"></div>
+  <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;"></div>
-  <div data-expected-width="200" data-offset-x="400" style="width: -webkit-flex(1 0 0)"></div>
+  <div data-expected-width="200" data-offset-x="400" style="-webkit-flex: 1 0 0"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-width="133" style="width: -webkit-flex(1 0 0);"></div>
-  <div data-expected-width="233" data-offset-x="133" style="width: -webkit-flex(1 0 100px); margin-left: auto;"></div>
-  <div data-expected-width="133" data-offset-x="366" style="width: -webkit-flex(1 0 0); margin-right: 100px"></div>
+  <div data-expected-width="133" style="-webkit-flex: 1 0 0;"></div>
+  <div data-expected-width="233" data-offset-x="133" style="-webkit-flex: 1 0 100px; margin-left: auto;"></div>
+  <div data-expected-width="133" data-offset-x="366" style="-webkit-flex: 1 0 0; margin-right: 100px"></div>
 </div>
 
 <!-- Margins set to auto don't have negative flex either. -->
 <div class="flexbox">
-  <div data-expected-width="150" style="width: -webkit-flex(1 1 300px);"></div>
-  <div data-expected-width="300" data-offset-x="150" style="width: -webkit-flex(1 0 300px); margin: 0 auto;"></div>
-  <div data-expected-width="150" data-offset-x="450" style="width: -webkit-flex(1 1 300px);"></div>
+  <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>
 
 <!-- Margins set to auto don't center in flexboxen. -->
 <div class="flexbox">
-  <div data-expected-width="300px" data-offset-x="0" style="width: -webkit-flex(0 0 300px); margin: 0 auto;"></div>
+  <div data-expected-width="300px" data-offset-x="0" style="-webkit-flex: 0 0 300px; margin: 0 auto;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-width="600px" data-offset-x="0" style="width: -webkit-flex(1 0 300px); margin: 0 auto;"></div>
+  <div data-expected-width="600px" data-offset-x="0" style="-webkit-flex: 1 0 300px; margin: 0 auto;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-width="600" data-offset-x="0" style="width: -webkit-flex(4); margin: 0 auto;">
+  <div data-expected-width="600" data-offset-x="0" style="-webkit-flex: 4; 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="width: -webkit-flex(1); margin: 0 auto;"></div>
-  <div data-expected-width="300" data-offset-x="300" style="width: -webkit-flex(1); margin: 0 auto;"></div>
+  <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>
 
 <div class="flexbox" style="padding: 100px;">
-  <div data-expected-width="300" data-offset-x="100" style="width: -webkit-flex(1 0 0px); margin: 0 auto;"></div>
-  <div data-expected-width="300" data-offset-x="400" style="width: -webkit-flex(1 0 0em); margin: 0 auto;"></div>
+  <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>
 
 <div class="flexbox">
-  <div data-expected-width="75" data-offset-x="0" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
-  <div data-expected-width="350" data-offset-x="75" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
-  <div data-expected-width="75" data-offset-x="525" style="width: -webkit-flex(1 0 0); margin-left: 100px;"></div>
+  <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>
 
 </body>
index 1101634..f7d5459 100644 (file)
@@ -30,123 +30,123 @@ if (window.layoutTestController)
 <body onload="checkFlexBoxen()">
 
 <div style="display: -webkit-flexbox" class="flexbox">
-  <div data-expected-width="200" style="width: -webkit-flex(1)"></div>
-  <div data-expected-width="200" style="width: -webkit-flex(1)"></div>
-  <div data-expected-width="200" style="width: -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" style="-webkit-flex: 1"></div>
 </div>
 
 <div style="display: -webkit-flexbox" class="flexbox">
-  <div data-expected-width="200" style="width: -webkit-flex(.5)"></div>
-  <div data-expected-width="200" style="width: -webkit-flex(.5)"></div>
-  <div data-expected-width="200" style="width: -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"></div>
 </div>
 
 <div style="display: -webkit-flexbox" class="flexbox">
-  <div data-expected-width="300" style="width: -webkit-flex(3)"></div>
-  <div data-expected-width="200" style="width: -webkit-flex(2)"></div>
-  <div data-expected-width="100" style="width: -webkit-flex(1)"></div>
+  <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>
 
 <div style="display: -webkit-flexbox" class="flexbox">
-  <div data-expected-width="250" style="width: -webkit-flex(1)"></div>
-  <div data-expected-width="250" style="width: -webkit-flex(1)"></div>
+  <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"></div>
 </div>
 
 <div style="display: -webkit-flexbox" class="flexbox">
-  <div data-expected-width="150" style="width: -webkit-flex(1)"></div>
-  <div data-expected-width="150" style="width: -webkit-flex(1)"></div>
+  <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%"></div>
 </div>
 
 <!-- The first two boxes should fill the extra 300px evenly (each gets 150px extra). -->
 <div style="display: -webkit-flexbox" class="flexbox">
-  <div data-expected-width="150" style="width: -webkit-flex(1)"></div>
-  <div data-expected-width="350" style="width: -webkit-flex(1 200px)"></div>
+  <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"></div>
 </div>
 
 <!-- Like the last test, except the middle box gets more space than the first box. -->
 <div style="display: -webkit-flexbox" class="flexbox">
-  <div data-expected-width="100" style="width: -webkit-flex(1)"></div>
-  <div data-expected-width="400" style="width: -webkit-flex(2 33.333333%)"></div>
+  <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"></div>
 </div>
 
 <!-- Test some negative flexing. -->
 <div style="display: -webkit-flexbox" class="flexbox">
-  <div data-expected-width="200" style="width: -webkit-flex(1 1 300px)"></div>
-  <div data-expected-width="200" style="width: -webkit-flex(2 1 300px)"></div>
-  <div data-expected-width="200" style="width: -webkit-flex(3 1 300px)"></div>
+  <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>
 
 <div style="display: -webkit-flexbox" class="flexbox">
-  <div data-expected-width="250" style="width: -webkit-flex(1 1 300px)"></div>
-  <div data-expected-width="150" style="width: -webkit-flex(2 3 300px)"></div>
+  <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"></div>
 </div>
 
 <!-- Test flexitem borders. -->
 <div style="display: -webkit-flexbox" class="flexbox">
-  <div data-expected-width="250" style="width: -webkit-flex(1); border-left: 150px solid black"></div>
-  <div data-expected-width="250" style="width: -webkit-flex(1 0 0px); border-right: 150px solid orange"></div>
-  <div data-expected-width="100" style="width: -webkit-flex(1 0 0px)"></div>
+  <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>
 
 <div style="display: -webkit-flexbox" class="flexbox">
   <div data-expected-width="300" style="width: 100px; border: 100px solid black"></div>
-  <div data-expected-width="200" style="width: -webkit-flex(2)"></div>
-  <div data-expected-width="100" style="width: -webkit-flex(1)"></div>
+  <div data-expected-width="200" style="-webkit-flex: 2"></div>
+  <div data-expected-width="100" style="-webkit-flex: 1"></div>
 </div>
 
 <!-- Test flexitem padding. -->
 <div style="display: -webkit-flexbox" class="flexbox">
-  <div data-expected-width="250" style="width: -webkit-flex(1); padding-left: 150px"></div>
-  <div data-expected-width="250" style="width: -webkit-flex(1 0 0px); padding-right: 150px"></div>
-  <div data-expected-width="100" style="width: -webkit-flex(1 0 0px)"></div>
+  <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>
 
 <div style="display: -webkit-flexbox" class="flexbox">
   <div data-expected-width="300" style="width: 100px; padding: 100px"></div>
-  <div data-expected-width="200" style="width: -webkit-flex(2)"></div>
-  <div data-expected-width="100" style="width: -webkit-flex(1)"></div>
+  <div data-expected-width="200" style="-webkit-flex: 2"></div>
+  <div data-expected-width="100" style="-webkit-flex: 1"></div>
 </div>
 
 <div style="display: -webkit-flexbox" class="flexbox">
-  <div data-expected-width="200" style="width: -webkit-flex(1); padding-left: 25%"></div>
-  <div data-expected-width="150" style="width: -webkit-flex(3);"></div>
+  <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%"></div>
 </div>
 
 <div style="display: -webkit-flexbox" class="flexbox">
-  <div data-expected-width="200" style="width: -webkit-flex(1); padding-left: 50px; border-right: 50px solid black"></div>
-  <div data-expected-width="250" style="width: -webkit-flex(2); border-right: 50px solid orange"></div>
-  <div data-expected-width="150" style="width: -webkit-flex(1); padding-right: 50px;"></div>
+  <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>
 
 <!-- Test items with an intrinsic size. -->
 <div style="display: -webkit-flexbox" class="flexbox">
-  <div data-expected-width="120" style="width: -webkit-flex(1)">
+  <div data-expected-width="120" style="-webkit-flex: 1">
       <div style="width: 100px; height: 100%;"></div>
   </div>
-  <div data-expected-width="240" style="width: -webkit-flex(2)"></div>
-  <div data-expected-width="240" style="width: -webkit-flex(2)"></div>
+  <div data-expected-width="240" style="-webkit-flex: 2"></div>
+  <div data-expected-width="240" style="-webkit-flex: 2"></div>
 </div>
 
 <div style="display: -webkit-flexbox" class="flexbox">
-  <div data-expected-width="200" style="width: -webkit-flex(1 0 0)">
+  <div data-expected-width="200" style="-webkit-flex: 1 0 0">
       <div style="width: 100px; height: 100%;"></div>
   </div>
-  <div data-expected-width="200" style="width: -webkit-flex(1)"></div>
-  <div data-expected-width="200" style="width: -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>
 
 <!-- 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-flexbox; 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="width: -webkit-flex(1)"></div>
-      <div data-offset-x="300" data-expected-width="200" style="width: -webkit-flex(1)"></div>
-      <div data-offset-x="500" data-expected-width="200" style="width: -webkit-flex(1)"></div>
+      <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>
 </div>
 
index ee2e4b2..fb603f8 100644 (file)
@@ -45,21 +45,21 @@ if (window.layoutTestController)
 <body onload="checkFlexBoxen()">
 
 <div class="flexbox">
-    <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="height: -webkit-flex(1);"></div>
-    <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-item-align: stretch; "></div>
-    <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-item-align: start; width: 20px;"></div>
-    <div data-offset-x=580 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-item-align: end; width: 20px;"></div>
-    <div data-offset-x=290 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-item-align: center; width: 20px;"></div>
-    <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-item-align: baseline; width: 20px;"></div>
+    <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="-webkit-flex: 1;"></div>
+    <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="-webkit-flex: 1; -webkit-flex-item-align: stretch; "></div>
+    <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="-webkit-flex: 1; -webkit-flex-item-align: start; width: 20px;"></div>
+    <div data-offset-x=580 data-expected-width=20 data-expected-height=40 style="-webkit-flex: 1; -webkit-flex-item-align: end; width: 20px;"></div>
+    <div data-offset-x=290 data-expected-width=20 data-expected-height=40 style="-webkit-flex: 1; -webkit-flex-item-align: center; width: 20px;"></div>
+    <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="-webkit-flex: 1; -webkit-flex-item-align: baseline; width: 20px;"></div>
 </div>
 
 <div class="flexbox vertical">
-    <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="width: -webkit-flex(1);"></div>
-    <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="width: -webkit-flex(1); -webkit-flex-item-align: stretch; "></div>
-    <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-item-align: start; height: 20px;"></div>
-    <div data-offset-y=220 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-item-align: end; height: 20px;"></div>
-    <div data-offset-y=110 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-item-align: center; height: 20px;"></div>
-    <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-item-align: baseline; height: 20px;"></div>
+    <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="-webkit-flex: 1;"></div>
+    <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="-webkit-flex: 1; -webkit-flex-item-align: stretch; "></div>
+    <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="-webkit-flex: 1; -webkit-flex-item-align: start; height: 20px;"></div>
+    <div data-offset-y=220 data-expected-width=100 data-expected-height=20 style="-webkit-flex: 1; -webkit-flex-item-align: end; height: 20px;"></div>
+    <div data-offset-y=110 data-expected-width=100 data-expected-height=20 style="-webkit-flex: 1; -webkit-flex-item-align: center; height: 20px;"></div>
+    <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="-webkit-flex: 1; -webkit-flex-item-align: baseline; height: 20px;"></div>
 </div>
 
 </body>
index 602d605..8bff5b1 100644 (file)
@@ -36,27 +36,27 @@ if (window.layoutTestController)
 <body onload="checkFlexBoxen()">
 
 <div class="flexbox">
-  <div data-expected-height="50" style="width: -webkit-flex(1 0 0); max-height: 100px"></div>
-  <div data-expected-height="50" style="width: -webkit-flex(1 0 0); height: 50px"></div>
-  <div data-expected-height="25" style="width: -webkit-flex(1 0 0); max-height: 25px"></div>
+  <div data-expected-height="50" style="-webkit-flex: 1 0 0; max-height: 100px"></div>
+  <div data-expected-height="50" style="-webkit-flex: 1 0 0; height: 50px"></div>
+  <div data-expected-height="25" style="-webkit-flex: 1 0 0; max-height: 25px"></div>
 </div>
 
 <div class="flexbox column" style="width: 200px">
-  <div data-expected-width="150" style="height: -webkit-flex(1 0 20px); max-width: 150px"></div>
-  <div data-expected-width="100" style="height: -webkit-flex(1 0 20px); width: 100px"></div>
-  <div data-expected-width="200" style="height: -webkit-flex(1 0 20px);"></div>
+  <div data-expected-width="150" style="-webkit-flex: 1 0 20px; max-width: 150px"></div>
+  <div data-expected-width="100" style="-webkit-flex: 1 0 20px; width: 100px"></div>
+  <div data-expected-width="200" style="-webkit-flex: 1 0 20px;"></div>
 </div>
 
 <div class="flexbox vertical-rl" style="height: 60px">
-  <div data-expected-width="100" style="height: -webkit-flex(1 0 20px); max-width: 110px"></div>
-  <div data-expected-width="100" style="height: -webkit-flex(1 0 20px); width: 100px"></div>
-  <div data-expected-width="50" style="height: -webkit-flex(1 0 20px); max-width: 50px"></div>
+  <div data-expected-width="100" style="-webkit-flex: 1 0 20px; max-width: 110px"></div>
+  <div data-expected-width="100" style="-webkit-flex: 1 0 20px; width: 100px"></div>
+  <div data-expected-width="50" style="-webkit-flex: 1 0 20px; max-width: 50px"></div>
 </div>
 
 <div class="flexbox column vertical-rl" style="height: 50px">
-  <div data-expected-height="50" style="width: -webkit-flex(1 0 100px); max-height: 100px"></div>
-  <div data-expected-height="50" style="width: -webkit-flex(1 0 100px); height: 50px"></div>
-  <div data-expected-height="25" style="width: -webkit-flex(1 0 100px); max-height: 25px"></div>
+  <div data-expected-height="50" style="-webkit-flex: 1 0 100px; max-height: 100px"></div>
+  <div data-expected-height="50" style="-webkit-flex: 1 0 100px; height: 50px"></div>
+  <div data-expected-height="25" style="-webkit-flex: 1 0 100px; max-height: 25px"></div>
 </div>
 
 </body>
index e668a76..dcdafba 100644 (file)
@@ -36,8 +36,8 @@ if (window.layoutTestController)
 <body onload="checkFlexBoxen()">
 
 <div class="flexbox" style="height: 50%;">
-  <div data-expected-height="50"  data-offset-y="0" style="width: -webkit-flex(1); height: 50px;"></div>
-  <div data-expected-height="300" data-offset-y="0" style="width: -webkit-flex(1);"></div>
+  <div data-expected-height="50"  data-offset-y="0" style="-webkit-flex: 1; height: 50px;"></div>
+  <div data-expected-height="300" data-offset-y="0" style="-webkit-flex: 1;"></div>
 </div>
 
 </body>
index b73169c..93ee2a4 100644 (file)
@@ -37,22 +37,22 @@ if (window.layoutTestController)
 <script src="resources/flexbox.js"></script>
 <body onload="checkFlexBoxen()">
 <div class="flexbox" style="width: 600px">
-  <div data-expected-height="100" style="width: -webkit-flex(1 0 0); position: relative">
+  <div data-expected-height="100" style="-webkit-flex: 1 0 0; position: relative">
     <div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"></div>
   </div>
-  <div data-expected-height="100" style="width: -webkit-flex(1 0 0); height: 100px"></div>
-  <div data-expected-height="100" style="width: -webkit-flex(1 0 0); position: relative">
+  <div data-expected-height="100" style="-webkit-flex: 1 0 0; height: 100px"></div>
+  <div data-expected-height="100" style="-webkit-flex: 1 0 0; position: relative">
     <div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"></div>
   </div>
 </div>
 
 <div style="-webkit-writing-mode: horizontal-bt">
 <div class="flexbox" style="width: 600px">
-  <div data-expected-height="100" style="width: -webkit-flex(1 0 0); position: relative">
+  <div data-expected-height="100" style="-webkit-flex: 1 0 0; position: relative">
     <div data-offset-x="0" data-offset-y="0" class="absolute" style="top:0;"></div>
   </div>
-  <div data-expected-height="100" style="width: -webkit-flex(1 0 0); height: 100px"></div>
-  <div data-expected-height="100" style="width: -webkit-flex(1 0 0); position: relative">
+  <div data-expected-height="100" style="-webkit-flex: 1 0 0; height: 100px"></div>
+  <div data-expected-height="100" style="-webkit-flex: 1 0 0; position: relative">
     <div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"></div>
   </div>
 </div>
@@ -60,11 +60,11 @@ if (window.layoutTestController)
 
 <div style="-webkit-writing-mode: vertical-rl">
 <div class="flexbox" style="height: 200px">
-  <div data-expected-width="100" style="height: -webkit-flex(1 0 0); position: relative">
+  <div data-expected-width="100" style="-webkit-flex: 1 0 0; position: relative">
     <div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></div>
   </div>
-  <div data-expected-width="100" style="height: -webkit-flex(1 0 0); width: 100px"></div>
-  <div data-expected-width="100" style="height: -webkit-flex(1 0 0); position: relative">
+  <div data-expected-width="100" style="-webkit-flex: 1 0 0; width: 100px"></div>
+  <div data-expected-width="100" style="-webkit-flex: 1 0 0; position: relative">
     <div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></div>
   </div>
 </div>
@@ -72,11 +72,11 @@ if (window.layoutTestController)
 
 <div style="-webkit-writing-mode: vertical-lr">
 <div class="flexbox" style="height: 200px">
-  <div data-expected-width="100" style="height: -webkit-flex(1 0 0); position: relative">
+  <div data-expected-width="100" style="-webkit-flex: 1 0 0; position: relative">
     <div data-offset-x="50" data-offset-y="0" class="absolute" style="right:0;"></div>
   </div>
-  <div data-expected-width="100" style="height: -webkit-flex(1 0 0); width: 100px"></div>
-  <div data-expected-width="100" style="height: -webkit-flex(1 0 0); position: relative">
+  <div data-expected-width="100" style="-webkit-flex: 1 0 0; width: 100px"></div>
+  <div data-expected-width="100" style="-webkit-flex: 1 0 0; position: relative">
     <div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></div>
   </div>
 </div>
index f9b4216..7c12e44 100644 (file)
@@ -46,118 +46,118 @@ if (window.layoutTestController)
 
 <!-- stretch is the default flex-align so these flexitems should all have the same height. -->
 <div class="flexbox">
-  <div data-expected-width="100" style="height: -webkit-flex(1 0 0);"></div>
-  <div data-expected-width="100" style="height: -webkit-flex(1 0 0); width: 100px"></div>
-  <div data-expected-width="100" style="height: -webkit-flex(1 0 0);"></div>
+  <div data-expected-width="100" style="-webkit-flex: 1 0 0;"></div>
+  <div data-expected-width="100" style="-webkit-flex: 1 0 0; width: 100px"></div>
+  <div data-expected-width="100" style="-webkit-flex: 1 0 0;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-width="60"  data-offset-x="60" style="height: -webkit-flex(1 0 0); width: 60px; margin: auto;"></div>
-  <div data-expected-width="120" data-offset-x="0" style="height: -webkit-flex(1 0 0); margin: 0 auto;"></div>
-  <div data-expected-width="100" data-offset-x="10" style="height: -webkit-flex(1 0 0); width: 100px; margin: 0 10px;"></div>
-  <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); width: 50px; margin: 0 20px 0 10px;"></div>
-  <div data-expected-width="90" data-offset-x="10" style="height: -webkit-flex(1 0 0); margin: 0 20px 0 10px;"></div>
-  <div data-expected-width="120" data-offset-x="0" style="height: -webkit-flex(1 0 0);">
+  <div data-expected-width="60"  data-offset-x="60" style="-webkit-flex: 1 0 0; width: 60px; margin: auto;"></div>
+  <div data-expected-width="120" data-offset-x="0" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div>
+  <div data-expected-width="100" data-offset-x="10" style="-webkit-flex: 1 0 0; width: 100px; margin: 0 10px;"></div>
+  <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px; margin: 0 20px 0 10px;"></div>
+  <div data-expected-width="90" data-offset-x="10" style="-webkit-flex: 1 0 0; margin: 0 20px 0 10px;"></div>
+  <div data-expected-width="120" data-offset-x="0" style="-webkit-flex: 1 0 0;">
     <!-- Since no parent has a fixed height, this div shrink-wraps. -->
     <div data-expected-width="0" style="width: 100%; background-color:black"></div>
   </div>
 </div>
 
 <div class="flexbox" style="width: 100px;">
-  <div data-expected-width="50"  data-offset-x="50" style="height: -webkit-flex(1 0 0); width: 50px;"></div>
-  <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0);"></div>
-  <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100%;">
+  <div data-expected-width="50"  data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px;"></div>
+  <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0;"></div>
+  <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100%;">
     <div data-expected-width="100" style="width: 100%; background-color:black"></div>
   </div>
 </div>
 
 <div class="flexbox" style="width: 100px;">
-  <div data-expected-width="50"  data-offset-x="50" style="height: -webkit-flex(1 0 0); width: 50px;"></div>
-  <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0);"></div>
+  <div data-expected-width="50"  data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px;"></div>
+  <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-width="0" data-offset-x="100" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start;"></div>
-  <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start; width: 50px;"></div>
-  <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start; width: 50px; margin: 0 auto"></div>
-  <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start; width: 50px; margin: auto 0 0"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start; width: 50px; margin: 0 25px"></div>
-  <div data-expected-width="50" data-offset-x="30" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start; width: 50px; margin: 0 20px 0 10px;"></div>
-  <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
+  <div data-expected-width="0" data-offset-x="100" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start;"></div>
+  <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 auto"></div>
+  <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: auto 0 0"></div>
+  <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 25px"></div>
+  <div data-expected-width="50" data-offset-x="30" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 20px 0 10px;"></div>
+  <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-width="0" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end;"></div>
-  <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end; width: 50px;"></div>
-  <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end; width: 50px; margin: 0 auto"></div>
-  <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end; width: 50px; margin: auto 0 0"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end; width: 50px; margin: 0 25px"></div>
-  <div data-expected-width="50" data-offset-x="10" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end; width: 50px; margin: 0 20px 0 10px;"></div>
-  <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
+  <div data-expected-width="0" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end;"></div>
+  <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 auto"></div>
+  <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: auto 0 0"></div>
+  <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 25px"></div>
+  <div data-expected-width="50" data-offset-x="10" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 20px 0 10px;"></div>
+  <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-width="0" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center;"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center; width: 50px;"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center; width: 50px; margin: 0 auto"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center; width: 50px; margin: auto 0 0"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center; width: 50px; margin: 0 25px"></div>
-  <div data-expected-width="50" data-offset-x="20" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center; width: 50px; margin: 0 20px 0 10px;"></div>
-  <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
+  <div data-expected-width="0" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center;"></div>
+  <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: 0 auto"></div>
+  <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: auto 0 0"></div>
+  <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: 0 25px"></div>
+  <div data-expected-width="50" data-offset-x="20" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: 0 20px 0 10px;"></div>
+  <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start; width: 50px;"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center; width: 50px;"></div>
-  <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end; width: 50px;"></div>
-  <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); width: 50px; margin: auto 0"></div>
-  <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0);"></div>
-  <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
+  <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px; margin: auto 0"></div>
+  <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0;"></div>
+  <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
-  <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
-  <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); width: 50px; margin: auto 0; -webkit-writing-mode: horizontal-tb;"></div>
-  <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px; -webkit-writing-mode: horizontal-tb;"></div>
+  <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
+  <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
+  <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
+  <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px; margin: auto 0; -webkit-writing-mode: horizontal-tb;"></div>
+  <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px; -webkit-writing-mode: horizontal-tb;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-width="20" data-offset-x="60" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline; width: 20px;"></div>
-  <div data-expected-width="10" data-offset-x="70" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline; width: 10px; margin: 0 20px 0 10px;"></div>
-  <div data-expected-width="10" data-offset-x="60" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline; width: 10px; margin: 0 20px 0 0;"></div>
-  <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
+  <div data-expected-width="20" data-offset-x="60" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline; width: 20px;"></div>
+  <div data-expected-width="10" data-offset-x="70" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline; width: 10px; margin: 0 20px 0 10px;"></div>
+  <div data-expected-width="10" data-offset-x="60" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline; width: 10px; margin: 0 20px 0 0;"></div>
+  <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
 </div>
 
 <div class="flexbox">
-  <div id="baseline1" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;">ahem</div>
-  <div id="baseline2" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
-  <div id="baseline3" data-expected-width="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
-  <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
+  <div id="baseline1" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;">ahem</div>
+  <div id="baseline2" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
+  <div id="baseline3" data-expected-width="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
+  <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
 </div>
 
 <div class="flexbox">
-  <div id="baseline4" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;">ahem</div>
-  <div id="baseline5" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
-  <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
-  <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
+  <div id="baseline4" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;">ahem</div>
+  <div id="baseline5" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
+  <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
 </div>
 
 <div class="flexbox" style="-webkit-writing-mode: vertical-lr">
-  <div id="baseline6" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;">ahem</div>
-  <div id="baseline7" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
-  <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
-  <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
-  <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
+  <div id="baseline6" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;">ahem</div>
+  <div id="baseline7" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
+  <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
+  <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
 </div>
 
 <div class="flexbox" style="-webkit-writing-mode: vertical-lr">
-  <div id="baseline8" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;">ahem</div>
-  <div id="baseline9" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
-  <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
-  <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
+  <div id="baseline8" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;">ahem</div>
+  <div id="baseline9" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
+  <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
 </div>
 
 <div id="results"></div>
index 39febca..b41bdb3 100644 (file)
@@ -45,199 +45,199 @@ if (window.layoutTestController)
 
 <!-- stretch is the default flex-align so these flexitems should all have the same height. -->
 <div class="flexbox">
-  <div data-expected-height="100" style="width: -webkit-flex(1 0 0);"></div>
-  <div data-expected-height="100" style="width: -webkit-flex(1 0 0); height: 100px"></div>
-  <div data-expected-height="100" style="width: -webkit-flex(1 0 0);"></div>
+  <div data-expected-height="100" style="-webkit-flex: 1 0 0;"></div>
+  <div data-expected-height="100" style="-webkit-flex: 1 0 0; height: 100px"></div>
+  <div data-expected-height="100" style="-webkit-flex: 1 0 0;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-height="60"  data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 60px; margin: auto 0;"></div>
-  <div data-expected-height="120" data-offset-y="0" style="width: -webkit-flex(1 0 0); margin: auto 0 0;"></div>
-  <div data-expected-height="120" data-offset-y="0" style="width: -webkit-flex(1 0 0); margin: auto 0;"></div>
-  <div data-expected-height="100" data-offset-y="10" style="width: -webkit-flex(1 0 0); height: 100px; margin: 10px 0;"></div>
-  <div data-expected-height="50" data-offset-y="20" style="width: -webkit-flex(1 0 0); height: 50px; margin: 20px 0 10px;"></div>
-  <div data-expected-height="90" data-offset-y="20" style="width: -webkit-flex(1 0 0); margin: 20px 0 10px;"></div>
-  <div data-expected-height="120" data-offset-y="0" style="width: -webkit-flex(1 0 0);">
+  <div data-expected-height="60"  data-offset-y="0" style="-webkit-flex: 1 0 0; height: 60px; margin: auto 0;"></div>
+  <div data-expected-height="120" data-offset-y="0" style="-webkit-flex: 1 0 0; margin: auto 0 0;"></div>
+  <div data-expected-height="120" data-offset-y="0" style="-webkit-flex: 1 0 0; margin: auto 0;"></div>
+  <div data-expected-height="100" data-offset-y="10" style="-webkit-flex: 1 0 0; height: 100px; margin: 10px 0;"></div>
+  <div data-expected-height="50" data-offset-y="20" style="-webkit-flex: 1 0 0; height: 50px; margin: 20px 0 10px;"></div>
+  <div data-expected-height="90" data-offset-y="20" style="-webkit-flex: 1 0 0; margin: 20px 0 10px;"></div>
+  <div data-expected-height="120" data-offset-y="0" style="-webkit-flex: 1 0 0;">
     <!-- Since no parent has a fixed height, this div shrink-wraps. -->
     <div data-expected-height="0" style="height: 100%; background-color:black"></div>
   </div>
 </div>
 
 <div class="flexbox" style="-webkit-flex-align: start">
-    <div data-expected-height="0" data-offset-y="0" style="width: -webkit-flex(1 0 0);"></div>
-    <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
+    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex: 1 0 0;"></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div>
 </div>
 
 <div class="flexbox" style="-webkit-flex-align: end">
-    <div data-expected-height="0" data-offset-y="100" style="width: -webkit-flex(1 0 0);"></div>
-    <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
+    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex: 1 0 0;"></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div>
 </div>
 
 <div class="flexbox" style="-webkit-flex-align: center">
-    <div data-expected-height="0" data-offset-y="50" style="width: -webkit-flex(1 0 0);"></div>
-    <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
+    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex: 1 0 0;"></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div>
 </div>
 
 <div class="flexbox" style="-webkit-flex-align: baseline">
-    <div style="width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
-    <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
+    <div style="-webkit-flex: 1 0 0;"><div style="display:inline-block;"></div></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div>
 </div>
 
 <div class="flexbox" style="-webkit-flex-align: stretch">
-    <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0);"></div>
-    <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0;"></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div>
 </div>
 
 <div class="flexbox" style="-webkit-flex-align: start">
-    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0); height: 100px;"></div>
-    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0);"></div>
-    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; width: -webkit-flex(1 0 0);"></div>
-    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; width: -webkit-flex(1 0 0);"></div>
-    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; width: -webkit-flex(1 0 0);"></div>
-    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
-    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0); margin: 20px;"><div style="display:inline-block;"></div></div>
-    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; -webkit-flex: 1 0 0; height: 100px;"></div>
+    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: auto; -webkit-flex: 1 0 0;"></div>
+    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; -webkit-flex: 1 0 0;"></div>
+    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; -webkit-flex: 1 0 0;"></div>
+    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; -webkit-flex: 1 0 0;"></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0;"><div style="display:inline-block;"></div></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0; margin: 20px;"><div style="display:inline-block;"></div></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; -webkit-flex: 1 0 0;"></div>
 </div>
 
 <div class="flexbox" style="-webkit-flex-align: end">
-    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0); height: 100px;"></div>
-    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0);"></div>
-    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; width: -webkit-flex(1 0 0);"></div>
-    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; width: -webkit-flex(1 0 0);"></div>
-    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; width: -webkit-flex(1 0 0);"></div>
-    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
-    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0); margin: 20px;"><div style="display:inline-block;"></div></div>
-    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; -webkit-flex: 1 0 0; height: 100px;"></div>
+    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: auto; -webkit-flex: 1 0 0;"></div>
+    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; -webkit-flex: 1 0 0;"></div>
+    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; -webkit-flex: 1 0 0;"></div>
+    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; -webkit-flex: 1 0 0;"></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0;"><div style="display:inline-block;"></div></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0; margin: 20px;"><div style="display:inline-block;"></div></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; -webkit-flex: 1 0 0;"></div>
 </div>
 
 <div class="flexbox" style="-webkit-flex-align: center">
-    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0); height: 100px;"></div>
-    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0);"></div>
-    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; width: -webkit-flex(1 0 0);"></div>
-    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; width: -webkit-flex(1 0 0);"></div>
-    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; width: -webkit-flex(1 0 0);"></div>
-    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
-    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0); margin: 20px;"><div style="display:inline-block;"></div></div>
-    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; -webkit-flex: 1 0 0; height: 100px;"></div>
+    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: auto; -webkit-flex: 1 0 0;"></div>
+    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; -webkit-flex: 1 0 0;"></div>
+    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; -webkit-flex: 1 0 0;"></div>
+    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; -webkit-flex: 1 0 0;"></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0;"><div style="display:inline-block;"></div></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0; margin: 20px;"><div style="display:inline-block;"></div></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; -webkit-flex: 1 0 0;"></div>
 </div>
 
 <div class="flexbox" style="-webkit-flex-align: baseline">
-    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: start; width: -webkit-flex(1 0 0); height: 100px;"></div>
-    <div data-offset-y="20" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
-    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; width: -webkit-flex(1 0 0);"></div>
-    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; width: -webkit-flex(1 0 0);"></div>
-    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; width: -webkit-flex(1 0 0);"></div>
-    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
-    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0); margin: 20px;"><div style="display:inline-block;"></div></div>
-    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: start; -webkit-flex: 1 0 0; height: 100px;"></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: auto; -webkit-flex: 1 0 0;"><div style="display:inline-block;"></div></div>
+    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; -webkit-flex: 1 0 0;"></div>
+    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; -webkit-flex: 1 0 0;"></div>
+    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; -webkit-flex: 1 0 0;"></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0;"><div style="display:inline-block;"></div></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0; margin: 20px;"><div style="display:inline-block;"></div></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; -webkit-flex: 1 0 0;"></div>
 </div>
 
 <div class="flexbox" style="-webkit-flex-align: stretch">
-    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0); height: 100px;"></div>
-    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0);"></div>
-    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; width: -webkit-flex(1 0 0);"></div>
-    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; width: -webkit-flex(1 0 0);"></div>
-    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; width: -webkit-flex(1 0 0);"></div>
-    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
-    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0); margin: 20px;"><div style="display:inline-block;"></div></div>
-    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; width: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; -webkit-flex: 1 0 0; height: 100px;"></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; -webkit-flex: 1 0 0;"></div>
+    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; -webkit-flex: 1 0 0;"></div>
+    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; -webkit-flex: 1 0 0;"></div>
+    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; -webkit-flex: 1 0 0;"></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0;"><div style="display:inline-block;"></div></div>
+    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0; margin: 20px;"><div style="display:inline-block;"></div></div>
+    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; -webkit-flex: 1 0 0;"></div>
 </div>
 
 <div class="flexbox" style="height: 100px;">
-  <div data-expected-height="50"  data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 50px;"></div>
-  <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0);"></div>
-  <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100%;">
+  <div data-expected-height="50"  data-offset-y="0" style="-webkit-flex: 1 0 0; height: 50px;"></div>
+  <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0;"></div>
+  <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100%;">
     <div data-expected-height="100" style="height: 100%; background-color:black"></div>
   </div>
 </div>
 
 <div class="flexbox" style="height: 100px;">
-  <div data-expected-height="50"  data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 50px;"></div>
-  <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0);"></div>
+  <div data-expected-height="50"  data-offset-y="0" style="-webkit-flex: 1 0 0; height: 50px;"></div>
+  <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-height="50" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 50px; margin: auto 0 0;"></div>
-  <div data-expected-height="70" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 70px; margin: 0 0 auto"></div>
-  <div data-expected-height="70" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 70px;"></div>
-  <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
+  <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 50px; margin: auto 0 0;"></div>
+  <div data-expected-height="70" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 70px; margin: 0 0 auto"></div>
+  <div data-expected-height="70" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 70px;"></div>
+  <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-height="0" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: start;"></div>
-  <div data-expected-height="50" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: start; height: 50px;"></div>
-  <div data-expected-height="50" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: start; height: 50px; margin: auto 0"></div>
-  <div data-expected-height="50" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: start; height: 50px; margin: auto 0 0"></div>
-  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: start; height: 50px; margin: 25px 0"></div>
-  <div data-expected-height="50" data-offset-y="20" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: start; height: 50px; margin: 20px 0 10px;"></div>
-  <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
+  <div data-expected-height="0" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start;"></div>
+  <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px;"></div>
+  <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; margin: auto 0"></div>
+  <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; margin: auto 0 0"></div>
+  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; margin: 25px 0"></div>
+  <div data-expected-height="50" data-offset-y="20" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; margin: 20px 0 10px;"></div>
+  <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-height="0" data-offset-y="100" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: end;"></div>
-  <div data-expected-height="50" data-offset-y="50" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: end; height: 50px;"></div>
-  <div data-expected-height="50" data-offset-y="50" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: end; height: 50px; margin: auto 0"></div>
-  <div data-expected-height="50" data-offset-y="50" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: end; height: 50px; margin: auto 0 0"></div>
-  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: end; height: 50px; margin: 25px 0"></div>
-  <div data-expected-height="50" data-offset-y="40" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: end; height: 50px; margin: 20px 0 10px;"></div>
-  <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
+  <div data-expected-height="0" data-offset-y="100" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end;"></div>
+  <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px;"></div>
+  <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px; margin: auto 0"></div>
+  <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px; margin: auto 0 0"></div>
+  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px; margin: 25px 0"></div>
+  <div data-expected-height="50" data-offset-y="40" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px; margin: 20px 0 10px;"></div>
+  <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-height="0" data-offset-y="50" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: center;"></div>
-  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: center; height: 50px;"></div>
-  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: center; height: 50px; margin: auto 0"></div>
-  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: center; height: 50px; margin: auto 0 0"></div>
-  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: center; height: 50px; margin: 25px 0"></div>
-  <div data-expected-height="50" data-offset-y="30" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: center; height: 50px; margin: 20px 0 10px;"></div>
-  <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
+  <div data-expected-height="0" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center;"></div>
+  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px;"></div>
+  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; margin: auto 0"></div>
+  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; margin: auto 0 0"></div>
+  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; margin: 25px 0"></div>
+  <div data-expected-height="50" data-offset-y="30" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; margin: 20px 0 10px;"></div>
+  <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-height="50" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: start; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
-  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: center; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
-  <div data-expected-height="50" data-offset-y="50" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: end; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
-  <div data-expected-height="50" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 50px; margin: auto 0; -webkit-writing-mode: vertical-rl;"></div>
-  <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px; -webkit-writing-mode: vertical-rl;"></div>
+  <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
+  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
+  <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
+  <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 50px; margin: auto 0; -webkit-writing-mode: vertical-rl;"></div>
+  <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px; -webkit-writing-mode: vertical-rl;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-height="50" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: start; height: 50px;"></div>
-  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: center; height: 50px;"></div>
-  <div data-expected-height="50" data-offset-y="50" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: end; height: 50px;"></div>
-  <div data-expected-height="50" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 50px; margin: auto 0"></div>
-  <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0);"></div>
-  <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
+  <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px;"></div>
+  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px;"></div>
+  <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px;"></div>
+  <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 50px; margin: auto 0"></div>
+  <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0;"></div>
+  <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div>
 </div>
 
 <div class="flexbox">
-  <div data-expected-height="20" data-offset-y="20" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline; height: 20px;"></div>
+  <div data-expected-height="20" data-offset-y="20" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline; height: 20px;"></div>
   <!-- FIXME: This looks like it might be positioned 10 pixels too high due the margin-bottom. All the boxes should have their bottoms aligned I think. -->
-  <div data-expected-height="10" data-offset-y="20" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline; height: 10px; margin: 20px 0 10px;"></div>
-  <div data-expected-height="10" data-offset-y="30" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline; height: 10px; margin: 20px 0 0;"></div>
-  <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
+  <div data-expected-height="10" data-offset-y="20" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline; height: 10px; margin: 20px 0 10px;"></div>
+  <div data-expected-height="10" data-offset-y="30" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline; height: 10px; margin: 20px 0 0;"></div>
+  <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div>
 </div>
 
 <div class="flexbox" style="max-height: 20px">
-  <div data-expected-height="40" data-offset-y="-10" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: center; height: 40px;"></div>
-  <div data-expected-height="40" data-offset-y="-20" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: end; height: 40px;"></div>
-  <div data-expected-height="40" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 40px;"></div>
-  <div data-expected-height="20" data-offset-y="0" style="width: -webkit-flex(1 0 0);"></div>
+  <div data-expected-height="40" data-offset-y="-10" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 40px;"></div>
+  <div data-expected-height="40" data-offset-y="-20" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 40px;"></div>
+  <div data-expected-height="40" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 40px;"></div>
+  <div data-expected-height="20" data-offset-y="0" style="-webkit-flex: 1 0 0;"></div>
 </div>
 
 <div class="flexbox">
-  <div id="baseline1" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;">ahem</div>
-  <div id="baseline2" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px;"></div>
-  <div data-expected-height="50" data-offset-y="25" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: center;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></div>
-  <div id="baseline3" data-expected-height="50" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></div>
-  <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
+  <div id="baseline1" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;">ahem</div>
+  <div id="baseline2" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px;"></div>
+  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></div>
+  <div id="baseline3" data-expected-height="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></div>
+  <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div>
 </div>
 
 <div class="flexbox">
-  <div id="baseline4" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;">ahem</div>
-  <div id="baseline5" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px;"></div>
-  <div data-expected-height="50" data-offset-y="0" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></div>
-  <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
+  <div id="baseline4" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;">ahem</div>
+  <div id="baseline5" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px;"></div>
+  <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></div>
+  <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div>
 </div>
 
 <div id="results"></div>
index 184ebf4..0be5c41 100644 (file)
@@ -247,7 +247,7 @@ writingModes.forEach(function(writingMode) {
                 container.setAttribute('data-expected-height', expectations.size[1]);
 
                 container.innerHTML = '\n<div class="flexbox ' + flexboxClassName + '" ' + positionAsString(expectations.position) + ' ' + offsetSizeAsString(expectations.size) + '>\n' +
-                    '<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" ' + asString(expectations[flexFlow.replace("-reverse", "")]) + '></div>\n' +
+                    '<div style="-webkit-flex: 1 auto; height: 20px; width: 20px;" ' + asString(expectations[flexFlow.replace("-reverse", "")]) + '></div>\n' +
                 '</div>\n';
 
                 document.body.appendChild(container);   
index 918bc6e..3aead6f 100644 (file)
@@ -35,111 +35,111 @@ FAIL:
 Expected 90 for width, but got 60. 
 
 <div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-lr rtl row" data-offset-x="40" data-offset-y="10">
-<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
 </div></div>
 vertical-lr ltr row
 FAIL:
 Expected 90 for width, but got 60. 
 
 <div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-lr ltr row" data-offset-x="40" data-offset-y="10">
-<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
 </div></div>
 vertical-lr rtl column
 FAIL:
 Expected 90 for width, but got 60. 
 
 <div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-lr rtl column" data-offset-x="40" data-offset-y="10">
-<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
 </div></div>
 vertical-lr ltr column
 FAIL:
 Expected 90 for width, but got 60. 
 
 <div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-lr ltr column" data-offset-x="40" data-offset-y="10">
-<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
 </div></div>
 vertical-lr rtl row-reverse
 FAIL:
 Expected 90 for width, but got 60. 
 
 <div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-lr rtl row-reverse" data-offset-x="40" data-offset-y="10">
-<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
 </div></div>
 vertical-lr ltr row-reverse
 FAIL:
 Expected 90 for width, but got 60. 
 
 <div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-lr ltr row-reverse" data-offset-x="40" data-offset-y="10">
-<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
 </div></div>
 vertical-lr rtl column-reverse
 FAIL:
 Expected 90 for width, but got 60. 
 
 <div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-lr rtl column-reverse" data-offset-x="40" data-offset-y="10">
-<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
 </div></div>
 vertical-lr ltr column-reverse
 FAIL:
 Expected 90 for width, but got 60. 
 
 <div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-lr ltr column-reverse" data-offset-x="40" data-offset-y="10">
-<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
 </div></div>
 vertical-rl rtl row
 FAIL:
 Expected 90 for width, but got 60. 
 
 <div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-rl rtl row" data-offset-x="40" data-offset-y="10">
-<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
 </div></div>
 vertical-rl ltr row
 FAIL:
 Expected 90 for width, but got 60. 
 
 <div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-rl ltr row" data-offset-x="40" data-offset-y="10">
-<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
 </div></div>
 vertical-rl rtl column
 FAIL:
 Expected 90 for width, but got 60. 
 
 <div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-rl rtl column" data-offset-x="40" data-offset-y="10">
-<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
 </div></div>
 vertical-rl ltr column
 FAIL:
 Expected 90 for width, but got 60. 
 
 <div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-rl ltr column" data-offset-x="40" data-offset-y="10">
-<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
 </div></div>
 vertical-rl rtl row-reverse
 FAIL:
 Expected 90 for width, but got 60. 
 
 <div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-rl rtl row-reverse" data-offset-x="40" data-offset-y="10">
-<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
 </div></div>
 vertical-rl ltr row-reverse
 FAIL:
 Expected 90 for width, but got 60. 
 
 <div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-rl ltr row-reverse" data-offset-x="40" data-offset-y="10">
-<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
 </div></div>
 vertical-rl rtl column-reverse
 FAIL:
 Expected 90 for width, but got 60. 
 
 <div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-rl rtl column-reverse" data-offset-x="40" data-offset-y="10">
-<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
 </div></div>
 vertical-rl ltr column-reverse
 FAIL:
 Expected 90 for width, but got 60. 
 
 <div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-rl ltr column-reverse" data-offset-x="40" data-offset-y="10">
-<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
 </div></div>
 
index d58d12b..a667510 100644 (file)
@@ -83,7 +83,7 @@ writingModes.forEach(function(writingMode) {
             container.setAttribute('data-expected-height', 90);
 
             container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" ' + flexboxExpectations + '>\n' +
-                '<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" ' + flexItemExpectations + '></div>\n' +
+                '<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" ' + flexItemExpectations + '></div>\n' +
             '</div>';
 
             document.body.appendChild(container);
index 336f4ea..fa2532c 100644 (file)
@@ -240,7 +240,7 @@ writingModes.forEach(function(writingMode) {
                 container.setAttribute('data-expected-height', expectations.container[1]);
 
                 container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" ' + flexboxExpectations + '>\n' +
-                    '<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" ' + flexItemExpectations + '></div>\n' +
+                    '<div style="-webkit-flex: 1 auto; height: 20px; width: 20px;" ' + flexItemExpectations + '></div>\n' +
                 '</div>';
 
                 document.body.appendChild(container);   
index 25f22d5..55dcaee 100644 (file)
@@ -123,7 +123,7 @@ writingModes.forEach(function(writingMode) {
                 flowDirection = direction + "-column-reverse";
 
             container.innerHTML = '\n<div class="flexbox ' + flexboxClassName + '" ' + sizeAsString(containerSize) + '>\n' +
-                '<div style="width: -webkit-flex(1 105px); height: -webkit-flex(1 105px);" ' + sizeAsString([105, 105])  + ' ' + positionAsString(expectations[writingMode][flowDirection]) + '></div>\n' +
+                '<div style="-webkit-flex: 1 auto; width: 105px; height: 105px;" ' + sizeAsString([105, 105])  + ' ' + positionAsString(expectations[writingMode][flowDirection]) + '></div>\n' +
             '</div>\n';
 
             document.body.appendChild(container);   
index 3aceb71..73d2cc7 100644 (file)
@@ -250,7 +250,7 @@ writingModes.forEach(function(writingMode) {
                 container.setAttribute('data-expected-height', expectations.containersize[1]);
 
                 container.innerHTML = '\n<div class="flexbox ' + flexboxClassName + '">\n' +
-                    '<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" ' + asString(expectations['flexitem' + flexFlow.replace('-reverse', '')]) + '>\n' +
+                    '<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" ' + asString(expectations['flexitem' + flexFlow.replace('-reverse', '')]) + '>\n' +
                         '<div style="width:100%; height:100%" ' + asString(expectations['child' + flexFlow.replace('-reverse', '')]) + '></div>' +
                     '</div>\n' +
                 '</div>\n';
index ee3c762..119196c 100644 (file)
@@ -70,86 +70,86 @@ if (window.layoutTestController)
 <body onload="checkFlexBoxen()">
 
 <div class="flexbox">
-  <div data-expected-width="75" data-offset-x="0" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
-  <div data-expected-width="350" data-offset-x="75" style="width: -webkit-flex(2 0 0); -webkit-padding-start: 200px"><div data-offset-x="275"></div></div>
-  <div data-expected-width="75" data-offset-x="425" style="width: -webkit-flex(1 0 0); -webkit-margin-end: 100px;"></div>
+  <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; -webkit-padding-start: 200px"><div data-offset-x="275"></div></div>
+  <div data-expected-width="75" data-offset-x="425" style="-webkit-flex: 1 0 0; -webkit-margin-end: 100px;"></div>
 </div>
 
 <div class="flexbox rtl">
-  <div data-expected-width="75" data-offset-x="525" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
-  <div data-expected-width="350" data-offset-x="175" style="width: -webkit-flex(2 0 0); -webkit-padding-start: 200px"><div data-offset-x="175"></div></div>
-  <div data-expected-width="75" data-offset-x="100" style="width: -webkit-flex(1 0 0); -webkit-margin-end: 100px;"></div>
+  <div data-expected-width="75" data-offset-x="525" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div>
+  <div data-expected-width="350" data-offset-x="175" style="-webkit-flex: 2 0 0; -webkit-padding-start: 200px"><div data-offset-x="175"></div></div>
+  <div data-expected-width="75" data-offset-x="100" style="-webkit-flex: 1 0 0; -webkit-margin-end: 100px;"></div>
 </div>
 
 <div class="flexbox row-reverse">
-  <div data-expected-width="75" data-offset-x="525" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
-  <div data-expected-width="350" data-offset-x="175" style="width: -webkit-flex(2 0 0); -webkit-padding-start: 200px"><div data-offset-x="375"></div></div>
-  <div data-expected-width="75" data-offset-x="0" style="width: -webkit-flex(1 0 0); -webkit-margin-end: 100px;"></div>
+  <div data-expected-width="75" data-offset-x="525" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div>
+  <div data-expected-width="350" data-offset-x="175" style="-webkit-flex: 2 0 0; -webkit-padding-start: 200px"><div data-offset-x="375"></div></div>
+  <div data-expected-width="75" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-margin-end: 100px;"></div>
 </div>
 
 <div class="flexbox rtl row-reverse">
-  <div data-expected-width="75" data-offset-x="0" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
-  <div data-expected-width="350" data-offset-x="75" style="width: -webkit-flex(2 0 0); -webkit-padding-start: 200px"><div data-offset-x="75"></div></div>
-  <div data-expected-width="75" data-offset-x="525" style="width: -webkit-flex(1 0 0); -webkit-margin-end: 100px;"></div>
+  <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; -webkit-padding-start: 200px"><div data-offset-x="75"></div></div>
+  <div data-expected-width="75" data-offset-x="525" style="-webkit-flex: 1 0 0; -webkit-margin-end: 100px;"></div>
 </div>
 
 <div style="position: relative;">
 <div class="flexbox column">
-  <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0); margin: auto 200px auto 150px;"></div>
-  <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0); -webkit-padding-start: 200px"><div data-offset-y="150" data-offset-x="200"></div></div>
-  <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0); -webkit-margin-end: 100px;"></div>
+  <div data-expected-height="150" data-offset-y="0" style="-webkit-flex: 1 0 0; margin: auto 200px auto 150px;"></div>
+  <div data-expected-height="300" data-offset-y="150" style="-webkit-flex: 2 0 0; -webkit-padding-start: 200px"><div data-offset-y="150" data-offset-x="200"></div></div>
+  <div data-expected-height="150" data-offset-y="450" style="-webkit-flex: 1 0 0; -webkit-margin-end: 100px;"></div>
 </div>
 </div>
 
 <div style="position: relative;">
 <div class="flexbox column-reverse">
-  <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0); margin: auto 200px auto 150px;"></div>
-  <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0); -webkit-padding-start: 200px"><div data-offset-y="150" data-offset-x="200"></div></div>
-  <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0); -webkit-margin-end: 100px;"></div>
+  <div data-expected-height="150" data-offset-y="450" style="-webkit-flex: 1 0 0; margin: auto 200px auto 150px;"></div>
+  <div data-expected-height="300" data-offset-y="150" style="-webkit-flex: 2 0 0; -webkit-padding-start: 200px"><div data-offset-y="150" data-offset-x="200"></div></div>
+  <div data-expected-height="150" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-margin-end: 100px;"></div>
 </div>
 </div>
 
 <div style="position: relative;">
 <div class="flexbox column rtl">
-  <div data-expected-height="150" data-offset-y="0" data-offset-x="480" style="height: -webkit-flex(1 0 0); margin: auto 100px auto 50px;"></div>
-  <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0); -webkit-padding-start: 200px"><div data-offset-y="150" data-offset-x="380"></div></div>
-  <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style="height: -webkit-flex(1 0 0); -webkit-margin-end: 100px;"></div>
+  <div data-expected-height="150" data-offset-y="0" data-offset-x="480" style="-webkit-flex: 1 0 0; margin: auto 100px auto 50px;"></div>
+  <div data-expected-height="300" data-offset-y="150" style="-webkit-flex: 2 0 0; -webkit-padding-start: 200px"><div data-offset-y="150" data-offset-x="380"></div></div>
+  <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style="-webkit-flex: 1 0 0; -webkit-margin-end: 100px;"></div>
 </div>
 </div>
 
 <div style="position: relative;">
 <div class="flexbox column-reverse rtl">
-  <div data-expected-height="150" data-offset-y="450" data-offset-x="480" style="height: -webkit-flex(1 0 0); margin: auto 100px auto 50px;"></div>
-  <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0); -webkit-padding-start: 200px"><div data-offset-y="150" data-offset-x="380"></div></div>
-  <div data-expected-height="150" data-offset-y="0" data-offset-x="580" style="height: -webkit-flex(1 0 0); -webkit-margin-end: 100px;"></div>
+  <div data-expected-height="150" data-offset-y="450" data-offset-x="480" style="-webkit-flex: 1 0 0; margin: auto 100px auto 50px;"></div>
+  <div data-expected-height="300" data-offset-y="150" style="-webkit-flex: 2 0 0; -webkit-padding-start: 200px"><div data-offset-y="150" data-offset-x="380"></div></div>
+  <div data-expected-height="150" data-offset-y="0" data-offset-x="580" style="-webkit-flex: 1 0 0; -webkit-margin-end: 100px;"></div>
 </div>
 </div>
 
 <div style="position: relative;">
 <div data-expected-height="600" class="flexbox vertical-lr column">
-  <div data-offset-x="0" data-expected-width="500" style="width: -webkit-flex(1 0 0); min-width: 300px"></div>
-  <div data-offset-x="500" data-offset-y="100" data-expected-width="100" style="width: -webkit-flex(1 0 200px); max-width: 100px; margin: 100px 0 50px 0;"></div>
+  <div data-offset-x="0" data-expected-width="500" style="-webkit-flex: 1 0 0; min-width: 300px"></div>
+  <div data-offset-x="500" data-offset-y="100" data-expected-width="100" style="-webkit-flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
 </div>
 </div>
 
 <div style="position: relative;">
 <div data-expected-height="600" class="flexbox vertical-lr column-reverse">
-  <div data-offset-x="100" data-expected-width="500" style="width: -webkit-flex(1 0 0); min-width: 300px"></div>
-  <div data-offset-x="0" data-offset-y="100" data-expected-width="100" style="width: -webkit-flex(1 0 200px); max-width: 100px; margin: 100px 0 50px 0;"></div>
+  <div data-offset-x="100" data-expected-width="500" style="-webkit-flex: 1 0 0; min-width: 300px"></div>
+  <div data-offset-x="0" data-offset-y="100" data-expected-width="100" style="-webkit-flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
 </div>
 </div>
 
 <div style="position: relative;">
 <div data-expected-height="600" class="flexbox vertical-rl column">
-  <div data-offset-x="100" data-expected-width="500" style="width: -webkit-flex(1 0 0); min-width: 300px; margin-bottom: 100px"></div>
-  <div data-offset-x="0" data-offset-y="100" data-expected-width="100" style="width: -webkit-flex(1 0 200px); max-width: 100px; margin: 100px 0 50px 0;"></div>
+  <div data-offset-x="100" data-expected-width="500" style="-webkit-flex: 1 0 0; min-width: 300px; margin-bottom: 100px"></div>
+  <div data-offset-x="0" data-offset-y="100" data-expected-width="100" style="-webkit-flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
 </div>
 </div>
 
 <div style="position: relative;">
 <div data-expected-height="600" class="flexbox vertical-rl column-reverse">
-  <div data-offset-x="0" data-expected-width="500" style="width: -webkit-flex(1 0 0); min-width: 300px; margin-bottom: 100px"></div>
-  <div data-offset-x="500" data-offset-y="100" data-expected-width="100" style="width: -webkit-flex(1 0 200px); max-width: 100px; margin: 100px 0 50px 0;"></div>
+  <div data-offset-x="0" data-expected-width="500" style="-webkit-flex: 1 0 0; min-width: 300px; margin-bottom: 100px"></div>
+  <div data-offset-x="500" data-offset-y="100" data-expected-width="100" style="-webkit-flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
 </div>
 </div>
 
index cd5163d..90f90de 100644 (file)
@@ -21,10 +21,11 @@ body {
     height: 200px;
 }
 .row div {
-    width: -webkit-flex(1);
+    -webkit-flex: 1 auto;
 }
 .noflex .row :nth-child(1) {
     width: 50px;
+    -webkit-flex: none;
 }
 
 .column {
@@ -33,10 +34,11 @@ body {
     height: 200px;
 }
 .column div {
-    height: -webkit-flex(1);
+    -webkit-flex: 1 auto;
 }
 .noflex .column :nth-child(1) {
     height: 50px;
+    -webkit-flex: none;
 }
 
 </style>
index 999323b..7d66543 100644 (file)
@@ -33,77 +33,77 @@ if (window.layoutTestController)
 <body>
 
 <div style="display: -webkit-flexbox" class="horizontal-box">
-  <div class="first"  style="width: -webkit-flex(1); -webkit-flex-order: 0"></div>
-  <div class="second" style="width: -webkit-flex(1);"></div>
-  <div class="third"  style="width: -webkit-flex(1); -webkit-flex-order: 3"></div>
-  <div class="fourth" style="width: -webkit-flex(1); -webkit-flex-order: 20"></div>
+  <div class="first"  style="-webkit-flex: 1; -webkit-flex-order: 0"></div>
+  <div class="second" style="-webkit-flex: 1;"></div>
+  <div class="third"  style="-webkit-flex: 1; -webkit-flex-order: 3"></div>
+  <div class="fourth" style="-webkit-flex: 1; -webkit-flex-order: 20"></div>
 </div>
 
 <div style="display: -webkit-flexbox" class="horizontal-box">
-  <div class="fourth" style="width: -webkit-flex(1); -webkit-flex-order: 4"></div>
-  <div class="third"  style="width: -webkit-flex(1); -webkit-flex-order: 3"></div>
-  <div class="second" style="width: -webkit-flex(1); -webkit-flex-order: 2"></div>
-  <div class="first"  style="width: -webkit-flex(1); -webkit-flex-order: 1"></div>
+  <div class="fourth" style="-webkit-flex: 1; -webkit-flex-order: 4"></div>
+  <div class="third"  style="-webkit-flex: 1; -webkit-flex-order: 3"></div>
+  <div class="second" style="-webkit-flex: 1; -webkit-flex-order: 2"></div>
+  <div class="first"  style="-webkit-flex: 1; -webkit-flex-order: 1"></div>
 </div>
 
 <!-- The example from the spec. -->
 <div style="display: -webkit-flexbox" class="horizontal-box">
-  <div class="third"  style="width: -webkit-flex(1); -webkit-flex-order: 1"></div>
-  <div class="first"  style="width: -webkit-flex(1)"></div>
-  <div class="fourth" style="width: -webkit-flex(1); -webkit-flex-order: 1"></div>
-  <div class="second" style="width: -webkit-flex(1); -webkit-flex-order: 0"></div>
+  <div class="third"  style="-webkit-flex: 1; -webkit-flex-order: 1"></div>
+  <div class="first"  style="-webkit-flex: 1"></div>
+  <div class="fourth" style="-webkit-flex: 1; -webkit-flex-order: 1"></div>
+  <div class="second" style="-webkit-flex: 1; -webkit-flex-order: 0"></div>
 </div>
 
 <div style="display: -webkit-flexbox" class="horizontal-box">
-  <div class="fourth" style="width: -webkit-flex(1); -webkit-flex-order: 2"></div>
-  <div class="second" style="width: -webkit-flex(1)"></div>
-  <div class="third"  style="width: -webkit-flex(1)"></div>
-  <div class="first"  style="width: -webkit-flex(1); -webkit-flex-order: -10"></div>
+  <div class="fourth" style="-webkit-flex: 1; -webkit-flex-order: 2"></div>
+  <div class="second" style="-webkit-flex: 1"></div>
+  <div class="third"  style="-webkit-flex: 1"></div>
+  <div class="first"  style="-webkit-flex: 1; -webkit-flex-order: -10"></div>
 </div>
 
 <div style="display: -webkit-flexbox" class="horizontal-box">
-  <div class="fourth" style="width: -webkit-flex(1); -webkit-flex-order: 2000000000"></div>
-  <div class="second" style="width: -webkit-flex(1); -webkit-flex-order: 1000000000"></div>
-  <div class="third"  style="width: -webkit-flex(1); -webkit-flex-order: 1000000000"></div>
-  <div class="first"  style="width: -webkit-flex(1); -webkit-flex-order: -1000000000"></div>
+  <div class="fourth" style="-webkit-flex: 1; -webkit-flex-order: 2000000000"></div>
+  <div class="second" style="-webkit-flex: 1; -webkit-flex-order: 1000000000"></div>
+  <div class="third"  style="-webkit-flex: 1; -webkit-flex-order: 1000000000"></div>
+  <div class="first"  style="-webkit-flex: 1; -webkit-flex-order: -1000000000"></div>
 </div>
 
 <!-- Floating numbers are ignored and we use the default of 1 instead. -->
 <div style="display: -webkit-flexbox" class="horizontal-box">
-  <div class="second" style="width: -webkit-flex(1); -webkit-flex-order: 2.5"></div>
-  <div class="fourth" style="width: -webkit-flex(1); -webkit-flex-order: 2"></div>
-  <div class="first"  style="width: -webkit-flex(1); -webkit-flex-order: -1"></div>
-  <div class="third"  style="width: -webkit-flex(1)"></div>
+  <div class="second" style="-webkit-flex: 1; -webkit-flex-order: 2.5"></div>
+  <div class="fourth" style="-webkit-flex: 1; -webkit-flex-order: 2"></div>
+  <div class="first"  style="-webkit-flex: 1; -webkit-flex-order: -1"></div>
+  <div class="third"  style="-webkit-flex: 1"></div>
 </div>
 
 <div style="display: -webkit-flexbox" class="horizontal-box">
-  <div class="second" style="width: -webkit-flex(1); -webkit-flex-order: 0"></div>
-  <div class="first" style="width: -webkit-flex(1); -webkit-flex-order: -1"></div>
-  <div class="fourth"  style="width: -webkit-flex(1); -webkit-flex-order: 1"></div>
-  <div class="third"  style="width: -webkit-flex(1)"></div>
+  <div class="second" style="-webkit-flex: 1; -webkit-flex-order: 0"></div>
+  <div class="first" style="-webkit-flex: 1; -webkit-flex-order: -1"></div>
+  <div class="fourth"  style="-webkit-flex: 1; -webkit-flex-order: 1"></div>
+  <div class="third"  style="-webkit-flex: 1"></div>
 </div>
 
 <!-- Values greater than what can be stored in an int are clamped from
      -2,147,483,646 (int min + 2) to 2,147,483,647. -->
 <div style="display: -webkit-flexbox" class="horizontal-box">
-  <div class="third"  style="width: -webkit-flex(1); -webkit-flex-order: 4000000000"></div>
-  <div class="fourth" style="width: -webkit-flex(1); -webkit-flex-order: 3000000000"></div>
-  <div class="first"  style="width: -webkit-flex(1);"></div>
-  <div class="second" style="width: -webkit-flex(1); -webkit-flex-order: 2147483646"></div>
+  <div class="third"  style="-webkit-flex: 1; -webkit-flex-order: 4000000000"></div>
+  <div class="fourth" style="-webkit-flex: 1; -webkit-flex-order: 3000000000"></div>
+  <div class="first"  style="-webkit-flex: 1;"></div>
+  <div class="second" style="-webkit-flex: 1; -webkit-flex-order: 2147483646"></div>
 </div>
 
 <div style="display: -webkit-flexbox" class="horizontal-box">
-  <div class="second" style="width: -webkit-flex(1); -webkit-flex-order: 4000000000"></div>
-  <div class="third"  style="width: -webkit-flex(1); -webkit-flex-order: 3000000000"></div>
-  <div class="first"  style="width: -webkit-flex(1);"></div>
-  <div class="fourth" style="width: -webkit-flex(1); -webkit-flex-order: 2147483647"></div>
+  <div class="second" style="-webkit-flex: 1; -webkit-flex-order: 4000000000"></div>
+  <div class="third"  style="-webkit-flex: 1; -webkit-flex-order: 3000000000"></div>
+  <div class="first"  style="-webkit-flex: 1;"></div>
+  <div class="fourth" style="-webkit-flex: 1; -webkit-flex-order: 2147483647"></div>
 </div>
 
 <div style="display: -webkit-flexbox" class="horizontal-box">
-  <div class="third"  style="width: -webkit-flex(1); -webkit-flex-order: -2147483645"></div>
-  <div class="first"  style="width: -webkit-flex(1); -webkit-flex-order: -2147483646"></div>
-  <div class="second" style="width: -webkit-flex(1); -webkit-flex-order: -2147483647"></div>
-  <div class="fourth" style="width: -webkit-flex(1);"></div>
+  <div class="third"  style="-webkit-flex: 1; -webkit-flex-order: -2147483645"></div>
+  <div class="first"  style="-webkit-flex: 1; -webkit-flex-order: -2147483646"></div>
+  <div class="second" style="-webkit-flex: 1; -webkit-flex-order: -2147483647"></div>
+  <div class="fourth" style="-webkit-flex: 1;"></div>
 </div>
 
 <!-- This should not crash. -->
index 583500e..23df85a 100644 (file)
@@ -32,27 +32,27 @@ if (window.layoutTestController)
 <script src="resources/flexbox.js"></script>
 <body onload="checkFlexBoxen()">
 <div class="flexbox">
-  <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
+  <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; max-width: 100px;"></div>
   <div data-expected-width="100" data-offset-x="100" style="width: 100px;"></div>
   <div data-expected-width="100" data-offset-x="200" style="width: 100px;"></div>
 </div>
 
 <div class="flexbox" style="-webkit-flex-pack: end">
-  <div data-expected-width="100" data-offset-x="300" style="width: -webkit-flex(0 0 100px);"></div>
+  <div data-expected-width="100" data-offset-x="300" style="-webkit-flex: 0 0 100px;"></div>
   <div data-expected-width="100" data-offset-x="400" style="width: 100px;"></div>
   <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div>
 </div>
 
 <div class="flexbox" style="-webkit-flex-pack: center">
-  <div data-expected-width="100" data-offset-x="150" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
+  <div data-expected-width="100" data-offset-x="150" style="-webkit-flex: 1 0 0; max-width: 100px;"></div>
   <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div>
   <div data-expected-width="100" data-offset-x="350" style="width: 100px;"></div>
 </div>
 
 <div class="flexbox" style="-webkit-flex-pack: center">
-  <div data-expected-width="200" data-offset-x="0" style="width: -webkit-flex(1 100px);"></div>
-  <div data-expected-width="200" data-offset-x="200" style="width: -webkit-flex(1 100px);"></div>
-  <div data-expected-width="200" data-offset-x="400" style="width: -webkit-flex(1 100px);"></div>
+  <div data-expected-width="200" data-offset-x="0" style="-webkit-flex: 1 100px;"></div>
+  <div data-expected-width="200" data-offset-x="200" style="-webkit-flex: 1 100px;"></div>
+  <div data-expected-width="200" data-offset-x="400" style="-webkit-flex: 1 100px;"></div>
 </div>
 
 <!-- True centering on overflow. -->
@@ -61,31 +61,31 @@ if (window.layoutTestController)
 </div>
 
 <div class="flexbox" style="-webkit-flex-pack: justify">
-  <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
+  <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; max-width: 100px;"></div>
   <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div>
   <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div>
 </div>
 
 <div class="flexbox" style="-webkit-flex-pack: justify">
-  <div data-expected-width="200" data-offset-x="0" style="width: -webkit-flex(1 100px);"></div>
-  <div data-expected-width="200" data-offset-x="200" style="width: -webkit-flex(1 100px);"></div>
-  <div data-expected-width="200" data-offset-x="400" style="width: -webkit-flex(1 100px);"></div>
+  <div data-expected-width="200" data-offset-x="0" style="-webkit-flex: 1 100px;"></div>
+  <div data-expected-width="200" data-offset-x="200" style="-webkit-flex: 1 100px;"></div>
+  <div data-expected-width="200" data-offset-x="400" style="-webkit-flex: 1 100px;"></div>
 </div>
 
 <!-- If there's only one child, we pack start. -->
 <div class="flexbox" style="-webkit-flex-pack: justify">
-  <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
+  <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; max-width: 100px;"></div>
 </div>
 
 <div class="flexbox" style="-webkit-flex-pack: distribute">
-  <div data-expected-width="100" data-offset-x="50" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
+  <div data-expected-width="100" data-offset-x="50" style="-webkit-flex: 1 0 0; max-width: 100px;"></div>
   <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div>
   <div data-expected-width="100" data-offset-x="450" style="width: 100px;"></div>
 </div>
 
 <!-- If there's only one child, we pack center. -->
 <div class="flexbox" style="-webkit-flex-pack: distribute">
-  <div data-expected-width="100" data-offset-x="250" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
+  <div data-expected-width="100" data-offset-x="250" style="-webkit-flex: 1 0 0; max-width: 100px;"></div>
 </div>
 
 <!-- True centering on overflow. -->
@@ -105,14 +105,14 @@ if (window.layoutTestController)
 
 <!-- The flex-pack does nothing here because we are shrinking. -->
 <div class="flexbox" style="-webkit-flex-pack: end">
-  <div data-expected-width="200" data-offset-x="0" style="width: -webkit-flex(0 1 300px);"></div>
+  <div data-expected-width="200" data-offset-x="0" style="-webkit-flex: 0 1 300px;"></div>
   <div data-expected-width="200" data-offset-x="200" style="width: 200px;"></div>
   <div data-expected-width="200" data-offset-x="400" style="width: 200px;"></div>
 </div>
 
 <!-- We overflow the flexbox (no negative flexing) and align the end. The overflow is to the left. -->
 <div class="flexbox" style="-webkit-flex-pack: end">
-  <div data-expected-width="300" data-offset-x="-100" style="width: -webkit-flex(1 300px);"></div>
+  <div data-expected-width="300" data-offset-x="-100" style="-webkit-flex: 1 300px;"></div>
   <div data-expected-width="200" data-offset-x="200" style="width: 200px;"></div>
   <div data-expected-width="200" data-offset-x="400" style="width: 200px;"></div>
 </div>
index 4dda40f..e2fd187 100644 (file)
@@ -40,17 +40,17 @@ body {
 }
 
 .horizontal-tb.row > div {
-    width: -webkit-flex(1);
+    -webkit-flex: 1;
 }
 .vertical-lr.row > div, .vertical-rl.row > div {
-    height: -webkit-flex(1);
+    -webkit-flex: 1;
 }
 
 .horizontal-tb.column > div {
-    height: -webkit-flex(1);
+    -webkit-flex: 1;
 }
 .vertical-lr.column > div, .vertical-rl.column > div {
-    width: -webkit-flex(1);
+    -webkit-flex: 1;
 }
 
 .horizontal-tb.fixed {
index 1476fb9..f7d5cfe 100644 (file)
@@ -1305,7 +1305,7 @@ function mainAxisDirection(writingMode, flexDirection)
 function addChild(flexbox, mainAxis, crossAxis, preferredSize, crossAxisLength, alignment, expectations)
 {
     var child = document.createElement('div');
-    child.setAttribute('style', mainAxis + ': -webkit-flex(1 ' + preferredSize + 'px);'
+    child.setAttribute('style', '-webkit-flex: 1 ' + preferredSize + 'px;'
         + crossAxis + ': ' + crossAxisLength + ';'
         + '-webkit-flex-item-align: ' + alignment);
 
index 2f26297..1d232d8 100644 (file)
@@ -240,7 +240,7 @@ function mainAxisDirection(writingMode, flexDirection)
 function addChild(flexbox, preferredSize, linePack, expected_x_offset)
 {
     var child = document.createElement('div');
-    child.setAttribute('style', 'height: -webkit-flex(1 ' + preferredSize + 'px);'
+    child.setAttribute('style', '-webkit-flex: 1 ' + preferredSize + 'px;'
         + 'min-width: 100px');
 
     child.setAttribute("data-expected-width", linePack == "stretch" ? "300" : "100");
index 38524f2..3227c2f 100644 (file)
 with baseline alignment are aligned to cross axis start.</p>
 
 <div class="flexbox">
-  <div style="width: -webkit-flex(1 0 100px);">first<br>first<br>first</div>
-  <div style="width: -webkit-flex(1 0 100px);">second</div>
-  <div style="width: -webkit-flex(1 0 100px); margin-top: 5px">third</div>
-  <div style="width: -webkit-flex(1 0 100px);">fourth<br>fourth</div>
+  <div style="-webkit-flex: 1 0 100px;">first<br>first<br>first</div>
+  <div style="-webkit-flex: 1 0 100px;">second</div>
+  <div style="-webkit-flex: 1 0 100px; margin-top: 5px">third</div>
+  <div style="-webkit-flex: 1 0 100px;">fourth<br>fourth</div>
 </div>
 
 <div class="flexbox">
-  <div style="width: -webkit-flex(1 0 100px);">first<br>first<br>first</div>
-  <div style="width: -webkit-flex(1 0 100px);">second</div>
-  <div style="width: -webkit-flex(1 0 100px);">third</div>
-  <div style="width: -webkit-flex(1 0 100px); margin-bottom: 5px">fourth<br>fourth</div>
+  <div style="-webkit-flex: 1 0 100px;">first<br>first<br>first</div>
+  <div style="-webkit-flex: 1 0 100px;">second</div>
+  <div style="-webkit-flex: 1 0 100px;">third</div>
+  <div style="-webkit-flex: 1 0 100px; margin-bottom: 5px">fourth<br>fourth</div>
 </div>
 
 <div class="flexbox" style="width: 300px;">
-  <div style="width: -webkit-flex(1 0 100px); -webkit-flex-item-align: start; height: 100px">first</div>
-  <div style="width: -webkit-flex(1 0 100px);">second</div>
-  <div style="width: -webkit-flex(1 0 100px);">third<br>third</div>
+  <div style="-webkit-flex: 1 0 100px; -webkit-flex-item-align: start; height: 100px">first</div>
+  <div style="-webkit-flex: 1 0 100px;">second</div>
+  <div style="-webkit-flex: 1 0 100px;">third<br>third</div>
 </div>
 
 </body>
index 0cd1599..549ea19 100644 (file)
@@ -36,46 +36,46 @@ if (window.layoutTestController)
 sizing is not auto.</p>
 
 <div data-expected-width="200" data-expected-height="35" class="flexbox" style="width: 200px; height: 35px;">
-  <div data-offset-x="0" data-offset-y="15" style="width: -webkit-flex(1 100px); height: 20px"></div>
-  <div data-offset-x="100" data-offset-y="25" style="width: -webkit-flex(1 100px); height: 10px"></div>
-  <div data-offset-x="0" data-offset-y="5" style="width: -webkit-flex(1 100px); height: 10px"></div>
-  <div data-offset-x="100" data-offset-y="-5" style="width: -webkit-flex(1 100px); height: 20px"></div>
+  <div data-offset-x="0" data-offset-y="15" style="-webkit-flex: 1 100px; height: 20px"></div>
+  <div data-offset-x="100" data-offset-y="25" style="-webkit-flex: 1 100px; height: 10px"></div>
+  <div data-offset-x="0" data-offset-y="5" style="-webkit-flex: 1 100px; height: 10px"></div>
+  <div data-offset-x="100" data-offset-y="-5" style="-webkit-flex: 1 100px; height: 20px"></div>
 </div>
 
 <div data-expected-width="200" data-expected-height="35" class="flexbox" style="width: 200px; max-height: 35px;">
-  <div data-offset-x="0" data-offset-y="15" style="width: -webkit-flex(1 100px); height: 20px"></div>
-  <div data-offset-x="100" data-offset-y="25" style="width: -webkit-flex(1 100px); height: 10px"></div>
-  <div data-offset-x="0" data-offset-y="5" style="width: -webkit-flex(1 100px); height: 10px"></div>
-  <div data-offset-x="100" data-offset-y="-5" style="width: -webkit-flex(1 100px); height: 20px"></div>
+  <div data-offset-x="0" data-offset-y="15" style="-webkit-flex: 1 100px; height: 20px"></div>
+  <div data-offset-x="100" data-offset-y="25" style="-webkit-flex: 1 100px; height: 10px"></div>
+  <div data-offset-x="0" data-offset-y="5" style="-webkit-flex: 1 100px; height: 10px"></div>
+  <div data-offset-x="100" data-offset-y="-5" style="-webkit-flex: 1 100px; height: 20px"></div>
 </div>
 
 <div data-expected-width="200" data-expected-height="50" class="flexbox" style="width: 200px; min-height: 50px;">
-  <div data-offset-x="0" data-offset-y="30" style="width: -webkit-flex(1 100px); height: 20px"></div>
-  <div data-offset-x="100" data-offset-y="40" style="width: -webkit-flex(1 100px); height: 10px"></div>
-  <div data-offset-x="0" data-offset-y="20" style="width: -webkit-flex(1 100px); height: 10px"></div>
-  <div data-offset-x="100" data-offset-y="10" style="width: -webkit-flex(1 100px); height: 20px"></div>
+  <div data-offset-x="0" data-offset-y="30" style="-webkit-flex: 1 100px; height: 20px"></div>
+  <div data-offset-x="100" data-offset-y="40" style="-webkit-flex: 1 100px; height: 10px"></div>
+  <div data-offset-x="0" data-offset-y="20" style="-webkit-flex: 1 100px; height: 10px"></div>
+  <div data-offset-x="100" data-offset-y="10" style="-webkit-flex: 1 100px; height: 20px"></div>
 </div>
 
 
 <div data-expected-width="35" data-expected-height="200" class="flexbox" style="-webkit-flex-direction: column; height: 200px; width: 35px">
-  <div data-offset-x="15" data-offset-y="0" style="height: -webkit-flex(1 100px); width: 20px"></div>
-  <div data-offset-x="25" data-offset-y="100" style="height: -webkit-flex(1 100px); width: 10px"></div>
-  <div data-offset-x="5" data-offset-y="0" style="height: -webkit-flex(1 100px); width: 10px"></div>
-  <div data-offset-x="-5" data-offset-y="100" style="height: -webkit-flex(1 100px); width: 20px"></div>
+  <div data-offset-x="15" data-offset-y="0" style="-webkit-flex: 1 100px; width: 20px"></div>
+  <div data-offset-x="25" data-offset-y="100" style="-webkit-flex: 1 100px; width: 10px"></div>
+  <div data-offset-x="5" data-offset-y="0" style="-webkit-flex: 1 100px; width: 10px"></div>
+  <div data-offset-x="-5" data-offset-y="100" style="-webkit-flex: 1 100px; width: 20px"></div>
 </div>
 
 <div data-expected-width="35" data-expected-height="200" class="flexbox" style="-webkit-flex-direction: column; height: 200px; max-width: 35px">
-  <div data-offset-x="15" data-offset-y="0" style="height: -webkit-flex(1 100px); width: 20px"></div>
-  <div data-offset-x="25" data-offset-y="100" style="height: -webkit-flex(1 100px); width: 10px"></div>
-  <div data-offset-x="5" data-offset-y="0" style="height: -webkit-flex(1 100px); width: 10px"></div>
-  <div data-offset-x="-5" data-offset-y="100" style="height: -webkit-flex(1 100px); width: 20px"></div>
+  <div data-offset-x="15" data-offset-y="0" style="-webkit-flex: 1 100px; width: 20px"></div>
+  <div data-offset-x="25" data-offset-y="100" style="-webkit-flex: 1 100px; width: 10px"></div>
+  <div data-offset-x="5" data-offset-y="0" style="-webkit-flex: 1 100px; width: 10px"></div>
+  <div data-offset-x="-5" data-offset-y="100" style="-webkit-flex: 1 100px; width: 20px"></div>
 </div>
 
 <div data-expected-width="600" data-expected-height="200" class="flexbox" style="-webkit-flex-direction: column; height: 200px; min-width: 50px; max-width: 600px">
-  <div data-offset-x="580" data-offset-y="0" style="height: -webkit-flex(1 100px); width: 20px"></div>
-  <div data-offset-x="590" data-offset-y="100" style="height: -webkit-flex(1 100px); width: 10px"></div>
-  <div data-offset-x="570" data-offset-y="0" style="height: -webkit-flex(1 100px); width: 10px"></div>
-  <div data-offset-x="560" data-offset-y="100" style="height: -webkit-flex(1 100px); width: 20px"></div>
+  <div data-offset-x="580" data-offset-y="0" style="-webkit-flex: 1 100px; width: 20px"></div>
+  <div data-offset-x="590" data-offset-y="100" style="-webkit-flex: 1 100px; width: 10px"></div>
+  <div data-offset-x="570" data-offset-y="0" style="-webkit-flex: 1 100px; width: 10px"></div>
+  <div data-offset-x="560" data-offset-y="100" style="-webkit-flex: 1 100px; width: 20px"></div>
 </div>
 
 </body>
index c4a8d7c..00843d5 100644 (file)
@@ -701,7 +701,7 @@ function mainAxisDirection(writingMode, flexDirection)
 function addChild(flexbox, mainAxis, crossAxis, preferredSize, crossAxisLength, expectations)
 {
     var child = document.createElement('div');
-    child.setAttribute('style', mainAxis + ': -webkit-flex(1 ' + preferredSize + 'px);'
+    child.setAttribute('style', '-webkit-flex: 1 ' + preferredSize + 'px;'
         + crossAxis + ': ' + crossAxisLength + 'px;');
 
     child.setAttribute("data-expected-width", expectations[0]);
index 107cf52..cb3460f 100644 (file)
@@ -71,61 +71,61 @@ if (window.layoutTestController)
 
 <div class="flexbox">
     <div class="column nested">
-        <div data-expected-height="50" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
-        <div data-expected-height="50" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
+        <div data-expected-height="50" style="-webkit-flex: 1 0 0; width: 100px;"></div>
+        <div data-expected-height="50" style="-webkit-flex: 1 0 0; width: 100px;"></div>
     </div>
-    <div data-expected-width="500" style="width: -webkit-flex(1 0 0); height:100px;"></div>
+    <div data-expected-width="500" style="-webkit-flex: 1 0 0; height:100px;"></div>
 </div>
 
 <div class="flexbox">
     <div class="column nested align-start">
-        <div data-expected-height="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
-        <div data-expected-height="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
+        <div data-expected-height="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
+        <div data-expected-height="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
     </div>
-    <div data-expected-width="500" style="width: -webkit-flex(1 0 0); height:100px;"></div>
+    <div data-expected-width="500" style="-webkit-flex: 1 0 0; height:100px;"></div>
 </div>
 
 <div class="flexbox">
     <div class="column nested align-start" style="height: 50px">
-        <div data-expected-height="25" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
-        <div data-expected-height="25" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
+        <div data-expected-height="25" style="-webkit-flex: 1 0 0; width: 100px;"></div>
+        <div data-expected-height="25" style="-webkit-flex: 1 0 0; width: 100px;"></div>
     </div>
-    <div data-expected-width="500" style="width: -webkit-flex(1 0 0); height:100px;"></div>
+    <div data-expected-width="500" style="-webkit-flex: 1 0 0; height:100px;"></div>
 </div>
 
 <div class="flexbox">
     <div class="column nested" style="height: 50px">
-        <div class="nested" style="height: -webkit-flex(1); width: 100px;">
-            <div data-expected-height="25" style="width: -webkit-flex(1 0 auto);"></div>
-            <div data-expected-height="25" style="width: -webkit-flex(1 0 auto);"></div>
+        <div class="nested" style="-webkit-flex: 1; width: 100px;">
+            <div data-expected-height="25" style="-webkit-flex: 1 0 auto;"></div>
+            <div data-expected-height="25" style="-webkit-flex: 1 0 auto;"></div>
         </div>
-        <div style="height: -webkit-flex(1);"></div>
+        <div style="-webkit-flex: 1;"></div>
     </div>
-    <div data-expected-width="500" style="width: -webkit-flex(1 0 0); height:100px;"></div>
+    <div data-expected-width="500" style="-webkit-flex: 1 0 0; height:100px;"></div>
 </div>
 
 <div class="flexbox column" style="height: 100px">
-    <div class="row-reverse nested" style="height: -webkit-flex(1); width: 100px;">
-        <div data-expected-width="50" style="width: -webkit-flex(1 0 auto);"></div>
-        <div data-expected-width="50" style="width: -webkit-flex(1 0 auto);"></div>
+    <div class="row-reverse nested" style="-webkit-flex: 1; width: 100px;">
+        <div data-expected-width="50" style="-webkit-flex: 1 0 auto;"></div>
+        <div data-expected-width="50" style="-webkit-flex: 1 0 auto;"></div>
     </div>
-    <div data-expected-height="50" style="height: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="50" style="-webkit-flex: 1 0 0;"></div>
 </div>
 
 <div class="flexbox column-reverse" style="height: 100px">
-    <div class="row-reverse nested" style="height: -webkit-flex(1); width: 100px;">
-        <div data-expected-width="50" style="width: -webkit-flex(1 0 auto);"></div>
-        <div data-expected-width="50" style="width: -webkit-flex(1 0 auto);"></div>
+    <div class="row-reverse nested" style="-webkit-flex: 1; width: 100px;">
+        <div data-expected-width="50" style="-webkit-flex: 1 0 auto;"></div>
+        <div data-expected-width="50" style="-webkit-flex: 1 0 auto;"></div>
     </div>
-    <div data-expected-height="50" style="height: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="50" style="-webkit-flex: 1 0 0;"></div>
 </div>
 
 <div class="flexbox vertical-lr" style="height: 100px">
-    <div class="column nested" style="height: -webkit-flex(1); width: 100px;">
-        <div data-expected-width="50" style="width: -webkit-flex(1 0 auto);"></div>
-        <div data-expected-width="50" style="width: -webkit-flex(1 0 auto);"></div>
+    <div class="column nested" style="-webkit-flex: 1; width: 100px;">
+        <div data-expected-width="50" style="-webkit-flex: 1 0 auto;"></div>
+        <div data-expected-width="50" style="-webkit-flex: 1 0 auto;"></div>
     </div>
-    <div data-expected-height="50" style="height: -webkit-flex(1 0 0);"></div>
+    <div data-expected-height="50" style="-webkit-flex: 1 0 0;"></div>
 </div>
 
 </body>
index d7155ed..85c302d 100644 (file)
@@ -453,7 +453,7 @@ writingModes.forEach(function(writingMode) {
                 setFlexboxSize(flexbox, flexDirection);
                 for (var childIndex = 1; childIndex <= 3; ++childIndex) {
                     var child = document.createElement('div');
-                    child.style[flexDirection] = '-webkit-flex(' + childIndex + ')';
+                    child.style.webkitFlex = childIndex;
                     if (childIndex == absoluteIndex)
                         child.style.position = 'absolute';
 
index 1745ffd..b7e8748 100644 (file)
 }
 
 #left {
-  height: -webkit-flex(1);
+  -webkit-flex: 1;
   background-color: yellow;
   width: 100%;
 }
 
 #content {
-  height: -webkit-flex(1);
+  -webkit-flex: 1;
   background-color: grey;
   width: 100%;
 }
@@ -29,7 +29,7 @@
 
 function setFlex(id, animationPercentage, start, end) {
   var flexValue = start + ((end - start) * animationPercentage);
-  document.getElementById(id).style.height = "-webkit-flex(" + flexValue + " 0 0px)";
+  document.getElementById(id).style.webkitFlex = flexValue + " 0 0px";
 }
 
 function step(count) {
index 32b1a89..1f833df 100644 (file)
@@ -7,12 +7,12 @@
 }
 
 #left {
-  width: -webkit-flex(1);
+  -webkit-flex: 1;
   background-color: yellow;
 }
 
 #content {
-  width: -webkit-flex(1);
+  -webkit-flex: 1;
   background-color: grey;
 }
 </style>
@@ -24,7 +24,7 @@
 
 function setFlex(id, animationPercentage, start, end) {
   var flexValue = start + ((end - start) * animationPercentage);
-  document.getElementById(id).style.width = "-webkit-flex(" + flexValue + " 0 0px)";
+  document.getElementById(id).style.webkitFlex = flexValue + " 0 0px";
 }
 
 function step(count) {
index 884ed80..a75b9bc 100644 (file)
@@ -56,162 +56,162 @@ if (window.layoutTestController)
 <body onload="checkFlexBoxen()">
 
 <div class="flexbox rtl">
-  <div data-expected-width="75" data-offset-x="525" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
-  <div data-expected-width="350" data-offset-x="175" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
-  <div data-expected-width="75" data-offset-x="100" style="width: -webkit-flex(1 0 0); margin-left: 100px;"></div>
+  <div data-expected-width="75" data-offset-x="525" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div>
+  <div data-expected-width="350" data-offset-x="175" style="-webkit-flex: 2 0 0; padding: 0 100px;"></div>
+  <div data-expected-width="75" data-offset-x="100" style="-webkit-flex: 1 0 0; margin-left: 100px;"></div>
 </div>
 
 <div class="flexbox rtl">
-  <div data-expected-width="75" data-offset-x="525" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
-  <div data-expected-width="350" data-offset-x="175" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
-  <div data-expected-width="75" data-offset-x="0" style="width: -webkit-flex(1 0 0); -webkit-margin-start: 100px;"></div>
+  <div data-expected-width="75" data-offset-x="525" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div>
+  <div data-expected-width="350" data-offset-x="175" style="-webkit-flex: 2 0 0; padding: 0 100px;"></div>
+  <div data-expected-width="75" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-margin-start: 100px;"></div>
 </div>
 
 <div class="flexbox rtl" style="-webkit-margin-start: 20px;-webkit-margin-end: 50px;">
-  <div data-expected-width="75" data-offset-x="575" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
-  <div data-expected-width="350" data-offset-x="225" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
-  <div data-expected-width="75" data-offset-x="50" style="width: -webkit-flex(1 0 0); -webkit-margin-start: 100px;"></div>
+  <div data-expected-width="75" data-offset-x="575" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div>
+  <div data-expected-width="350" data-offset-x="225" style="-webkit-flex: 2 0 0; padding: 0 100px;"></div>
+  <div data-expected-width="75" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-margin-start: 100px;"></div>
 </div>
 
 <div style="position:relative">
 <div class="flexbox vertical-lr">
-  <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0);"></div>
-  <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
-  <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
+  <div data-expected-height="150" data-offset-y="0" style="-webkit-flex: 1 0 0;"></div>
+  <div data-expected-height="300" data-offset-y="150" style="-webkit-flex: 2 0 0;"></div>
+  <div data-expected-height="150" data-offset-y="450" style="-webkit-flex: 1 0 0;"></div>
 </div>
 </div>
 
 <div style="position:relative">
 <div class="flexbox vertical-lr">
-  <div data-expected-height="150" data-offset-y="0" data-offset-x="50" style="height: -webkit-flex(1 0 0); margin: 0 100px 0 50px;"></div>
-  <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
-  <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
+  <div data-expected-height="150" data-offset-y="0" data-offset-x="50" style="-webkit-flex: 1 0 0; margin: 0 100px 0 50px;"></div>
+  <div data-expected-height="300" data-offset-y="150" style="-webkit-flex: 2 0 0;"></div>
+  <div data-expected-height="150" data-offset-y="450" style="-webkit-flex: 1 0 0;"></div>
 </div>
 </div>
 
 <div style="position:relative">
 <div class="flexbox vertical-lr">
-  <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0);"></div>
-  <div data-expected-height="300" data-offset-y="150" class="bt" style="height: -webkit-flex(2 0 0);"></div>
-  <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
+  <div data-expected-height="150" data-offset-y="0" style="-webkit-flex: 1 0 0;"></div>
+  <div data-expected-height="300" data-offset-y="150" class="bt" style="-webkit-flex: 2 0 0;"></div>
+  <div data-expected-height="150" data-offset-y="450" style="-webkit-flex: 1 0 0;"></div>
 </div>
 </div>
 
 <div style="position:relative">
 <div class="flexbox vertical-lr">
-  <div data-expected-height="450" data-offset-y="0" style="height: -webkit-flex(1 0 0);-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webkit-padding-after:100px;"></div>
-  <div data-expected-height="100" data-offset-y="450" style="height: -webkit-flex(2 0 0);"></div>
-  <div data-expected-height="50" data-offset-y="550" style="height: -webkit-flex(1 0 0);"></div>
+  <div data-expected-height="450" data-offset-y="0" style="-webkit-flex: 1 0 0;-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webkit-padding-after:100px;"></div>
+  <div data-expected-height="100" data-offset-y="450" style="-webkit-flex: 2 0 0;"></div>
+  <div data-expected-height="50" data-offset-y="550" style="-webkit-flex: 1 0 0;"></div>
 </div>
 </div>
 
 <div style="position:relative">
 <div class="flexbox vertical-lr">
-  <div data-expected-height="300" data-offset-y="0" class="bt" style="height: -webkit-flex(1 0 0);-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webkit-padding-after:100px;"></div>
-  <div data-expected-height="200" data-offset-y="300" style="height: -webkit-flex(2 0 0);"></div>
-  <div data-expected-height="100" data-offset-y="500" style="height: -webkit-flex(1 0 0);"></div>
+  <div data-expected-height="300" data-offset-y="0" class="bt" style="-webkit-flex: 1 0 0;-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webkit-padding-after:100px;"></div>
+  <div data-expected-height="200" data-offset-y="300" style="-webkit-flex: 2 0 0;"></div>
+  <div data-expected-height="100" data-offset-y="500" style="-webkit-flex: 1 0 0;"></div>
 </div>
 </div>
 
 
 <div style="position:relative">
 <div class="flexbox vertical-lr">
-  <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0); margin: auto 0;"></div>
-  <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
-  <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
+  <div data-expected-height="150" data-offset-y="0" style="-webkit-flex: 1 0 0; margin: auto 0;"></div>
+  <div data-expected-height="300" data-offset-y="150" style="-webkit-flex: 2 0 0;"></div>
+  <div data-expected-height="150" data-offset-y="450" style="-webkit-flex: 1 0 0;"></div>
 </div>
 </div>
 
 <div style="position:relative">
 <div class="flexbox vertical-lr">
-  <div data-expected-height="75" data-offset-y="0" style="height: -webkit-flex(1 0 0);margin: auto 0;"></div>
-  <div data-expected-height="450" data-offset-y="75" style="height: -webkit-flex(2 0 auto);"><div data-offset-y="75" style="width:200px;height:300px;background-color:orange;"></div></div>
-  <div data-expected-height="75" data-offset-y="525" style="height: -webkit-flex(1 0 0);"></div>
+  <div data-expected-height="75" data-offset-y="0" style="-webkit-flex: 1 0 0;margin: auto 0;"></div>
+  <div data-expected-height="450" data-offset-y="75" style="-webkit-flex: 2 0 auto; height: auto;"><div data-offset-y="75" style="width:200px;height:300px;background-color:orange;"></div></div>
+  <div data-expected-height="75" data-offset-y="525" style="-webkit-flex: 1 0 0;"></div>
 </div>
 </div>
 
 <div style="position:relative">
 <div class="flexbox vertical-lr">
-  <div data-expected-height="75" data-offset-y="0" style="height: -webkit-flex(1 0 0);margin: auto 0;"></div>
-  <div data-expected-height="450" data-offset-y="75" class="bt" style="height: -webkit-flex(2 0 auto);"><div style="width:200px;height:300px;background-color:orange;"></div></div>
-  <div data-expected-height="75" data-offset-y="525" style="height: -webkit-flex(1 0 0);"></div>
+  <div data-expected-height="75" data-offset-y="0" style="-webkit-flex: 1 0 0;margin: auto 0;"></div>
+  <div data-expected-height="450" data-offset-y="75" class="bt" style="-webkit-flex: 2 0 auto; height: auto;"><div style="width:200px;height:300px;background-color:orange;"></div></div>
+  <div data-expected-height="75" data-offset-y="525" style="-webkit-flex: 1 0 0;"></div>
 </div>
 </div>
 
 <div style="position:relative">
 <div class="flexbox vertical-lr">
-  <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0);-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-after:0;;"></div>
-  <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
-  <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
+  <div data-expected-height="150" data-offset-y="0" style="-webkit-flex: 1 0 0;-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-after:0;;"></div>
+  <div data-expected-height="300" data-offset-y="150" style="-webkit-flex: 2 0 0;"></div>
+  <div data-expected-height="150" data-offset-y="450" style="-webkit-flex: 1 0 0;"></div>
 </div>
 </div>
 
 <div style="position:relative">
 <div class="flexbox vertical-lr">
-  <div data-expected-height="150" data-offset-y="0" class="bt" style="height: -webkit-flex(1 0 0);-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-after:0;;"></div>
-  <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
-  <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
+  <div data-expected-height="150" data-offset-y="0" class="bt" style="-webkit-flex: 1 0 0;-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-after:0;;"></div>
+  <div data-expected-height="300" data-offset-y="150" style="-webkit-flex: 2 0 0;"></div>
+  <div data-expected-height="150" data-offset-y="450" style="-webkit-flex: 1 0 0;"></div>
 </div>
 </div>
 
 <div style="position:relative">
 <div class="flexbox vertical-lr rtl">
-  <div data-expected-height="75" data-offset-y="525" style="height: -webkit-flex(1 0 0); margin: auto 0;"></div>
-  <div data-expected-height="350" data-offset-y="175" class="bt" style="height: -webkit-flex(2 0 0); padding: 100px 0;"></div>
-  <div data-expected-height="75" data-offset-y="0" style="height: -webkit-flex(1 0 0); -webkit-margin-start: 100px;"></div>
+  <div data-expected-height="75" data-offset-y="525" style="-webkit-flex: 1 0 0; margin: auto 0;"></div>
+  <div data-expected-height="350" data-offset-y="175" class="bt" style="-webkit-flex: 2 0 0; padding: 100px 0;"></div>
+  <div data-expected-height="75" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-margin-start: 100px;"></div>
 </div>
 </div>
 
 <div class="flexbox vertical-lr">
-  <div data-expected-height="350" style="height: -webkit-flex(1 1 400px); min-height: 350px;"></div>
-  <div data-expected-height="250" style="height: -webkit-flex(1 1 400px);"></div>
+  <div data-expected-height="350" style="-webkit-flex: 1 1 400px; min-height: 350px;"></div>
+  <div data-expected-height="250" style="-webkit-flex: 1 1 400px;"></div>
 </div>
 
 <div style="position:relative">
 <div class="flexbox vertical-rl">
-  <div data-expected-height="150" data-offset-y="0" data-offset-x="580" style="height: -webkit-flex(1 0 0);"></div>
-  <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style="height: -webkit-flex(2 0 0);"></div>
-  <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style="height: -webkit-flex(1 0 0);"></div>
+  <div data-expected-height="150" data-offset-y="0" data-offset-x="580" style="-webkit-flex: 1 0 0;"></div>
+  <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style="-webkit-flex: 2 0 0;"></div>
+  <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style="-webkit-flex: 1 0 0;"></div>
 </div>
 </div>
 
 <div style="position:relative">
 <div class="flexbox vertical-rl">
-  <div data-expected-height="150" data-offset-y="0" data-offset-x="480" style="height: -webkit-flex(1 0 0); margin: 0 100px 0 50px;"></div>
-  <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style="height: -webkit-flex(2 0 0);"></div>
-  <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style="height: -webkit-flex(1 0 0);"></div>
+  <div data-expected-height="150" data-offset-y="0" data-offset-x="480" style="-webkit-flex: 1 0 0; margin: 0 100px 0 50px;"></div>
+  <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style="-webkit-flex: 2 0 0;"></div>
+  <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style="-webkit-flex: 1 0 0;"></div>
 </div>
 </div>
 
 <div style="position:relative">
 <div class="flexbox bt" style="height:200px">
-  <div data-expected-width="150" data-offset-y="180" data-offset-x="0" style="width: -webkit-flex(1 0 0);"></div>
-  <div data-expected-width="300" data-offset-y="180" data-offset-x="150" style="width: -webkit-flex(2 0 0);"></div>
-  <div data-expected-width="150" data-offset-y="180" data-offset-x="450" style="width: -webkit-flex(1 0 0);"></div>
+  <div data-expected-width="150" data-offset-y="180" data-offset-x="0" style="-webkit-flex: 1 0 0;"></div>
+  <div data-expected-width="300" data-offset-y="180" data-offset-x="150" style="-webkit-flex: 2 0 0;"></div>
+  <div data-expected-width="150" data-offset-y="180" data-offset-x="450" style="-webkit-flex: 1 0 0;"></div>
 </div>
 </div>
 
 <div style="position:relative">
 <div class="flexbox bt" style="height:200px">
-  <div data-expected-width="150" data-offset-y="130" data-offset-x="0" style="width: -webkit-flex(1 0 0); margin: 100px 0 50px 0;"></div>
-  <div data-expected-width="300" data-offset-y="180" data-offset-x="150" style="width: -webkit-flex(2 0 0);"></div>
-  <div data-expected-width="150" data-offset-y="180" data-offset-x="450" style="width: -webkit-flex(1 0 0);"></div>
+  <div data-expected-width="150" data-offset-y="130" data-offset-x="0" style="-webkit-flex: 1 0 0; margin: 100px 0 50px 0;"></div>
+  <div data-expected-width="300" data-offset-y="180" data-offset-x="150" style="-webkit-flex: 2 0 0;"></div>
+  <div data-expected-width="150" data-offset-y="180" data-offset-x="450" style="-webkit-flex: 1 0 0;"></div>
 </div>
 </div>
 
 <div style="position: relative;">
     <div data-expected-width="600" style="direction: rtl; display: -webkit-flexbox; margin-left: 10px; margin-right:20px;" class="flexbox">
-      <div data-expected-width="75" data-offset-x="535" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
-      <div data-expected-width="350" data-offset-x="185" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
-      <div data-expected-width="75" data-offset-x="10" style="width: -webkit-flex(1 0 0);margin-right: 100px;"></div>
+      <div data-expected-width="75" data-offset-x="535" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div>
+      <div data-expected-width="350" data-offset-x="185" style="-webkit-flex: 2 0 0; padding: 0 100px;"></div>
+      <div data-expected-width="75" data-offset-x="10" style="-webkit-flex: 1 0 0;margin-right: 100px;"></div>
     </div>
 </div>
 
 <div style="position: relative;">
     <div data-expected-width="700" style="direction: rtl; display: -webkit-flexbox; padding-left: 10px; padding-right: 20px; border-style: solid; border-left: 30px solid; border-right: 40px solid;" class="flexbox ">
-      <div data-expected-width="75" data-offset-x="565" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
-      <div data-expected-width="350" data-offset-x="215" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
-      <div data-expected-width="75" data-offset-x="40" style="width: -webkit-flex(1 0 0);margin-right: 100px;"></div>
+      <div data-expected-width="75" data-offset-x="565" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div>
+      <div data-expected-width="350" data-offset-x="215" style="-webkit-flex: 2 0 0; padding: 0 100px;"></div>
+      <div data-expected-width="75" data-offset-x="40" style="-webkit-flex: 1 0 0;margin-right: 100px;"></div>
     </div>
 </div>
 
index 219aa49..2c53906 100644 (file)
@@ -1,3 +1,22 @@
+2012-04-03  Tony Chang  <tony@chromium.org>
+
+        Implement new flex property and deprecate flex function
+        https://bugs.webkit.org/show_bug.cgi?id=82128
+
+        Reviewed by Ojan Vafai.
+
+        No new tests. Tests were updated to use the new syntax and they should
+        all pass.
+
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::RenderFlexibleBox::preferredFlexLengthForChild): Grab the
+        preferred size and if it's auto, fall back to width or height.
+        (WebCore::RenderFlexibleBox::preferredMainAxisContentExtentForChild):
+        (WebCore::RenderFlexibleBox::positiveFlexForChild): Use the value from the flex property.
+        (WebCore::RenderFlexibleBox::negativeFlexForChild): Use the value from the flex property.
+        (WebCore::RenderFlexibleBox::computeMainAxisPreferredSizes):
+        * rendering/RenderFlexibleBox.h:
+
 2012-03-15  Anders Carlsson  <andersca@apple.com>
 
         Search result page scrolls up before the correct page opens from google search
index 49226d3..048103f 100644 (file)
@@ -345,9 +345,12 @@ bool RenderFlexibleBox::isMultiline() const
     return style()->flexWrap() != FlexWrapNone;
 }
 
-Length RenderFlexibleBox::mainAxisLengthForChild(RenderBox* child) const
+Length RenderFlexibleBox::preferredLengthForChild(RenderBox* child) const
 {
-    return isHorizontalFlow() ? child->style()->width() : child->style()->height();
+    Length flexLength = child->style()->flexPreferredSize();
+    if (flexLength.isAuto())
+        flexLength = isHorizontalFlow() ? child->style()->width() : child->style()->height();
+    return flexLength;
 }
 
 Length RenderFlexibleBox::crossAxisLength() const
@@ -584,7 +587,7 @@ LayoutUnit RenderFlexibleBox::mainAxisScrollbarExtentForChild(RenderBox* child)
 
 LayoutUnit RenderFlexibleBox::preferredMainAxisContentExtentForChild(RenderBox* child) const
 {
-    Length mainAxisLength = mainAxisLengthForChild(child);
+    Length mainAxisLength = preferredLengthForChild(child);
     if (mainAxisLength.isAuto()) {
         LayoutUnit mainAxisExtent = hasOrthogonalFlow(child) ? child->logicalHeight() : child->maxPreferredLogicalWidth();
         return mainAxisExtent - mainAxisBorderAndPaddingExtentForChild(child);
@@ -636,16 +639,6 @@ void RenderFlexibleBox::layoutFlexItems(FlexOrderIterator& iterator, WTF::Vector
     }
 }
 
-float RenderFlexibleBox::positiveFlexForChild(RenderBox* child) const
-{
-    return isHorizontalFlow() ? child->style()->flexboxWidthPositiveFlex() : child->style()->flexboxHeightPositiveFlex();
-}
-
-float RenderFlexibleBox::negativeFlexForChild(RenderBox* child) const
-{
-    return isHorizontalFlow() ? child->style()->flexboxWidthNegativeFlex() : child->style()->flexboxHeightNegativeFlex();
-}
-
 LayoutUnit RenderFlexibleBox::availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, RenderBox* child)
 {
     LayoutUnit childCrossExtent = crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child);
@@ -671,7 +664,7 @@ void RenderFlexibleBox::computeMainAxisPreferredSizes(bool relayoutChildren, Fle
             continue;
 
         child->clearOverrideSize();
-        if (mainAxisLengthForChild(child).isAuto()) {
+        if (preferredLengthForChild(child).isAuto()) {
             if (!relayoutChildren)
                 child->setChildNeedsLayout(true);
             child->layoutIfNeeded();
@@ -745,8 +738,8 @@ bool RenderFlexibleBox::computeNextFlexLine(FlexOrderIterator& iterator, Ordered
             break;
         orderedChildren.append(child);
         preferredMainAxisExtent += childMainAxisMarginBoxExtent;
-        totalPositiveFlexibility += positiveFlexForChild(child);
-        totalNegativeFlexibility += negativeFlexForChild(child);
+        totalPositiveFlexibility += child->style()->positiveFlex();
+        totalNegativeFlexibility += child->style()->negativeFlex();
 
         LayoutUnit childMinMaxAppliedMainAxisExtent = adjustChildSizeForMinAndMax(child, childMainAxisExtent, flexboxAvailableContentExtent);
         minMaxAppliedMainAxisExtent += childMinMaxAppliedMainAxisExtent - childMainAxisExtent + childMainAxisMarginBoxExtent;
@@ -760,8 +753,8 @@ void RenderFlexibleBox::freezeViolations(const WTF::Vector<Violation>& violation
         RenderBox* child = violations[i].child;
         LayoutUnit childSize = violations[i].childSize;
         availableFreeSpace -= childSize - preferredMainAxisContentExtentForChild(child);
-        totalPositiveFlexibility -= positiveFlexForChild(child);
-        totalNegativeFlexibility -= negativeFlexForChild(child);
+        totalPositiveFlexibility -= child->style()->positiveFlex();
+        totalNegativeFlexibility -= child->style()->negativeFlex();
         inflexibleItems.set(child, childSize);
     }
 }
@@ -788,9 +781,9 @@ bool RenderFlexibleBox::resolveFlexibleLengths(FlexSign flexSign, const OrderedF
             LayoutUnit preferredChildSize = preferredMainAxisContentExtentForChild(child);
             LayoutUnit childSize = preferredChildSize;
             if (availableFreeSpace > 0 && totalPositiveFlexibility > 0 && flexSign == PositiveFlexibility)
-                childSize += lroundf(availableFreeSpace * positiveFlexForChild(child) / totalPositiveFlexibility);
+                childSize += lroundf(availableFreeSpace * child->style()->positiveFlex() / totalPositiveFlexibility);
             else if (availableFreeSpace < 0 && totalNegativeFlexibility > 0  && flexSign == NegativeFlexibility)
-                childSize += lroundf(availableFreeSpace * negativeFlexForChild(child) / totalNegativeFlexibility);
+                childSize += lroundf(availableFreeSpace * child->style()->negativeFlex() / totalNegativeFlexibility);
 
             LayoutUnit adjustedChildSize = adjustChildSizeForMinAndMax(child, childSize, flexboxAvailableContentExtent);
             childSizes.append(adjustedChildSize);
index b4ec781..b97457b 100644 (file)
@@ -69,7 +69,7 @@ private:
     bool isLeftToRightFlow() const;
     bool isMultiline() const;
     Length crossAxisLength() const;
-    Length mainAxisLengthForChild(RenderBox* child) const;
+    Length preferredLengthForChild(RenderBox* child) const;
     void setCrossAxisExtent(LayoutUnit);
     LayoutUnit crossAxisExtentForChild(RenderBox* child);
     LayoutUnit mainAxisExtentForChild(RenderBox* child);
@@ -103,9 +103,6 @@ private:
     void layoutFlexItems(FlexOrderIterator&, WTF::Vector<LineContext>&);
     void repositionLogicalHeightDependentFlexItems(FlexOrderIterator&, WTF::Vector<LineContext>&, LayoutUnit& oldClientAfterEdge);
 
-    float positiveFlexForChild(RenderBox* child) const;
-    float negativeFlexForChild(RenderBox* child) const;
-
     LayoutUnit availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, RenderBox*);
     LayoutUnit marginBoxAscentForChild(RenderBox*);