Bug 801098: Unprefix flexbox properties & keywords (still preffed off by default). r=dbaron

dom/interfaces/css/nsIDOMCSS2Properties.idl

@@ -14,7 +14,7 @@
  * http://www.w3.org/TR/DOM-Level-2-Style
  */
 
-[builtinclass, scriptable, uuid(2ae61565-1a66-4e6e-960d-b999c631e5c6)]
+[builtinclass, scriptable, uuid(df3491fd-2243-427f-bd93-b0dd3c3e7834)]
 interface nsIDOMCSS2Properties : nsISupports
 {
            attribute DOMString        background;
@@ -803,30 +803,30 @@ interface nsIDOMCSS2Properties : nsISupports
            attribute DOMString        MozBorderImage;
                                         // raises(DOMException) on setting
 
-           attribute DOMString        MozAlignItems;
+           attribute DOMString        alignItems;
                                         // raises(DOMException) on setting
 
-           attribute DOMString        MozAlignSelf;
+           attribute DOMString        alignSelf;
                                         // raises(DOMException) on setting
 
-           attribute DOMString        MozFlex;
+           attribute DOMString        flex;
                                         // raises(DOMException) on setting
 
-           attribute DOMString        MozFlexBasis;
+           attribute DOMString        flexBasis;
                                         // raises(DOMException) on setting
 
-           attribute DOMString        MozFlexDirection;
+           attribute DOMString        flexDirection;
                                         // raises(DOMException) on setting
 
-           attribute DOMString        MozFlexGrow;
+           attribute DOMString        flexGrow;
                                         // raises(DOMException) on setting
 
-           attribute DOMString        MozFlexShrink;
+           attribute DOMString        flexShrink;
                                         // raises(DOMException) on setting
 
-           attribute DOMString        MozOrder;
+           attribute DOMString        order;
                                         // raises(DOMException) on setting
 
-           attribute DOMString        MozJustifyContent;
+           attribute DOMString        justifyContent;
                                         // raises(DOMException) on setting
 };

layout/base/nsLayoutUtils.cpp

@@ -132,7 +132,7 @@ static ContentMap& GetContentMap() {
 
 // When the pref "layout.css.flexbox.enabled" changes, this function is invoked
 // to let us update kDisplayKTable, to selectively disable or restore the
-// entries for "-moz-flex" and "-moz-inline-flex" in that table.
+// entries for "flex" and "inline-flex" in that table.
 #ifdef MOZ_FLEXBOX
 static int
 FlexboxEnabledPrefChangeCallback(const char* aPrefName, void* aClosure)
@@ -146,13 +146,13 @@ FlexboxEnabledPrefChangeCallback(const char* aPrefName, void* aClosure)
     Preferences::GetBool(FLEXBOX_ENABLED_PREF_NAME, false);
 
   if (!sAreFlexKeywordIndicesInitialized) {
-    // First run: find the position of "-moz-flex" and "-moz-inline-flex" in
+    // First run: find the position of "flex" and "inline-flex" in
     // kDisplayKTable.
     sIndexOfFlexInDisplayTable =
-      nsCSSProps::FindIndexOfKeyword(eCSSKeyword__moz_flex,
+      nsCSSProps::FindIndexOfKeyword(eCSSKeyword_flex,
                                      nsCSSProps::kDisplayKTable);
     sIndexOfInlineFlexInDisplayTable =
-      nsCSSProps::FindIndexOfKeyword(eCSSKeyword__moz_inline_flex,
+      nsCSSProps::FindIndexOfKeyword(eCSSKeyword_inline_flex,
                                      nsCSSProps::kDisplayKTable);
 
     sAreFlexKeywordIndicesInitialized = true;
@@ -162,11 +162,11 @@ FlexboxEnabledPrefChangeCallback(const char* aPrefName, void* aClosure)
   // depending on whether the flexbox pref is enabled vs. disabled.
   if (sIndexOfFlexInDisplayTable >= 0) {
     nsCSSProps::kDisplayKTable[sIndexOfFlexInDisplayTable] =
-      isFlexboxEnabled ? eCSSKeyword__moz_flex : eCSSKeyword_UNKNOWN;
+      isFlexboxEnabled ? eCSSKeyword_flex : eCSSKeyword_UNKNOWN;
   }
   if (sIndexOfInlineFlexInDisplayTable >= 0) {
     nsCSSProps::kDisplayKTable[sIndexOfInlineFlexInDisplayTable] =
-      isFlexboxEnabled ? eCSSKeyword__moz_inline_flex : eCSSKeyword_UNKNOWN;
+      isFlexboxEnabled ? eCSSKeyword_inline_flex : eCSSKeyword_UNKNOWN;
   }
 
   return 0;

layout/generic/crashtests/737313-1.html

@@ -1,5 +1,5 @@
 <!-- Any copyright is dedicated to the Public Domain.
    - http://creativecommons.org/publicdomain/zero/1.0/ -->
 <html>
-  <span><div style="display: -moz-flexbox"></div></span>
+  <span><div style="display: flex"></div></span>
 </html>

layout/generic/crashtests/737313-2.html

@@ -1,5 +1,5 @@
 <!-- Any copyright is dedicated to the Public Domain.
    - http://creativecommons.org/publicdomain/zero/1.0/ -->
 <html>
-  <span>some text<img><div style="display: -moz-flexbox"></div></span>
+  <span>some text<img><div style="display: flex"></div></span>
 </html>

layout/generic/crashtests/737313-3.html

@@ -1,5 +1,5 @@
 <!-- Any copyright is dedicated to the Public Domain.
    - http://creativecommons.org/publicdomain/zero/1.0/ -->
 <html>
-  <span><div>a block</div><div style="display: -moz-flexbox"></div></span>
+  <span><div>a block</div><div style="display: flex"></div></span>
 </html>

layout/generic/crashtests/crashtests.list

@@ -388,8 +388,8 @@ load 700031.xhtml
 load 718516.html
 load first-letter-638937.html
 load first-letter-638937-2.html
-load 737313-1.html
-load 737313-2.html
-load 737313-3.html
+test-pref(layout.css.flexbox.enabled,true) load 737313-1.html
+test-pref(layout.css.flexbox.enabled,true) load 737313-2.html
+test-pref(layout.css.flexbox.enabled,true) load 737313-3.html
 load 762764-1.html
 load 786740-1.html

layout/generic/nsFlexContainerFrame.cpp

@@ -5,7 +5,7 @@
  * version 2.0 (the "License"). You can obtain a copy of the License at
  * http://mozilla.org/MPL/2.0/. */
 
-/* rendering object for CSS display: -moz-flex */
+/* rendering object for CSS "display: flex" */
 
 #include "nsFlexContainerFrame.h"
 #include "nsLayoutUtils.h"

layout/generic/nsFlexContainerFrame.h

@@ -5,7 +5,7 @@
  * version 2.0 (the "License"). You can obtain a copy of the License at
  * http://mozilla.org/MPL/2.0/. */
 
-/* rendering object for CSS display: -moz-flex */
+/* rendering object for CSS "display: flex" */
 
 #ifndef nsFlexContainerFrame_h___
 #define nsFlexContainerFrame_h___

layout/reftests/flexbox/flexbox-align-self-baseline-horiz-1.xhtml

@@ -12,8 +12,8 @@
   <head>
     <style>
       .flexbox {
-        display: -moz-flex;
-        -moz-align-items: baseline;
+        display: flex;
+        align-items: baseline;
         border: 1px dashed blue;
         font: 14px sans-serif;
       }

layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.xhtml

@@ -15,8 +15,8 @@
   <head>
     <style>
       .flexbox {
-        display: -moz-flex;
-        -moz-align-items: baseline;
+        display: flex;
+        align-items: baseline;
         border: 1px dashed blue;
         font: 14px sans-serif;
       }

layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3.xhtml

@@ -15,8 +15,8 @@
   <head>
     <style>
       .flexbox {
-        display: -moz-flex;
-        -moz-align-items: baseline;
+        display: flex;
+        align-items: baseline;
         border: 1px dashed blue;
         font: 14px sans-serif;
       }

layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4.xhtml

@@ -10,8 +10,8 @@
   <head>
     <style>
       div.flexbox {
-        display: -moz-flex;
-        -moz-align-items: baseline;
+        display: flex;
+        align-items: baseline;
         border: 1px dashed blue;
         font: 14px sans-serif;
       }

layout/reftests/flexbox/flexbox-align-self-horiz-1-block.xhtml

@@ -12,17 +12,17 @@
         border: 1px dashed blue;
         height: 200px;
         width: -moz-fit-content;
-        display: -moz-flex;
+        display: flex;
         font-size: 10px;
         line-height: 10px;
 
         /* Any children whose align-self is 'auto' (or unspecified, or
            -moz-initial) will end up taking this value from us: */
-        -moz-align-items: center;
+        align-items: center;
 
         /* Any children whose align-self is 'inherit' will end up
            inheriting this value from us: */
-        -moz-align-self: flex-end;
+        align-self: flex-end;
       }
 
       .flexbox > div {
@@ -38,38 +38,38 @@
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        -moz-align-self: flex-start;
+        align-self: flex-start;
       }
       .flex-end {
         background: orange;
-        -moz-align-self: flex-end;
+        align-self: flex-end;
       }
       .center {
         background: lightblue;
-        -moz-align-self: center;
+        align-self: center;
       }
       .baseline {
         background: teal;
-        -moz-align-self: baseline;
+        align-self: baseline;
       }
       .stretch {
         background: pink;
-        -moz-align-self: stretch;
+        align-self: stretch;
       }
       .auto {
         background: yellow;
-        -moz-align-self: auto;
+        align-self: auto;
       }
       .unspecified {
         background: lightgreen;
       }
       .initial {
         background: aqua;
-        -moz-align-self: -moz-initial;
+        align-self: -moz-initial;
       }
       .inherit {
         background: violet;
-        -moz-align-self: inherit;
+        align-self: inherit;
       }
    </style>
   </head>

layout/reftests/flexbox/flexbox-align-self-horiz-1-table.xhtml

@@ -12,17 +12,17 @@
         border: 1px dashed blue;
         height: 200px;
         width: -moz-fit-content;
-        display: -moz-flex;
+        display: flex;
         font-size: 10px;
         line-height: 10px;
 
         /* Any children whose align-self is 'auto' (or unspecified, or
            -moz-initial) will end up taking this value from us: */
-        -moz-align-items: center;
+        align-items: center;
 
         /* Any children whose align-self is 'inherit' will end up
            inheriting this value from us: */
-        -moz-align-self: flex-end;
+        align-self: flex-end;
       }
 
       .flexbox > * {
@@ -39,39 +39,39 @@
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        -moz-align-self: flex-start;
+        align-self: flex-start;
       }
       .flex-end {
         background: orange;
-        -moz-align-self: flex-end;
+        align-self: flex-end;
       }
       .center {
         background: lightblue;
-        -moz-align-self: center;
+        align-self: center;
       }
       .baseline {
         background: teal;
-        -moz-align-self: baseline;
+        align-self: baseline;
       }
       .stretch {
         background: pink;
-        -moz-align-self: stretch;
+        align-self: stretch;
         display: block; /* XXXdholbert Hackaround for bug 799725 */
       }
       .auto {
         background: yellow;
-        -moz-align-self: auto;
+        align-self: auto;
       }
       .unspecified {
         background: lightgreen;
       }
       .initial {
         background: aqua;
-        -moz-align-self: -moz-initial;
+        align-self: -moz-initial;
       }
       .inherit {
         background: violet;
-        -moz-align-self: inherit;
+        align-self: inherit;
       }
    </style>
   </head>

layout/reftests/flexbox/flexbox-align-self-horiz-2.xhtml

@@ -13,7 +13,7 @@
         border: 1px dashed blue;
         height: 200px;
         width: -moz-fit-content;
-        display: -moz-flex;
+        display: flex;
         font-size: 10px;
         line-height: 10px;
       }
@@ -36,23 +36,23 @@
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        -moz-align-self: flex-start;
+        align-self: flex-start;
       }
       .flex-end {
         background: orange;
-        -moz-align-self: flex-end;
+        align-self: flex-end;
       }
       .center {
         background: lightblue;
-        -moz-align-self: center;
+        align-self: center;
       }
       .baseline {
         background: teal;
-        -moz-align-self: baseline;
+        align-self: baseline;
       }
       .stretch {
         background: pink;
-        -moz-align-self: stretch;
+        align-self: stretch;
       }
    </style>
   </head>

layout/reftests/flexbox/flexbox-align-self-horiz-3.xhtml

@@ -14,7 +14,7 @@
         padding: 3px;
         height: 4px;
         width: -moz-fit-content;
-        display: -moz-flex;
+        display: flex;
         font-size: 10px;
         line-height: 10px;
         font-family: sans-serif;
@@ -33,38 +33,38 @@
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        -moz-align-self: flex-start;
+        align-self: flex-start;
       }
       .flex-end {
         background: orange;
-        -moz-align-self: flex-end;
+        align-self: flex-end;
       }
       .center {
         background: lightblue;
-        -moz-align-self: center;
+        align-self: center;
       }
       .baseline {
         background: teal;
-        -moz-align-self: baseline;
+        align-self: baseline;
       }
       .stretch {
         background: pink;
-        -moz-align-self: stretch;
+        align-self: stretch;
       }
       .auto {
         background: yellow;
-        -moz-align-self: auto;
+        align-self: auto;
       }
       .unspecified {
         background: lightgreen;
       }
       .initial {
         background: aqua;
-        -moz-align-self: -moz-initial;
+        align-self: -moz-initial;
       }
       .inherit {
         background: violet;
-        -moz-align-self: inherit;
+        align-self: inherit;
       }
    </style>
   </head>

layout/reftests/flexbox/flexbox-align-self-horiz-4.xhtml

@@ -14,7 +14,7 @@
         padding: 3px;
         height: 4px;
         width: -moz-fit-content;
-        display: -moz-flex;
+        display: flex;
         font-size: 10px;
         line-height: 10px;
         font-family: sans-serif;
@@ -40,24 +40,24 @@
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        -moz-align-self: flex-start;
+        align-self: flex-start;
       }
       .flex-end {
         background: orange;
-        -moz-align-self: flex-end;
+        align-self: flex-end;
       }
       .center {
         background: lightblue;
-        -moz-align-self: center;
+        align-self: center;
       }
       .baseline {
         background: teal;
-        -moz-align-self: baseline;
+        align-self: baseline;
       }
       .stretch {
         background: pink;
         min-height: 2px;
-        -moz-align-self: stretch;
+        align-self: stretch;
       }
    </style>
   </head>

layout/reftests/flexbox/flexbox-align-self-horiz-5-ref.xhtml

@@ -13,7 +13,7 @@
         border: 1px dashed blue;
         height: 140px;
         width: 400px;
-        display: -moz-flex;
+        display: flex;
         font-size: 10px;
         line-height: 10px;
         margin-bottom: 10px;

layout/reftests/flexbox/flexbox-align-self-horiz-5.xhtml

@@ -14,7 +14,7 @@
         border: 1px dashed blue;
         height: 140px;
         width: 400px;
-        display: -moz-flex;
+        display: flex;
         font-size: 10px;
         line-height: 10px;
         margin-bottom: 10px;
@@ -37,23 +37,23 @@
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        -moz-align-self: flex-start;
+        align-self: flex-start;
       }
       .flex-end {
         background: orange;
-        -moz-align-self: flex-end;
+        align-self: flex-end;
       }
       .center {
         background: lightblue;
-        -moz-align-self: center;
+        align-self: center;
       }
       .baseline {
         background: teal;
-        -moz-align-self: baseline;
+        align-self: baseline;
       }
       .stretch {
         background: pink;
-        -moz-align-self: stretch;
+        align-self: stretch;
       }
    </style>
   </head>

layout/reftests/flexbox/flexbox-align-self-vert-1.xhtml

@@ -11,17 +11,17 @@
       .flexbox {
         border: 1px dashed blue;
         width: 200px;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
         font-size: 10px;
 
         /* Any children whose align-self is 'auto' (or unspecified, or
            -moz-initial) will end up taking this value from us: */
-        -moz-align-items: center;
+        align-items: center;
 
         /* Any children whose align-self is 'inherit' will end up
            inheriting this value from us: */
-        -moz-align-self: flex-end;
+        align-self: flex-end;
       }
 
       .big {
@@ -32,38 +32,38 @@
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        -moz-align-self: flex-start;
+        align-self: flex-start;
       }
       .flex-end {
         background: orange;
-        -moz-align-self: flex-end;
+        align-self: flex-end;
       }
       .center {
         background: lightblue;
-        -moz-align-self: center;
+        align-self: center;
       }
       .baseline {
         background: teal;
-        -moz-align-self: baseline;
+        align-self: baseline;
       }
       .stretch {
         background: pink;
-        -moz-align-self: stretch;
+        align-self: stretch;
       }
       .auto {
         background: yellow;
-        -moz-align-self: auto;
+        align-self: auto;
       }
       .unspecified {
         background: lightgreen;
       }
       .initial {
         background: aqua;
-        -moz-align-self: -moz-initial;
+        align-self: -moz-initial;
       }
       .inherit {
         background: violet;
-        -moz-align-self: inherit;
+        align-self: inherit;
       }
    </style>
   </head>

layout/reftests/flexbox/flexbox-align-self-vert-2.xhtml

@@ -12,8 +12,8 @@
       .flexbox {
         border: 1px dashed blue;
         width: 200px;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
         float: left;
         font-size: 10px;
       }
@@ -34,23 +34,23 @@
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        -moz-align-self: flex-start;
+        align-self: flex-start;
       }
       .flex-end {
         background: orange;
-        -moz-align-self: flex-end;
+        align-self: flex-end;
       }
       .center {
         background: lightblue;
-        -moz-align-self: center;
+        align-self: center;
       }
       .baseline {
         background: teal;
-        -moz-align-self: baseline;
+        align-self: baseline;
       }
       .stretch {
         background: pink;
-        -moz-align-self: stretch;
+        align-self: stretch;
       }
    </style>
   </head>

layout/reftests/flexbox/flexbox-align-self-vert-3.xhtml

@@ -12,8 +12,8 @@
       .flexbox {
         border: 1px dashed blue;
         width: 4px;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
         font-family: sans-serif;
         font-size: 10px;
         margin-left: 80px;
@@ -27,23 +27,23 @@
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        -moz-align-self: flex-start;
+        align-self: flex-start;
       }
       .flex-end {
         background: orange;
-        -moz-align-self: flex-end;
+        align-self: flex-end;
       }
       .center {
         background: lightblue;
-        -moz-align-self: center;
+        align-self: center;
       }
       .baseline {
         background: teal;
-        -moz-align-self: baseline;
+        align-self: baseline;
       }
       .stretch {
         background: pink;
-        -moz-align-self: stretch;
+        align-self: stretch;
       }
    </style>
   </head>

layout/reftests/flexbox/flexbox-align-self-vert-4.xhtml

@@ -12,8 +12,8 @@
       .flexbox {
         border: 1px dashed blue;
         width: 4px;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
         float: left;
         font-family: sans-serif;
         font-size: 10px;
@@ -36,23 +36,23 @@
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        -moz-align-self: flex-start;
+        align-self: flex-start;
       }
       .flex-end {
         background: orange;
-        -moz-align-self: flex-end;
+        align-self: flex-end;
       }
       .center {
         background: lightblue;
-        -moz-align-self: center;
+        align-self: center;
       }
       .baseline {
         background: teal;
-        -moz-align-self: baseline;
+        align-self: baseline;
       }
       .stretch {
         background: pink;
-        -moz-align-self: stretch;
+        align-self: stretch;
       }
    </style>
   </head>

layout/reftests/flexbox/flexbox-align-self-vert-rtl-1.xhtml

@@ -12,19 +12,19 @@
       .flexbox {
         border: 1px dashed blue;
         width: 200px;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
         direction: rtl;
         font-family: sans-serif;
         font-size: 10px;
 
         /* Any children whose align-self is 'auto' (or unspecified, or
            -moz-initial) will end up taking this value from us: */
-        -moz-align-items: center;
+        align-items: center;
 
         /* Any children whose align-self is 'inherit' will end up
            inheriting this value from us: */
-        -moz-align-self: flex-end;
+        align-self: flex-end;
       }
 
       .big {
@@ -35,38 +35,38 @@
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        -moz-align-self: flex-start;
+        align-self: flex-start;
       }
       .flex-end {
         background: orange;
-        -moz-align-self: flex-end;
+        align-self: flex-end;
       }
       .center {
         background: lightblue;
-        -moz-align-self: center;
+        align-self: center;
       }
       .baseline {
         background: teal;
-        -moz-align-self: baseline;
+        align-self: baseline;
       }
       .stretch {
         background: pink;
-        -moz-align-self: stretch;
+        align-self: stretch;
       }
       .auto {
         background: yellow;
-        -moz-align-self: auto;
+        align-self: auto;
       }
       .unspecified {
         background: lightgreen;
       }
       .initial {
         background: aqua;
-        -moz-align-self: -moz-initial;
+        align-self: -moz-initial;
       }
       .inherit {
         background: violet;
-        -moz-align-self: inherit;
+        align-self: inherit;
       }
    </style>
   </head>

layout/reftests/flexbox/flexbox-align-self-vert-rtl-2.xhtml

@@ -13,8 +13,8 @@
       .flexbox {
         border: 1px dashed blue;
         width: 200px;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
         direction: rtl;
         float: left;
         font-family: sans-serif;
@@ -37,23 +37,23 @@
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        -moz-align-self: flex-start;
+        align-self: flex-start;
       }
       .flex-end {
         background: orange;
-        -moz-align-self: flex-end;
+        align-self: flex-end;
       }
       .center {
         background: lightblue;
-        -moz-align-self: center;
+        align-self: center;
       }
       .baseline {
         background: teal;
-        -moz-align-self: baseline;
+        align-self: baseline;
       }
       .stretch {
         background: pink;
-        -moz-align-self: stretch;
+        align-self: stretch;
       }
    </style>
   </head>

layout/reftests/flexbox/flexbox-align-self-vert-rtl-3.xhtml

@@ -13,8 +13,8 @@
       .flexbox {
         border: 1px dashed blue;
         width: 4px;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
         direction: rtl;
         font-family: sans-serif;
         font-size: 10px;
@@ -29,23 +29,23 @@
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        -moz-align-self: flex-start;
+        align-self: flex-start;
       }
       .flex-end {
         background: orange;
-        -moz-align-self: flex-end;
+        align-self: flex-end;
       }
       .center {
         background: lightblue;
-        -moz-align-self: center;
+        align-self: center;
       }
       .baseline {
         background: teal;
-        -moz-align-self: baseline;
+        align-self: baseline;
       }
       .stretch {
         background: pink;
-        -moz-align-self: stretch;
+        align-self: stretch;
       }
    </style>
   </head>

layout/reftests/flexbox/flexbox-align-self-vert-rtl-4.xhtml

@@ -13,8 +13,8 @@
       .flexbox {
         border: 1px dashed blue;
         width: 4px;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
         direction: rtl;
         float: left;
         font-family: sans-serif;
@@ -38,23 +38,23 @@
       /* Classes for each of the various align-self values */
       .flex-start {
         background: lime;
-        -moz-align-self: flex-start;
+        align-self: flex-start;
       }
       .flex-end {
         background: orange;
-        -moz-align-self: flex-end;
+        align-self: flex-end;
       }
       .center {
         background: lightblue;
-        -moz-align-self: center;
+        align-self: center;
       }
       .baseline {
         background: teal;
-        -moz-align-self: baseline;
+        align-self: baseline;
       }
       .stretch {
         background: pink;
-        -moz-align-self: stretch;
+        align-self: stretch;
       }
    </style>
   </head>

layout/reftests/flexbox/flexbox-basic-block-horiz-1.xhtml

@@ -13,26 +13,26 @@
         border: 1px dashed blue;
         width: 200px;
         font-size: 10px;
-        display: -moz-flex;
+        display: flex;
       }
       div.a {
-        -moz-flex: 1 0 30px;
+        flex: 1 0 30px;
         background: lightgreen;
       }
       div.b {
-        -moz-flex: 2 0 20px;
+        flex: 2 0 20px;
         background: yellow;
       }
       div.c {
-        -moz-flex: 3 0 40px;
+        flex: 3 0 40px;
         background: orange;
       }
       div.flexNone {
-        -moz-flex: none;
+        flex: none;
         background: pink;
       }
       div.flexBasis {
-        -moz-flex: 0 0 20px;
+        flex: 0 0 20px;
         background: gray;
       }
       div.spacer {

layout/reftests/flexbox/flexbox-basic-block-vert-1.xhtml

@@ -14,27 +14,27 @@
         border: 1px dashed blue;
         height: 200px;
         font-size: 10px;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       div.a {
-        -moz-flex: 1 0 30px;
+        flex: 1 0 30px;
         background: lightgreen;
       }
       div.b {
-        -moz-flex: 2 0 20px;
+        flex: 2 0 20px;
         background: yellow;
       }
       div.c {
-        -moz-flex: 3 0 40px;
+        flex: 3 0 40px;
         background: orange;
       }
       div.flexNone {
-        -moz-flex: none;
+        flex: none;
         background: pink;
       }
       div.flexBasis {
-        -moz-flex: 0 0 20px;
+        flex: 0 0 20px;
         background: gray;
       }
       div.spacer {

layout/reftests/flexbox/flexbox-basic-canvas-horiz-1.xhtml

@@ -12,8 +12,8 @@
       div.flexbox {
         width: 200px;
         background: lightgreen;
-        display: -moz-flex;
-        -moz-justify-content: space-between;
+        display: flex;
+        justify-content: space-between;
         margin-bottom: 5px;
         line-height: 8px;
       }
@@ -46,8 +46,8 @@
          1st element gets 3/8 of space: 3/8 * 196px = 73.5px
       -->
     <div class="flexbox">
-      <canvas style="-moz-flex: 5"/>
-      <canvas style="-moz-flex: 3"/>
+      <canvas style="flex: 5"/>
+      <canvas style="flex: 3"/>
     </div>
 
     <!-- D) Two canvas elements, getting stretched by different ratios, from
@@ -58,8 +58,8 @@
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <canvas style="width: 33px; -moz-flex: 2 auto"/>
-      <canvas style="width: 13px; -moz-flex: 3 auto"/>
+      <canvas style="width: 33px; flex: 2 auto"/>
+      <canvas style="width: 13px; flex: 3 auto"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
@@ -73,24 +73,24 @@
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <canvas style="width: 150px; -moz-flex: 1 4 auto"/>
-      <canvas style="width: 100px; -moz-flex: 1 3 auto"/>
+      <canvas style="width: 150px; flex: 1 4 auto"/>
+      <canvas style="width: 100px; flex: 1 3 auto"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-width -->
     <!-- Same as (D), except we've added a max-width on the second element.
       -->
     <div class="flexbox">
-      <canvas style="width: 33px; -moz-flex: 2 auto"/>
-      <canvas style="width: 13px; max-width: 90px; -moz-flex: 3 auto"/>
+      <canvas style="width: 33px; flex: 2 auto"/>
+      <canvas style="width: 13px; max-width: 90px; flex: 3 auto"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-width -->
     <!-- Same as (C), except we've added a min-width on the second element.
       -->
     <div class="flexbox">
-      <canvas style="width: 33px; -moz-flex: 2 auto"/>
-      <canvas style="width: 13px; min-width: 150px; -moz-flex: 3 auto"/>
+      <canvas style="width: 33px; flex: 2 auto"/>
+      <canvas style="width: 13px; min-width: 150px; flex: 3 auto"/>
     </div>
 
   </body>

layout/reftests/flexbox/flexbox-basic-canvas-horiz-2-ref.xhtml

@@ -10,7 +10,7 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       canvas {
         width: 50px;

layout/reftests/flexbox/flexbox-basic-canvas-horiz-2.xhtml

@@ -14,7 +14,7 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       canvas {
         width: 1000px;

layout/reftests/flexbox/flexbox-basic-canvas-vert-1.xhtml

@@ -12,9 +12,9 @@
       div.flexbox {
         height: 200px;
         background: lightgreen;
-        display: -moz-flex;
-        -moz-justify-content: space-between;
-        -moz-flex-direction: column;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
         float: left;
         margin-right: 10px;
         font: 8px monospace;
@@ -48,8 +48,8 @@
          1st element gets 3/8 of space: 3/8 * 196px = 73.5px
       -->
     <div class="flexbox">
-      <canvas style="-moz-flex: 5"/>
-      <canvas style="-moz-flex: 3"/>
+      <canvas style="flex: 5"/>
+      <canvas style="flex: 3"/>
     </div>
 
     <!-- D) Two canvas elements, getting stretched by different ratios, from
@@ -60,8 +60,8 @@
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <canvas style="height: 33px; -moz-flex: 2 auto"/>
-      <canvas style="height: 13px; -moz-flex: 3 auto"/>
+      <canvas style="height: 33px; flex: 2 auto"/>
+      <canvas style="height: 13px; flex: 3 auto"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
@@ -75,24 +75,24 @@
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <canvas style="height: 150px; -moz-flex: 1 4 auto"/>
-      <canvas style="height: 100px; -moz-flex: 1 3 auto"/>
+      <canvas style="height: 150px; flex: 1 4 auto"/>
+      <canvas style="height: 100px; flex: 1 3 auto"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-height -->
     <!-- Same as (D), except we've added a max-height on the second element.
       -->
     <div class="flexbox">
-      <canvas style="height: 33px; -moz-flex: 2 auto"/>
-      <canvas style="height: 13px; max-height: 90px; -moz-flex: 3 auto"/>
+      <canvas style="height: 33px; flex: 2 auto"/>
+      <canvas style="height: 13px; max-height: 90px; flex: 3 auto"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-height -->
     <!-- Same as (C), except we've added a min-height on the second element.
       -->
     <div class="flexbox">
-      <canvas style="height: 33px; -moz-flex: 2 auto"/>
-      <canvas style="height: 13px; min-height: 150px; -moz-flex: 3 auto"/>
+      <canvas style="height: 33px; flex: 2 auto"/>
+      <canvas style="height: 13px; min-height: 150px; flex: 3 auto"/>
     </div>
 
   </body>

layout/reftests/flexbox/flexbox-basic-canvas-vert-2-ref.xhtml

@@ -10,8 +10,8 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       canvas {
         width: 50px;

layout/reftests/flexbox/flexbox-basic-canvas-vert-2.xhtml

@@ -14,8 +14,8 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       canvas {
         width: 50px;

layout/reftests/flexbox/flexbox-basic-fieldset-horiz-1.xhtml

@@ -12,8 +12,8 @@
       div.flexbox {
         width: 200px;
         background: lightgreen;
-        display: -moz-flex;
-        -moz-justify-content: space-between;
+        display: flex;
+        justify-content: space-between;
         margin-bottom: 5px;
         line-height: 8px;
       }
@@ -50,8 +50,8 @@
          1st element gets 3/8 of space: 3/8 * 196px = 73.5px
       -->
     <div class="flexbox">
-      <fieldset style="-moz-flex: 5"/>
-      <fieldset style="-moz-flex: 3"/>
+      <fieldset style="flex: 5"/>
+      <fieldset style="flex: 3"/>
     </div>
 
     <!-- D) Two fieldset elements, getting stretched by different ratios, from
@@ -62,8 +62,8 @@
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <fieldset style="width: 33px; -moz-flex: 2 auto"/>
-      <fieldset style="width: 13px; -moz-flex: 3 auto"/>
+      <fieldset style="width: 33px; flex: 2 auto"/>
+      <fieldset style="width: 13px; flex: 3 auto"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
@@ -77,24 +77,24 @@
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <fieldset style="width: 150px; -moz-flex: 1 4 auto"/>
-      <fieldset style="width: 100px; -moz-flex: 1 3 auto"/>
+      <fieldset style="width: 150px; flex: 1 4 auto"/>
+      <fieldset style="width: 100px; flex: 1 3 auto"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-width -->
     <!-- Same as (D), except we've added a max-width on the second element.
       -->
     <div class="flexbox">
-      <fieldset style="width: 33px; -moz-flex: 2 auto"/>
-      <fieldset style="width: 13px; max-width: 90px; -moz-flex: 3 auto"/>
+      <fieldset style="width: 33px; flex: 2 auto"/>
+      <fieldset style="width: 13px; max-width: 90px; flex: 3 auto"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-width -->
     <!-- Same as (C), except we've added a min-width on the second element.
       -->
     <div class="flexbox">
-      <fieldset style="width: 33px; -moz-flex: 2 auto"/>
-      <fieldset style="width: 13px; min-width: 150px; -moz-flex: 3 auto"/>
+      <fieldset style="width: 33px; flex: 2 auto"/>
+      <fieldset style="width: 13px; min-width: 150px; flex: 3 auto"/>
     </div>
 
   </body>

layout/reftests/flexbox/flexbox-basic-fieldset-horiz-2-ref.xhtml

@@ -10,7 +10,7 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       fieldset {
         width: 50px;

layout/reftests/flexbox/flexbox-basic-fieldset-horiz-2.xhtml

@@ -14,7 +14,7 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       fieldset {
         width: 1000px;

layout/reftests/flexbox/flexbox-basic-fieldset-vert-1.xhtml

@@ -12,9 +12,9 @@
       div.flexbox {
         height: 200px;
         background: lightgreen;
-        display: -moz-flex;
-        -moz-justify-content: space-between;
-        -moz-flex-direction: column;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
         float: left;
         margin-right: 10px;
         font: 8px monospace;
@@ -52,8 +52,8 @@
          1st element gets 3/8 of space: 3/8 * 196px = 73.5px
       -->
     <div class="flexbox">
-      <fieldset style="-moz-flex: 5"/>
-      <fieldset style="-moz-flex: 3"/>
+      <fieldset style="flex: 5"/>
+      <fieldset style="flex: 3"/>
     </div>
 
     <!-- D) Two fieldset elements, getting stretched by different ratios, from
@@ -64,8 +64,8 @@
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <fieldset style="height: 33px; -moz-flex: 2 auto"/>
-      <fieldset style="height: 13px; -moz-flex: 3 auto"/>
+      <fieldset style="height: 33px; flex: 2 auto"/>
+      <fieldset style="height: 13px; flex: 3 auto"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
@@ -79,24 +79,24 @@
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <fieldset style="height: 150px; -moz-flex: 1 4 auto"/>
-      <fieldset style="height: 100px; -moz-flex: 1 3 auto"/>
+      <fieldset style="height: 150px; flex: 1 4 auto"/>
+      <fieldset style="height: 100px; flex: 1 3 auto"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-height -->
     <!-- Same as (D), except we've added a max-height on the second element.
       -->
     <div class="flexbox">
-      <fieldset style="height: 33px; -moz-flex: 2 auto"/>
-      <fieldset style="height: 13px; max-height: 90px; -moz-flex: 3 auto"/>
+      <fieldset style="height: 33px; flex: 2 auto"/>
+      <fieldset style="height: 13px; max-height: 90px; flex: 3 auto"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-height -->
     <!-- Same as (C), except we've added a min-height on the second element.
       -->
     <div class="flexbox">
-      <fieldset style="height: 33px; -moz-flex: 2 auto"/>
-      <fieldset style="height: 13px; min-height: 150px; -moz-flex: 3 auto"/>
+      <fieldset style="height: 33px; flex: 2 auto"/>
+      <fieldset style="height: 13px; min-height: 150px; flex: 3 auto"/>
     </div>
 
   </body>

layout/reftests/flexbox/flexbox-basic-fieldset-vert-2-ref.xhtml

@@ -10,8 +10,8 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       fieldset {
         width: 50px;

layout/reftests/flexbox/flexbox-basic-fieldset-vert-2.xhtml

@@ -15,8 +15,8 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       fieldset {
         width: 50px;

layout/reftests/flexbox/flexbox-basic-iframe-horiz-1.xhtml

@@ -12,8 +12,8 @@
       div.flexbox {
         width: 200px;
         background: lightgreen;
-        display: -moz-flex;
-        -moz-justify-content: space-between;
+        display: flex;
+        justify-content: space-between;
         margin-bottom: 5px;
         line-height: 8px;
       }
@@ -47,8 +47,8 @@
          1st element gets 3/8 of space: 3/8 * 196px = 73.5px
       -->
     <div class="flexbox">
-      <iframe style="-moz-flex: 5"/>
-      <iframe style="-moz-flex: 3"/>
+      <iframe style="flex: 5"/>
+      <iframe style="flex: 3"/>
     </div>
 
     <!-- D) Two iframe elements, getting stretched by different ratios, from
@@ -59,8 +59,8 @@
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <iframe style="width: 33px; -moz-flex: 2 auto"/>
-      <iframe style="width: 13px; -moz-flex: 3 auto"/>
+      <iframe style="width: 33px; flex: 2 auto"/>
+      <iframe style="width: 13px; flex: 3 auto"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
@@ -74,24 +74,24 @@
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <iframe style="width: 150px; -moz-flex: 1 4 auto"/>
-      <iframe style="width: 100px; -moz-flex: 1 3 auto"/>
+      <iframe style="width: 150px; flex: 1 4 auto"/>
+      <iframe style="width: 100px; flex: 1 3 auto"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-width -->
     <!-- Same as (D), except we've added a max-width on the second element.
       -->
     <div class="flexbox">
-      <iframe style="width: 33px; -moz-flex: 2 auto"/>
-      <iframe style="width: 13px; max-width: 90px; -moz-flex: 3 auto"/>
+      <iframe style="width: 33px; flex: 2 auto"/>
+      <iframe style="width: 13px; max-width: 90px; flex: 3 auto"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-width -->
     <!-- Same as (C), except we've added a min-width on the second element.
       -->
     <div class="flexbox">
-      <iframe style="width: 33px; -moz-flex: 2 auto"/>
-      <iframe style="width: 13px; min-width: 150px; -moz-flex: 3 auto"/>
+      <iframe style="width: 33px; flex: 2 auto"/>
+      <iframe style="width: 13px; min-width: 150px; flex: 3 auto"/>
     </div>
 
   </body>

layout/reftests/flexbox/flexbox-basic-iframe-horiz-2-ref.xhtml

@@ -10,7 +10,7 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       iframe {
         width: 50px;

layout/reftests/flexbox/flexbox-basic-iframe-horiz-2.xhtml

@@ -14,7 +14,7 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       iframe {
         width: 1000px;

layout/reftests/flexbox/flexbox-basic-iframe-vert-1.xhtml

@@ -12,9 +12,9 @@
       div.flexbox {
         height: 200px;
         background: lightgreen;
-        display: -moz-flex;
-        -moz-justify-content: space-between;
-        -moz-flex-direction: column;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
         float: left;
         margin-right: 10px;
         font: 8px monospace;
@@ -49,8 +49,8 @@
          1st element gets 3/8 of space: 3/8 * 196px = 73.5px
       -->
     <div class="flexbox">
-      <iframe style="-moz-flex: 5"/>
-      <iframe style="-moz-flex: 3"/>
+      <iframe style="flex: 5"/>
+      <iframe style="flex: 3"/>
     </div>
 
     <!-- D) Two iframe elements, getting stretched by different ratios, from
@@ -61,8 +61,8 @@
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <iframe style="height: 33px; -moz-flex: 2 auto"/>
-      <iframe style="height: 13px; -moz-flex: 3 auto"/>
+      <iframe style="height: 33px; flex: 2 auto"/>
+      <iframe style="height: 13px; flex: 3 auto"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
@@ -76,24 +76,24 @@
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <iframe style="height: 150px; -moz-flex: 1 4 auto"/>
-      <iframe style="height: 100px; -moz-flex: 1 3 auto"/>
+      <iframe style="height: 150px; flex: 1 4 auto"/>
+      <iframe style="height: 100px; flex: 1 3 auto"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-height -->
     <!-- Same as (D), except we've added a max-height on the second element.
       -->
     <div class="flexbox">
-      <iframe style="height: 33px; -moz-flex: 2 auto"/>
-      <iframe style="height: 13px; max-height: 90px; -moz-flex: 3 auto"/>
+      <iframe style="height: 33px; flex: 2 auto"/>
+      <iframe style="height: 13px; max-height: 90px; flex: 3 auto"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-height -->
     <!-- Same as (C), except we've added a min-height on the second element.
       -->
     <div class="flexbox">
-      <iframe style="height: 33px; -moz-flex: 2 auto"/>
-      <iframe style="height: 13px; min-height: 150px; -moz-flex: 3 auto"/>
+      <iframe style="height: 33px; flex: 2 auto"/>
+      <iframe style="height: 13px; min-height: 150px; flex: 3 auto"/>
     </div>
 
   </body>

layout/reftests/flexbox/flexbox-basic-iframe-vert-2-ref.xhtml

@@ -10,8 +10,8 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       iframe {
         width: 50px;

layout/reftests/flexbox/flexbox-basic-iframe-vert-2.xhtml

@@ -14,8 +14,8 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       iframe {
         width: 50px;

layout/reftests/flexbox/flexbox-basic-img-horiz-1.xhtml

@@ -12,8 +12,8 @@
       div.flexbox {
         width: 200px;
         background: lightgreen;
-        display: -moz-flex;
-        -moz-justify-content: space-between;
+        display: flex;
+        justify-content: space-between;
         margin-bottom: 5px;
         line-height: 8px;
       }
@@ -46,8 +46,8 @@
          1st element gets 3/8 of space: 3/8 * 196px = 73.5px
       -->
     <div class="flexbox">
-      <img src="solidblue.png" style="-moz-flex: 5"/>
-      <img src="solidblue.png" style="-moz-flex: 3"/>
+      <img src="solidblue.png" style="flex: 5"/>
+      <img src="solidblue.png" style="flex: 3"/>
     </div>
 
     <!-- D) Two img elements, getting stretched by different ratios, from
@@ -58,8 +58,8 @@
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <img src="solidblue.png" style="width: 33px; -moz-flex: 2 auto"/>
-      <img src="solidblue.png" style="width: 13px; -moz-flex: 3 auto"/>
+      <img src="solidblue.png" style="width: 33px; flex: 2 auto"/>
+      <img src="solidblue.png" style="width: 13px; flex: 3 auto"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
@@ -73,26 +73,26 @@
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <img src="solidblue.png" style="width: 150px; -moz-flex: 1 4 auto"/>
-      <img src="solidblue.png" style="width: 100px; -moz-flex: 1 3 auto"/>
+      <img src="solidblue.png" style="width: 150px; flex: 1 4 auto"/>
+      <img src="solidblue.png" style="width: 100px; flex: 1 3 auto"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-width -->
     <!-- Same as (D), except we've added a max-width on the second element.
       -->
     <div class="flexbox">
-      <img src="solidblue.png" style="width: 33px; -moz-flex: 2 auto"/>
+      <img src="solidblue.png" style="width: 33px; flex: 2 auto"/>
       <img src="solidblue.png"
-           style="width: 13px; max-width: 90px; -moz-flex: 3 auto"/>
+           style="width: 13px; max-width: 90px; flex: 3 auto"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-width -->
     <!-- Same as (C), except we've added a min-width on the second element.
       -->
     <div class="flexbox">
-      <img src="solidblue.png" style="width: 33px; -moz-flex: 2 auto"/>
+      <img src="solidblue.png" style="width: 33px; flex: 2 auto"/>
       <img src="solidblue.png"
-           style="width: 13px; min-width: 150px; -moz-flex: 3 auto"/>
+           style="width: 13px; min-width: 150px; flex: 3 auto"/>
     </div>
 
   </body>

layout/reftests/flexbox/flexbox-basic-img-horiz-2-ref.xhtml

@@ -10,7 +10,7 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       img {
         width: 50px;

layout/reftests/flexbox/flexbox-basic-img-horiz-2.xhtml

@@ -14,7 +14,7 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       img {
         width: 1000px;

layout/reftests/flexbox/flexbox-basic-img-vert-1.xhtml

@@ -12,9 +12,9 @@
       div.flexbox {
         height: 200px;
         background: lightgreen;
-        display: -moz-flex;
-        -moz-justify-content: space-between;
-        -moz-flex-direction: column;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
         float: left;
         margin-right: 10px;
         font: 8px monospace;
@@ -48,8 +48,8 @@
          1st element gets 3/8 of space: 3/8 * 196px = 73.5px
       -->
     <div class="flexbox">
-      <img src="solidblue.png" style="-moz-flex: 5"/>
-      <img src="solidblue.png" style="-moz-flex: 3"/>
+      <img src="solidblue.png" style="flex: 5"/>
+      <img src="solidblue.png" style="flex: 3"/>
     </div>
 
     <!-- D) Two img elements, getting stretched by different ratios, from
@@ -60,8 +60,8 @@
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <img src="solidblue.png" style="height: 33px; -moz-flex: 2 auto"/>
-      <img src="solidblue.png" style="height: 13px; -moz-flex: 3 auto"/>
+      <img src="solidblue.png" style="height: 33px; flex: 2 auto"/>
+      <img src="solidblue.png" style="height: 13px; flex: 3 auto"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
@@ -75,26 +75,26 @@
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <img src="solidblue.png" style="height: 150px; -moz-flex: 1 4 auto"/>
-      <img src="solidblue.png" style="height: 100px; -moz-flex: 1 3 auto"/>
+      <img src="solidblue.png" style="height: 150px; flex: 1 4 auto"/>
+      <img src="solidblue.png" style="height: 100px; flex: 1 3 auto"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-height -->
     <!-- Same as (D), except we've added a max-height on the second element.
       -->
     <div class="flexbox">
-      <img src="solidblue.png" style="height: 33px; -moz-flex: 2 auto"/>
+      <img src="solidblue.png" style="height: 33px; flex: 2 auto"/>
       <img src="solidblue.png"
-           style="height: 13px; max-height: 90px; -moz-flex: 3 auto"/>
+           style="height: 13px; max-height: 90px; flex: 3 auto"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-height -->
     <!-- Same as (C), except we've added a min-height on the second element.
       -->
     <div class="flexbox">
-      <img src="solidblue.png" style="height: 33px; -moz-flex: 2 auto"/>
+      <img src="solidblue.png" style="height: 33px; flex: 2 auto"/>
       <img src="solidblue.png"
-           style="height: 13px; min-height: 150px; -moz-flex: 3 auto"/>
+           style="height: 13px; min-height: 150px; flex: 3 auto"/>
     </div>
 
   </body>

layout/reftests/flexbox/flexbox-basic-img-vert-2-ref.xhtml

@@ -10,8 +10,8 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       img {
         width: 50px;

layout/reftests/flexbox/flexbox-basic-img-vert-2.xhtml

@@ -14,8 +14,8 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       img {
         width: 50px;

layout/reftests/flexbox/flexbox-basic-textarea-horiz-1.xhtml

@@ -12,8 +12,8 @@
       div.flexbox {
         width: 200px;
         background: lightgreen;
-        display: -moz-flex;
-        -moz-justify-content: space-between;
+        display: flex;
+        justify-content: space-between;
         margin-bottom: 5px;
         line-height: 8px;
       }
@@ -51,8 +51,8 @@
          1st element gets 3/8 of space: 3/8 * 196px = 73.5px
       -->
     <div class="flexbox">
-      <textarea style="-moz-flex: 5"/>
-      <textarea style="-moz-flex: 3"/>
+      <textarea style="flex: 5"/>
+      <textarea style="flex: 3"/>
     </div>
 
     <!-- D) Two textarea elements, getting stretched by different ratios, from
@@ -63,8 +63,8 @@
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <textarea style="width: 33px; -moz-flex: 2 auto"/>
-      <textarea style="width: 13px; -moz-flex: 3 auto"/>
+      <textarea style="width: 33px; flex: 2 auto"/>
+      <textarea style="width: 13px; flex: 3 auto"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
@@ -78,26 +78,26 @@
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <textarea style="width: 150px; -moz-flex: 1 4 auto"/>
-      <textarea style="width: 100px; -moz-flex: 1 3 auto"/>
+      <textarea style="width: 150px; flex: 1 4 auto"/>
+      <textarea style="width: 100px; flex: 1 3 auto"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-width -->
     <!-- Same as (D), except we've added a max-width on the second element.
       -->
     <div class="flexbox">
-      <textarea style="width: 33px; -moz-flex: 2 auto"/>
+      <textarea style="width: 33px; flex: 2 auto"/>
       <textarea
-         style="width: 13px; max-width: 90px; -moz-flex: 3 auto"/>
+         style="width: 13px; max-width: 90px; flex: 3 auto"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-width -->
     <!-- Same as (C), except we've added a min-width on the second element.
       -->
     <div class="flexbox">
-      <textarea style="width: 33px; -moz-flex: 2 auto"/>
+      <textarea style="width: 33px; flex: 2 auto"/>
       <textarea
-         style="width: 13px; min-width: 150px; -moz-flex: 3 auto"/>
+         style="width: 13px; min-width: 150px; flex: 3 auto"/>
     </div>
 
   </body>

layout/reftests/flexbox/flexbox-basic-textarea-horiz-2-ref.xhtml

@@ -10,7 +10,7 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       textarea {
         width: 50px;

layout/reftests/flexbox/flexbox-basic-textarea-horiz-2.xhtml

@@ -14,7 +14,7 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       textarea {
         width: 1000px;

layout/reftests/flexbox/flexbox-basic-textarea-vert-1.xhtml

@@ -12,9 +12,9 @@
       div.flexbox {
         height: 200px;
         background: lightgreen;
-        display: -moz-flex;
-        -moz-justify-content: space-between;
-        -moz-flex-direction: column;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
         float: left;
         margin-right: 10px;
         font: 8px monospace;
@@ -54,8 +54,8 @@
          1st element gets 3/8 of space: 3/8 * 196px = 73.5px
       -->
     <div class="flexbox">
-      <textarea style="-moz-flex: 5"/>
-      <textarea style="-moz-flex: 3"/>
+      <textarea style="flex: 5"/>
+      <textarea style="flex: 3"/>
     </div>
 
     <!-- D) Two textarea elements, getting stretched by different ratios, from
@@ -66,8 +66,8 @@
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <textarea style="height: 33px; -moz-flex: 2 auto"/>
-      <textarea style="height: 13px; -moz-flex: 3 auto"/>
+      <textarea style="height: 33px; flex: 2 auto"/>
+      <textarea style="height: 13px; flex: 3 auto"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
@@ -81,26 +81,26 @@
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <textarea style="height: 150px; -moz-flex: 1 4 auto"/>
-      <textarea style="height: 100px; -moz-flex: 1 3 auto"/>
+      <textarea style="height: 150px; flex: 1 4 auto"/>
+      <textarea style="height: 100px; flex: 1 3 auto"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-height -->
     <!-- Same as (D), except we've added a max-height on the second element.
       -->
     <div class="flexbox">
-      <textarea style="height: 33px; -moz-flex: 2 auto"/>
+      <textarea style="height: 33px; flex: 2 auto"/>
       <textarea
-         style="height: 13px; max-height: 90px; -moz-flex: 3 auto"/>
+         style="height: 13px; max-height: 90px; flex: 3 auto"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-height -->
     <!-- Same as (C), except we've added a min-height on the second element.
       -->
     <div class="flexbox">
-      <textarea style="height: 33px; -moz-flex: 2 auto"/>
+      <textarea style="height: 33px; flex: 2 auto"/>
       <textarea
-         style="height: 13px; min-height: 150px; -moz-flex: 3 auto"/>
+         style="height: 13px; min-height: 150px; flex: 3 auto"/>
     </div>
 
   </body>

layout/reftests/flexbox/flexbox-basic-textarea-vert-2-ref.xhtml

@@ -10,8 +10,8 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       textarea {
         width: 50px;

layout/reftests/flexbox/flexbox-basic-textarea-vert-2.xhtml

@@ -15,8 +15,8 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       textarea {
         width: 50px;

layout/reftests/flexbox/flexbox-basic-video-horiz-1.xhtml

@@ -12,8 +12,8 @@
       div.flexbox {
         width: 200px;
         background: lightgreen;
-        display: -moz-flex;
-        -moz-justify-content: space-between;
+        display: flex;
+        justify-content: space-between;
         margin-bottom: 5px;
         line-height: 8px;
       }
@@ -46,8 +46,8 @@
          1st element gets 3/8 of space: 3/8 * 196px = 73.5px
       -->
     <div class="flexbox">
-      <video style="-moz-flex: 5"/>
-      <video style="-moz-flex: 3"/>
+      <video style="flex: 5"/>
+      <video style="flex: 3"/>
     </div>
 
     <!-- D) Two video elements, getting stretched by different ratios, from
@@ -58,8 +58,8 @@
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <video style="width: 33px; -moz-flex: 2 auto"/>
-      <video style="width: 13px; -moz-flex: 3 auto"/>
+      <video style="width: 33px; flex: 2 auto"/>
+      <video style="width: 13px; flex: 3 auto"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
@@ -73,24 +73,24 @@
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <video style="width: 150px; -moz-flex: 1 4 auto"/>
-      <video style="width: 100px; -moz-flex: 1 3 auto"/>
+      <video style="width: 150px; flex: 1 4 auto"/>
+      <video style="width: 100px; flex: 1 3 auto"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-width -->
     <!-- Same as (D), except we've added a max-width on the second element.
       -->
     <div class="flexbox">
-      <video style="width: 33px; -moz-flex: 2 auto"/>
-      <video style="width: 13px; max-width: 90px; -moz-flex: 3 auto"/>
+      <video style="width: 33px; flex: 2 auto"/>
+      <video style="width: 13px; max-width: 90px; flex: 3 auto"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-width -->
     <!-- Same as (C), except we've added a min-width on the second element.
       -->
     <div class="flexbox">
-      <video style="width: 33px; -moz-flex: 2 auto"/>
-      <video style="width: 13px; min-width: 150px; -moz-flex: 3 auto"/>
+      <video style="width: 33px; flex: 2 auto"/>
+      <video style="width: 13px; min-width: 150px; flex: 3 auto"/>
     </div>
 
   </body>

layout/reftests/flexbox/flexbox-basic-video-horiz-2-ref.xhtml

@@ -10,7 +10,7 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       video {
         width: 50px;

layout/reftests/flexbox/flexbox-basic-video-horiz-2.xhtml

@@ -14,7 +14,7 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       video {
         width: 1000px;

layout/reftests/flexbox/flexbox-basic-video-vert-1.xhtml

@@ -12,9 +12,9 @@
       div.flexbox {
         height: 200px;
         background: lightgreen;
-        display: -moz-flex;
-        -moz-justify-content: space-between;
-        -moz-flex-direction: column;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
         float: left;
         margin-right: 10px;
         font: 8px monospace;
@@ -48,8 +48,8 @@
          1st element gets 3/8 of space: 3/8 * 196px = 73.5px
       -->
     <div class="flexbox">
-      <video style="-moz-flex: 5"/>
-      <video style="-moz-flex: 3"/>
+      <video style="flex: 5"/>
+      <video style="flex: 3"/>
     </div>
 
     <!-- D) Two video elements, getting stretched by different ratios, from
@@ -60,8 +60,8 @@
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <video style="height: 33px; -moz-flex: 2 auto"/>
-      <video style="height: 13px; -moz-flex: 3 auto"/>
+      <video style="height: 33px; flex: 2 auto"/>
+      <video style="height: 13px; flex: 3 auto"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
@@ -75,24 +75,24 @@
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <video style="height: 150px; -moz-flex: 1 4 auto"/>
-      <video style="height: 100px; -moz-flex: 1 3 auto"/>
+      <video style="height: 150px; flex: 1 4 auto"/>
+      <video style="height: 100px; flex: 1 3 auto"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-height -->
     <!-- Same as (D), except we've added a max-height on the second element.
       -->
     <div class="flexbox">
-      <video style="height: 33px; -moz-flex: 2 auto"/>
-      <video style="height: 13px; max-height: 90px; -moz-flex: 3 auto"/>
+      <video style="height: 33px; flex: 2 auto"/>
+      <video style="height: 13px; max-height: 90px; flex: 3 auto"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-height -->
     <!-- Same as (C), except we've added a min-height on the second element.
       -->
     <div class="flexbox">
-      <video style="height: 33px; -moz-flex: 2 auto"/>
-      <video style="height: 13px; min-height: 150px; -moz-flex: 3 auto"/>
+      <video style="height: 33px; flex: 2 auto"/>
+      <video style="height: 13px; min-height: 150px; flex: 3 auto"/>
     </div>
 
   </body>

layout/reftests/flexbox/flexbox-basic-video-vert-2-ref.xhtml

@@ -10,8 +10,8 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       video {
         width: 50px;

layout/reftests/flexbox/flexbox-basic-video-vert-2.xhtml

@@ -14,8 +14,8 @@
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       video {
         width: 50px;

layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1-ref.xhtml

@@ -15,8 +15,8 @@
       div.flexbox {
         border: 1px dashed blue;
         width: 300px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
         margin-bottom: 1px;
         white-space: pre;
       }

layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.xhtml

@@ -19,8 +19,8 @@
       div.flexbox {
         border: 1px dashed blue;
         width: 300px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
         margin-bottom: 1px;
         white-space: pre;
       }

layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2-ref.xhtml

@@ -18,8 +18,8 @@
       div.flexbox {
         border: 1px dashed blue;
         width: 300px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
         margin-bottom: 1px;
         white-space: pre;
       }

layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2.xhtml

@@ -22,8 +22,8 @@
       div.flexbox {
         border: 1px dashed blue;
         width: 300px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
         margin-bottom: 1px;
         white-space: pre;
       }

layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3-ref.xhtml

@@ -18,8 +18,8 @@
       div.flexbox {
         border: 1px dashed blue;
         width: 300px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
         margin-bottom: 1px;
         white-space: pre;
       }

layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3.xhtml

@@ -22,8 +22,8 @@
       div.flexbox {
         border: 1px dashed blue;
         width: 300px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
         margin-bottom: 1px;
         white-space: pre;
       }

layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-1.xhtml

@@ -19,8 +19,8 @@
       div.flexbox {
         border: 1px dashed blue;
         width: 300px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
         margin-bottom: 1px;
         white-space: pre;
       }

layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-2.xhtml

@@ -25,8 +25,8 @@
       div.flexbox {
         border: 1px dashed blue;
         width: 300px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
         margin-bottom: 1px;
         white-space: pre;
       }

layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml

@@ -25,8 +25,8 @@
       div.flexbox {
         border: 1px dashed blue;
         width: 300px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
         margin-bottom: 1px;
         white-space: pre;
       }

layout/reftests/flexbox/flexbox-dyn-insertAroundText-1-ref.xhtml

@@ -15,8 +15,8 @@
       div.flexbox {
         border: 1px dashed blue;
         width: 300px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
         margin-bottom: 1px;
         white-space: pre;
       }

layout/reftests/flexbox/flexbox-dyn-insertAroundText-1.xhtml

@@ -19,8 +19,8 @@
       div.flexbox {
         border: 1px dashed blue;
         width: 300px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
         margin-bottom: 1px;
         white-space: pre;
       }

layout/reftests/flexbox/flexbox-dyn-insertAroundText-2-ref.xhtml

@@ -21,8 +21,8 @@
       div.flexbox {
         border: 1px dashed blue;
         width: 300px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
         margin-bottom: 1px;
         white-space: pre;
       }

layout/reftests/flexbox/flexbox-dyn-insertAroundText-2.xhtml

@@ -25,8 +25,8 @@
       div.flexbox {
         border: 1px dashed blue;
         width: 300px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
         margin-bottom: 1px;
         white-space: pre;
       }

layout/reftests/flexbox/flexbox-dyn-insertAroundText-3-ref.xhtml

@@ -21,8 +21,8 @@
       div.flexbox {
         border: 1px dashed blue;
         width: 300px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
         margin-bottom: 1px;
         white-space: pre;
       }

layout/reftests/flexbox/flexbox-dyn-insertAroundText-3.xhtml

@@ -25,8 +25,8 @@
       div.flexbox {
         border: 1px dashed blue;
         width: 300px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
         margin-bottom: 1px;
         white-space: pre;
       }

layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1-ref.xhtml

@@ -21,8 +21,8 @@
       div.flexbox {
         border: 1px dashed blue;
         width: 300px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
         margin-bottom: 1px;
         white-space: pre;
       }

layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1.xhtml

@@ -24,8 +24,8 @@
       div.flexbox {
         border: 1px dashed blue;
         width: 300px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
         margin-bottom: 1px;
         white-space: pre;
       }

layout/reftests/flexbox/flexbox-empty-1a.xhtml

@@ -10,7 +10,7 @@
       div.flexbox {
         border: 1px dotted blue;
         background: yellow;
-        display: -moz-flex;
+        display: flex;
       }
 
       div.withPadding {

layout/reftests/flexbox/flexbox-empty-1b.xhtml

@@ -16,7 +16,7 @@
       div.flexbox {
         border: 1px dotted blue;
         background: yellow;
-        display: -moz-flex;
+        display: flex;
       }
 
       div.withPadding {

layout/reftests/flexbox/flexbox-float-1-ref.xhtml

@@ -7,12 +7,12 @@
   <head>
     <style>
       div.flexbox {
-        display: -moz-flex;
+        display: flex;
         width: 400px;
         margin-bottom: 2px;
         font-family: sans-serif;
         background: lightgreen;
-        -moz-justify-content: space-around;
+        justify-content: space-around;
       }
     </style>
   </head>

layout/reftests/flexbox/flexbox-float-1a.xhtml

@@ -11,12 +11,12 @@
   <head>
     <style>
       div.flexbox {
-        display: -moz-flex;
+        display: flex;
         width: 400px;
         margin-bottom: 2px;
         font-family: sans-serif;
         background: lightgreen;
-        -moz-justify-content: space-around;
+        justify-content: space-around;
       }
     </style>
   </head>

layout/reftests/flexbox/flexbox-float-1b.xhtml

@@ -11,12 +11,12 @@
   <head>
     <style>
       div.flexbox {
-        display: -moz-flex;
+        display: flex;
         width: 400px;
         margin-bottom: 2px;
         font-family: sans-serif;
         background: lightgreen;
-        -moz-justify-content: space-around;
+        justify-content: space-around;
       }
     </style>
   </head>

layout/reftests/flexbox/flexbox-float-1c.xhtml

@@ -43,12 +43,12 @@
     </script>
     <style>
       div.flexbox {
-        display: -moz-flex;
+        display: flex;
         width: 400px;
         margin-bottom: 2px;
         font-family: sans-serif;
         background: lightgreen;
-        -moz-justify-content: space-around;
+        justify-content: space-around;
       }
     </style>
   </head>

layout/reftests/flexbox/flexbox-float-1d.xhtml

@@ -43,12 +43,12 @@
     </script>
     <style>
       div.flexbox {
-        display: -moz-flex;
+        display: flex;
         width: 400px;
         margin-bottom: 2px;
         font-family: sans-serif;
         background: lightgreen;
-        -moz-justify-content: space-around;
+        justify-content: space-around;
       }
     </style>
   </head>

layout/reftests/flexbox/flexbox-float-2-ref.xhtml

@@ -17,7 +17,7 @@
         width: 400px;
         margin-bottom: 2px;
         background: lightgreen;
-        -moz-justify-content: space-around;
+        justify-content: space-around;
       }
     </style>
   </head>

layout/reftests/flexbox/flexbox-float-2a.xhtml

@@ -11,12 +11,12 @@
   <head>
     <style>
       div.flexbox {
-        display: -moz-flex;
+        display: flex;
         font-family: sans-serif;
         width: 400px;
         margin-bottom: 2px;
         background: lightgreen;
-        -moz-justify-content: space-around;
+        justify-content: space-around;
       }
     </style>
   </head>

layout/reftests/flexbox/flexbox-float-2b.xhtml

@@ -15,12 +15,12 @@
   <head>
     <style>
       div.flexbox {
-        display: -moz-flex;
+        display: flex;
         font-family: sans-serif;
         width: 400px;
         margin-bottom: 2px;
         background: lightgreen;
-        -moz-justify-content: space-around;
+        justify-content: space-around;
       }
     </style>
   </head>

layout/reftests/flexbox/flexbox-inlinecontent-horiz-1a.xhtml

@@ -15,18 +15,18 @@
       div.flexbox {
         font: 10px Ahem;
         width: 200px;
-        display: -moz-flex;
+        display: flex;
       }
       div.a {
-        -moz-flex: 1 0 20px;
+        flex: 1 0 20px;
         background: lightgreen;
       }
       div.b {
-        -moz-flex: 2 0 30px;
+        flex: 2 0 30px;
         background: yellow;
       }
       div.inflex {
-        -moz-flex: 0 0 20px;
+        flex: 0 0 20px;
         background: gray;
       }
     </style>

layout/reftests/flexbox/flexbox-inlinecontent-horiz-1b.xhtml

@@ -31,18 +31,18 @@
       div.flexbox {
         font: 10px Ahem;
         width: 200px;
-        display: -moz-flex;
+        display: flex;
       }
       div.a {
-        -moz-flex: 1 0 20px;
+        flex: 1 0 20px;
         background: lightgreen;
       }
       div.b {
-        -moz-flex: 2 0 30px;
+        flex: 2 0 30px;
         background: yellow;
       }
       div.inflex {
-        -moz-flex: 0 0 20px;
+        flex: 0 0 20px;
         background: gray;
       }
     </style>

layout/reftests/flexbox/flexbox-inlinecontent-horiz-2-ref.xhtml

@@ -14,14 +14,14 @@
       div { height: 100px; }
       div.flexbox {
         width: 200px;
-        display: -moz-flex;
+        display: flex;
       }
       div.a {
-        -moz-flex: 1 0 20px;
+        flex: 1 0 20px;
         background: lightgreen;
       }
       div.inflex {
-        -moz-flex: 0 0 20px;
+        flex: 0 0 20px;
         background: gray;
       }
     </style>

layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.xhtml

@@ -22,18 +22,18 @@
       div { height: 100px; }
       div.flexbox {
         width: 200px;
-        display: -moz-flex;
+        display: flex;
       }
       div.a {
-        -moz-flex: 1 0 20px;
+        flex: 1 0 20px;
         background: lightgreen;
       }
       div.b {
-        -moz-flex: 2 0 30px;
+        flex: 2 0 30px;
         background: yellow;
       }
       div.inflex {
-        -moz-flex: 0 0 20px;
+        flex: 0 0 20px;
         background: gray;
       }
     </style>

layout/reftests/flexbox/flexbox-inlinecontent-horiz-3a.xhtml

@@ -13,7 +13,7 @@
     <style>
       div#flexbox {
         width: 100px;
-        display: -moz-flex;
+        display: flex;
         font: 10px Ahem;
       }
     </style>

layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.xhtml

@@ -28,7 +28,7 @@
     <style>
       div#flexbox {
         width: 100px;
-        display: -moz-flex;
+        display: flex;
         font: 10px Ahem;
       }
     </style>

layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.xhtml

@@ -28,7 +28,7 @@
     <style>
       div#flexbox {
         width: 100px;
-        display: -moz-flex;
+        display: flex;
         font: 10px Ahem;
       }
     </style>

layout/reftests/flexbox/flexbox-inlinecontent-horiz-4.xhtml

@@ -5,7 +5,7 @@
 -->
 <!--
      This test verifies that a flex container which only contains text
-     will render correctly. We use -moz-justify-content to position the text
+     will render correctly. We use justify-content to position the text
      in the center of the flex container, as a sanity-check to be sure we
      are in fact getting a flex container.
 -->
@@ -16,8 +16,8 @@
         width: 200px;
         height: 100px;
         background: lightgreen;
-        -moz-justify-content: center;
-        display: -moz-flex;
+        justify-content: center;
+        display: flex;
       }
     </style>
   </head>