Bug 801098: Unprefix flexbox properties & keywords (still preffed off by default). r=dbaron
authorDaniel Holbert <dholbert@cs.stanford.edu>
Mon, 15 Oct 2012 12:42:43 -0700
changeset 110451 8a070a22c369a739cae1a5ed7f17c3bee14d5c84
parent 110450 683148127c83afeda769ec0f3da166dde0772e58
child 110452 f8e52edff71e0f3cb5c9d6530838763c4049fbec
push id93
push usernmatsakis@mozilla.com
push dateWed, 31 Oct 2012 21:26:57 +0000
reviewersdbaron
bugs801098
milestone19.0a1
Bug 801098: Unprefix flexbox properties & keywords (still preffed off by default). r=dbaron
dom/interfaces/css/nsIDOMCSS2Properties.idl
layout/base/nsLayoutUtils.cpp
layout/generic/crashtests/737313-1.html
layout/generic/crashtests/737313-2.html
layout/generic/crashtests/737313-3.html
layout/generic/crashtests/crashtests.list
layout/generic/nsFlexContainerFrame.cpp
layout/generic/nsFlexContainerFrame.h
layout/reftests/flexbox/flexbox-align-self-baseline-horiz-1.xhtml
layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.xhtml
layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3.xhtml
layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4.xhtml
layout/reftests/flexbox/flexbox-align-self-horiz-1-block.xhtml
layout/reftests/flexbox/flexbox-align-self-horiz-1-table.xhtml
layout/reftests/flexbox/flexbox-align-self-horiz-2.xhtml
layout/reftests/flexbox/flexbox-align-self-horiz-3.xhtml
layout/reftests/flexbox/flexbox-align-self-horiz-4.xhtml
layout/reftests/flexbox/flexbox-align-self-horiz-5-ref.xhtml
layout/reftests/flexbox/flexbox-align-self-horiz-5.xhtml
layout/reftests/flexbox/flexbox-align-self-vert-1.xhtml
layout/reftests/flexbox/flexbox-align-self-vert-2.xhtml
layout/reftests/flexbox/flexbox-align-self-vert-3.xhtml
layout/reftests/flexbox/flexbox-align-self-vert-4.xhtml
layout/reftests/flexbox/flexbox-align-self-vert-rtl-1.xhtml
layout/reftests/flexbox/flexbox-align-self-vert-rtl-2.xhtml
layout/reftests/flexbox/flexbox-align-self-vert-rtl-3.xhtml
layout/reftests/flexbox/flexbox-align-self-vert-rtl-4.xhtml
layout/reftests/flexbox/flexbox-basic-block-horiz-1.xhtml
layout/reftests/flexbox/flexbox-basic-block-vert-1.xhtml
layout/reftests/flexbox/flexbox-basic-canvas-horiz-1.xhtml
layout/reftests/flexbox/flexbox-basic-canvas-horiz-2-ref.xhtml
layout/reftests/flexbox/flexbox-basic-canvas-horiz-2.xhtml
layout/reftests/flexbox/flexbox-basic-canvas-vert-1.xhtml
layout/reftests/flexbox/flexbox-basic-canvas-vert-2-ref.xhtml
layout/reftests/flexbox/flexbox-basic-canvas-vert-2.xhtml
layout/reftests/flexbox/flexbox-basic-fieldset-horiz-1.xhtml
layout/reftests/flexbox/flexbox-basic-fieldset-horiz-2-ref.xhtml
layout/reftests/flexbox/flexbox-basic-fieldset-horiz-2.xhtml
layout/reftests/flexbox/flexbox-basic-fieldset-vert-1.xhtml
layout/reftests/flexbox/flexbox-basic-fieldset-vert-2-ref.xhtml
layout/reftests/flexbox/flexbox-basic-fieldset-vert-2.xhtml
layout/reftests/flexbox/flexbox-basic-iframe-horiz-1.xhtml
layout/reftests/flexbox/flexbox-basic-iframe-horiz-2-ref.xhtml
layout/reftests/flexbox/flexbox-basic-iframe-horiz-2.xhtml
layout/reftests/flexbox/flexbox-basic-iframe-vert-1.xhtml
layout/reftests/flexbox/flexbox-basic-iframe-vert-2-ref.xhtml
layout/reftests/flexbox/flexbox-basic-iframe-vert-2.xhtml
layout/reftests/flexbox/flexbox-basic-img-horiz-1.xhtml
layout/reftests/flexbox/flexbox-basic-img-horiz-2-ref.xhtml
layout/reftests/flexbox/flexbox-basic-img-horiz-2.xhtml
layout/reftests/flexbox/flexbox-basic-img-vert-1.xhtml
layout/reftests/flexbox/flexbox-basic-img-vert-2-ref.xhtml
layout/reftests/flexbox/flexbox-basic-img-vert-2.xhtml
layout/reftests/flexbox/flexbox-basic-textarea-horiz-1.xhtml
layout/reftests/flexbox/flexbox-basic-textarea-horiz-2-ref.xhtml
layout/reftests/flexbox/flexbox-basic-textarea-horiz-2.xhtml
layout/reftests/flexbox/flexbox-basic-textarea-vert-1.xhtml
layout/reftests/flexbox/flexbox-basic-textarea-vert-2-ref.xhtml
layout/reftests/flexbox/flexbox-basic-textarea-vert-2.xhtml
layout/reftests/flexbox/flexbox-basic-video-horiz-1.xhtml
layout/reftests/flexbox/flexbox-basic-video-horiz-2-ref.xhtml
layout/reftests/flexbox/flexbox-basic-video-horiz-2.xhtml
layout/reftests/flexbox/flexbox-basic-video-vert-1.xhtml
layout/reftests/flexbox/flexbox-basic-video-vert-2-ref.xhtml
layout/reftests/flexbox/flexbox-basic-video-vert-2.xhtml
layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1-ref.xhtml
layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.xhtml
layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2-ref.xhtml
layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2.xhtml
layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3-ref.xhtml
layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3.xhtml
layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-1.xhtml
layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-2.xhtml
layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml
layout/reftests/flexbox/flexbox-dyn-insertAroundText-1-ref.xhtml
layout/reftests/flexbox/flexbox-dyn-insertAroundText-1.xhtml
layout/reftests/flexbox/flexbox-dyn-insertAroundText-2-ref.xhtml
layout/reftests/flexbox/flexbox-dyn-insertAroundText-2.xhtml
layout/reftests/flexbox/flexbox-dyn-insertAroundText-3-ref.xhtml
layout/reftests/flexbox/flexbox-dyn-insertAroundText-3.xhtml
layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1-ref.xhtml
layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1.xhtml
layout/reftests/flexbox/flexbox-empty-1a.xhtml
layout/reftests/flexbox/flexbox-empty-1b.xhtml
layout/reftests/flexbox/flexbox-float-1-ref.xhtml
layout/reftests/flexbox/flexbox-float-1a.xhtml
layout/reftests/flexbox/flexbox-float-1b.xhtml
layout/reftests/flexbox/flexbox-float-1c.xhtml
layout/reftests/flexbox/flexbox-float-1d.xhtml
layout/reftests/flexbox/flexbox-float-2-ref.xhtml
layout/reftests/flexbox/flexbox-float-2a.xhtml
layout/reftests/flexbox/flexbox-float-2b.xhtml
layout/reftests/flexbox/flexbox-inlinecontent-horiz-1a.xhtml
layout/reftests/flexbox/flexbox-inlinecontent-horiz-1b.xhtml
layout/reftests/flexbox/flexbox-inlinecontent-horiz-2-ref.xhtml
layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.xhtml
layout/reftests/flexbox/flexbox-inlinecontent-horiz-3a.xhtml
layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.xhtml
layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.xhtml
layout/reftests/flexbox/flexbox-inlinecontent-horiz-4.xhtml
layout/reftests/flexbox/flexbox-inlinecontent-horiz-5-ref.xhtml
layout/reftests/flexbox/flexbox-inlinecontent-horiz-5.xhtml
layout/reftests/flexbox/flexbox-inlinecontent-horiz-6-ref.xhtml
layout/reftests/flexbox/flexbox-inlinecontent-horiz-6.xhtml
layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.xhtml
layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1b.xhtml
layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2a.xhtml
layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2b.xhtml
layout/reftests/flexbox/flexbox-invalidation-1-ref.html
layout/reftests/flexbox/flexbox-invalidation-1.html
layout/reftests/flexbox/flexbox-justify-content-horiz-1-ref.xhtml
layout/reftests/flexbox/flexbox-justify-content-horiz-1.xhtml
layout/reftests/flexbox/flexbox-justify-content-horiz-2-ref.xhtml
layout/reftests/flexbox/flexbox-justify-content-horiz-2.xhtml
layout/reftests/flexbox/flexbox-justify-content-horiz-3.xhtml
layout/reftests/flexbox/flexbox-justify-content-horiz-4.xhtml
layout/reftests/flexbox/flexbox-justify-content-horiz-5-ref.xhtml
layout/reftests/flexbox/flexbox-justify-content-horiz-5.xhtml
layout/reftests/flexbox/flexbox-justify-content-vert-1-ref.xhtml
layout/reftests/flexbox/flexbox-justify-content-vert-1.xhtml
layout/reftests/flexbox/flexbox-justify-content-vert-2-ref.xhtml
layout/reftests/flexbox/flexbox-justify-content-vert-2.xhtml
layout/reftests/flexbox/flexbox-justify-content-vert-3.xhtml
layout/reftests/flexbox/flexbox-justify-content-vert-4.xhtml
layout/reftests/flexbox/flexbox-justify-content-vert-5.xhtml
layout/reftests/flexbox/flexbox-margin-auto-horiz-1-ref.xhtml
layout/reftests/flexbox/flexbox-margin-auto-horiz-1.xhtml
layout/reftests/flexbox/flexbox-margin-auto-horiz-2-ref.xhtml
layout/reftests/flexbox/flexbox-margin-auto-horiz-2.xhtml
layout/reftests/flexbox/flexbox-mbp-horiz-1-reverse.xhtml
layout/reftests/flexbox/flexbox-mbp-horiz-1-rtl-reverse.xhtml
layout/reftests/flexbox/flexbox-mbp-horiz-1-rtl.xhtml
layout/reftests/flexbox/flexbox-mbp-horiz-1.xhtml
layout/reftests/flexbox/flexbox-mbp-horiz-2a.xhtml
layout/reftests/flexbox/flexbox-mbp-horiz-2b.xhtml
layout/reftests/flexbox/flexbox-mbp-horiz-3-reverse.xhtml
layout/reftests/flexbox/flexbox-mbp-horiz-3.xhtml
layout/reftests/flexbox/flexbox-minSize-horiz-1.xhtml
layout/reftests/flexbox/flexbox-minSize-vert-1.xhtml
layout/reftests/flexbox/flexbox-position-absolute-1.xhtml
layout/reftests/flexbox/flexbox-position-absolute-2.xhtml
layout/reftests/flexbox/flexbox-position-absolute-3.xhtml
layout/reftests/flexbox/flexbox-position-absolute-4.xhtml
layout/reftests/flexbox/flexbox-position-fixed-1.xhtml
layout/reftests/flexbox/flexbox-position-fixed-2.xhtml
layout/reftests/flexbox/flexbox-position-fixed-3.xhtml
layout/reftests/flexbox/flexbox-position-fixed-4.xhtml
layout/reftests/flexbox/flexbox-pref-1-disabled-ref.xhtml
layout/reftests/flexbox/flexbox-pref-1-enabled-ref.xhtml
layout/reftests/flexbox/flexbox-pref-1.xhtml
layout/reftests/flexbox/flexbox-resizeviewport-1-helper.html
layout/reftests/flexbox/flexbox-sizing-horiz-1-ref.xhtml
layout/reftests/flexbox/flexbox-sizing-horiz-1.xhtml
layout/reftests/flexbox/flexbox-sizing-vert-1-ref.xhtml
layout/reftests/flexbox/flexbox-sizing-vert-1.xhtml
layout/reftests/flexbox/flexbox-table-fixup-1a.xhtml
layout/reftests/flexbox/flexbox-table-fixup-1b.xhtml
layout/reftests/flexbox/flexbox-whitespace-handling-1a.xhtml
layout/reftests/flexbox/flexbox-whitespace-handling-1b.xhtml
layout/reftests/flexbox/flexbox-whitespace-handling-2-ref.xhtml
layout/reftests/flexbox/flexbox-whitespace-handling-2.xhtml
layout/reftests/flexbox/flexbox-whitespace-handling-3-ref.xhtml
layout/reftests/flexbox/flexbox-whitespace-handling-3.xhtml
layout/reftests/flexbox/flexbox-widget-flex-items-1.html
layout/reftests/flexbox/flexbox-widget-flex-items-2.html
layout/reftests/flexbox/flexbox-widget-flex-items-3.html
layout/reftests/flexbox/flexbox-widget-flex-items-4-ref.html
layout/reftests/flexbox/flexbox-widget-flex-items-4.html
layout/style/nsCSSKeywordList.h
layout/style/nsCSSPropList.h
layout/style/nsCSSProps.cpp
layout/style/nsComputedDOMStyle.cpp
layout/style/test/file_flexbox_align_self_auto.html
layout/style/test/file_flexbox_flex_grow_and_shrink.html
layout/style/test/file_flexbox_flex_shorthand.html
layout/style/test/file_flexbox_layout.html
layout/style/test/file_flexbox_order.html
layout/style/test/file_flexbox_order_table.html
layout/style/test/flexbox_layout_testcases.js
layout/style/test/property_database.js
layout/style/test/test_flexbox_flex_shorthand.html
layout/style/test/test_transitions_per_property.html
layout/style/ua.css
--- a/dom/interfaces/css/nsIDOMCSS2Properties.idl
+++ b/dom/interfaces/css/nsIDOMCSS2Properties.idl
@@ -9,17 +9,17 @@
  * The nsIDOMCSS2Properties interface is a datatype for additional
  * reflection of data already provided in nsIDOMCSSStyleDeclaration in
  * the Document Object Model.
  *
  * For more information on this interface please see
  * 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;
                                         // raises(DOMException) on setting
 
            attribute DOMString        backgroundAttachment;
                                         // raises(DOMException) on setting
 
@@ -798,35 +798,35 @@ interface nsIDOMCSS2Properties : nsISupp
                                         // raises(DOMException) on setting
 
            attribute DOMString        borderImageRepeat;
                                         // raises(DOMException) on setting
 
            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
 };
--- a/layout/base/nsLayoutUtils.cpp
+++ b/layout/base/nsLayoutUtils.cpp
@@ -127,51 +127,51 @@ static ContentMap& GetContentMap() {
     sContentMap = new ContentMap();
     sContentMap->Init();
   }
   return *sContentMap;
 }
 
 // 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)
 {
   MOZ_ASSERT(strncmp(aPrefName, FLEXBOX_ENABLED_PREF_NAME,
                      NS_ARRAY_LENGTH(FLEXBOX_ENABLED_PREF_NAME)) == 0,
              "We only registered this callback for a single pref, so it "
              "should only be called for that pref");
 
   bool isFlexboxEnabled =
     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;
   }
 
   // OK -- now, stomp on or restore the "flex" entries in kDisplayKTable,
   // 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;
 }
 #endif // MOZ_FLEXBOX
 
 bool
 nsLayoutUtils::HasAnimationsForCompositor(nsIContent* aContent,
--- a/layout/generic/crashtests/737313-1.html
+++ b/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>
--- a/layout/generic/crashtests/737313-2.html
+++ b/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>
--- a/layout/generic/crashtests/737313-3.html
+++ b/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>
--- a/layout/generic/crashtests/crashtests.list
+++ b/layout/generic/crashtests/crashtests.list
@@ -383,13 +383,13 @@ load 683702-1.xhtml
 load 688996-1.html
 load 688996-2.html
 load 683712.html
 load text-overflow-bug713610.html
 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
--- a/layout/generic/nsFlexContainerFrame.cpp
+++ b/layout/generic/nsFlexContainerFrame.cpp
@@ -1,16 +1,16 @@
 /* -*- Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ts=2 et sw=2 tw=80: */
 
 /* This Source Code is subject to the terms of the Mozilla Public License
  * 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"
 #include "nsPresContext.h"
 #include "nsStyleContext.h"
 #include "prlog.h"
 
 using namespace mozilla::css;
--- a/layout/generic/nsFlexContainerFrame.h
+++ b/layout/generic/nsFlexContainerFrame.h
@@ -1,16 +1,16 @@
 /* -*- Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ts=2 et sw=2 tw=80: */
 
 /* This Source Code is subject to the terms of the Mozilla Public License
  * 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___
 
 #include "nsContainerFrame.h"
 #include "nsTArray.h"
 #include "mozilla/Types.h"
 
--- a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-1.xhtml
@@ -7,18 +7,18 @@
      align-self, implicitly). This test baseline-aligns various types of
      content, and the flexbox's vertical size depends on the aggregate
      post-alignment height of its children.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .flexbox {
-        display: -moz-flex;
-        -moz-align-items: baseline;
+        display: flex;
+        align-items: baseline;
         border: 1px dashed blue;
         font: 14px sans-serif;
       }
 
       i {
         /* XXXdholbert HACK - REMOVEME after bug 783415 lands (which will
            make this display:block conversion happen automatically). */
         display: block;
--- a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.xhtml
@@ -10,18 +10,18 @@
 
      This test checks baseline-alignment for a text <input> field, a
      <textarea>, and a <button> with a multi-line label.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .flexbox {
-        display: -moz-flex;
-        -moz-align-items: baseline;
+        display: flex;
+        align-items: baseline;
         border: 1px dashed blue;
         font: 14px sans-serif;
       }
 
       input { height: 30px; }
 
       textarea {
         width: 30px;
--- a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3.xhtml
@@ -10,18 +10,18 @@
 
      This test checks baseline-alignment for text <button>, for
      various <input> fields, for <label>, and for <fieldset>.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .flexbox {
-        display: -moz-flex;
-        -moz-align-items: baseline;
+        display: flex;
+        align-items: baseline;
         border: 1px dashed blue;
         font: 14px sans-serif;
       }
 
       input, label {
         /* XXXdholbert HACK - REMOVEME after bug 783415 lands (which will
            make this display:block conversion happen automatically). */
         display: block;
--- a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4.xhtml
@@ -5,18 +5,18 @@
 -->
 <!-- Testcase for behavior of the 'baseline' value for align-items (and
      align-self, implicitly). This test baseline-aligns a <table>.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
-        display: -moz-flex;
-        -moz-align-items: baseline;
+        display: flex;
+        align-items: baseline;
         border: 1px dashed blue;
         font: 14px sans-serif;
       }
 
       table {
         margin: 1px; /* to fix fuzziness from text overlapping table border */
       }
 
--- a/layout/reftests/flexbox/flexbox-align-self-horiz-1-block.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-1-block.xhtml
@@ -7,74 +7,74 @@
      values included on different items within a flex container. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .flexbox {
         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 {
         width: 40px;
       }
 
       .big {
         height: 100px;
         font-size: 20px;
         line-height: 20px;
       }
 
       /* 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>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b c d e f</div>
       <div class="flex-end">end</div>
--- a/layout/reftests/flexbox/flexbox-align-self-horiz-1-table.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-1-table.xhtml
@@ -7,76 +7,76 @@
      values included on different items within a flex container. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .flexbox {
         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 > * {
         display: table;
         width: 40px;
       }
 
       .big {
         height: 100px;
         font-size: 20px;
         line-height: 20px;
       }
 
       /* 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>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b c d e f</div>
       <div class="flex-end">end</div>
--- a/layout/reftests/flexbox/flexbox-align-self-horiz-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-2.xhtml
@@ -8,17 +8,17 @@
      margin/border/padding values on each item. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .flexbox {
         border: 1px dashed blue;
         height: 200px;
         width: -moz-fit-content;
-        display: -moz-flex;
+        display: flex;
         font-size: 10px;
         line-height: 10px;
       }
 
       .flexbox > div {
         width: 40px;
         margin:       1px 2px 3px 4px;
         border-width: 2px 3px 4px 5px;
@@ -31,33 +31,33 @@
         height: 100px;
         font-size: 20px;
         line-height: 20px;
       }
 
       /* 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>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b c d e f</div>
       <div class="flex-end">end</div>
--- a/layout/reftests/flexbox/flexbox-align-self-horiz-3.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-3.xhtml
@@ -9,17 +9,17 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .flexbox {
         border: 1px dashed blue;
         padding: 3px;
         height: 4px;
         width: -moz-fit-content;
-        display: -moz-flex;
+        display: flex;
         font-size: 10px;
         line-height: 10px;
         font-family: sans-serif;
       }
 
       .flexbox > div {
         width: 40px;
       }
@@ -28,48 +28,48 @@
         height: 100px;
         font-size: 20px;
         line-height: 20px;
       }
 
       /* 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>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b c d e f</div>
       <div class="flex-end">end</div>
--- a/layout/reftests/flexbox/flexbox-align-self-horiz-4.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-4.xhtml
@@ -9,17 +9,17 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .flexbox {
         border: 1px dashed blue;
         padding: 3px;
         height: 4px;
         width: -moz-fit-content;
-        display: -moz-flex;
+        display: flex;
         font-size: 10px;
         line-height: 10px;
         font-family: sans-serif;
         margin-top: 20px;
         margin-bottom: 120px;
       }
 
       .flexbox > div {
@@ -35,34 +35,34 @@
         height: 100px;
         font-size: 20px;
         line-height: 20px;
       }
 
       /* 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>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b c d e f</div>
       <div class="flex-end">end</div>
--- a/layout/reftests/flexbox/flexbox-align-self-horiz-5-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-5-ref.xhtml
@@ -8,17 +8,17 @@
      in place of the testcase's auto margins. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .flexbox {
         border: 1px dashed blue;
         height: 140px;
         width: 400px;
-        display: -moz-flex;
+        display: flex;
         font-size: 10px;
         line-height: 10px;
         margin-bottom: 10px;
       }
 
       .kidsAutoTop > div      { margin-top: 130px;   }
       .kidsAutoTop > div.big  { margin-top: 60px;   }
       .kidsAutoBoth > div     { margin-top: 65px; }
--- a/layout/reftests/flexbox/flexbox-align-self-horiz-5.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-5.xhtml
@@ -9,17 +9,17 @@
      after the auto margins are resolved).  -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .flexbox {
         border: 1px dashed blue;
         height: 140px;
         width: 400px;
-        display: -moz-flex;
+        display: flex;
         font-size: 10px;
         line-height: 10px;
         margin-bottom: 10px;
       }
 
       .kidsAutoTop > div    { margin-top: auto;    }
       .kidsAutoBottom > div { margin-bottom: auto; }
       .kidsAutoBoth > div   { margin: auto 0; }
@@ -32,33 +32,33 @@
         height: 80px;
         font-size: 20px;
         line-height: 20px;
       }
 
       /* 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>
   <body>
     <div class="flexbox kidsAutoTop">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b c d e f</div>
       <div class="flex-end">end</div>
--- a/layout/reftests/flexbox/flexbox-align-self-vert-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-1.xhtml
@@ -6,69 +6,69 @@
 <!-- Testcase for align-items / align-self behavior, with all the possible
      values included on different items within a flex container. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .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 {
         font-size: 20px;
         width: 50px;
       }
 
       /* 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>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b c d e f</div>
       <div class="flex-end">end</div>
--- a/layout/reftests/flexbox/flexbox-align-self-vert-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-2.xhtml
@@ -7,18 +7,18 @@
      values included on different items within a flex container, and with
      margin/border/padding values on each item. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .flexbox {
         border: 1px dashed blue;
         width: 200px;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
         float: left;
         font-size: 10px;
       }
 
       .flexbox > div {
         margin:       1px 2px 3px 4px;
         border-width: 2px 3px 4px 5px;
         padding:      3px 4px 5px 6px;
@@ -29,33 +29,33 @@
       div.big {
         font-size: 20px;
         width: 50px;
       }
 
       /* 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>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b c d e f</div>
       <div class="flex-end">end</div>
--- a/layout/reftests/flexbox/flexbox-align-self-vert-3.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-3.xhtml
@@ -7,48 +7,48 @@
      values included on different items within a flex container, and with the
      flex container being skinnier than its items. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .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;
       }
 
       div.big {
         font-size: 18px;
         width: 50px;
       }
 
       /* 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>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b</div>
       <div class="flex-end">end</div>
--- a/layout/reftests/flexbox/flexbox-align-self-vert-4.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-4.xhtml
@@ -7,18 +7,18 @@
      values included on different items within a flex container, and with the
      flex container being skinnier than its items. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .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;
         margin-left: 80px;
       }
 
       .flexbox > div {
         margin:       1px 2px 3px 4px;
@@ -31,33 +31,33 @@
       div.big {
         font-size: 18px;
         width: 50px;
       }
 
       /* 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>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b</div>
       <div class="flex-end">end</div>
--- a/layout/reftests/flexbox/flexbox-align-self-vert-rtl-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-1.xhtml
@@ -7,71 +7,71 @@
      values included on different items within a flex container, and with
      "direction: rtl" to swap the horizontal (cross) axis. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .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 {
         font-size: 20px;
         width: 50px;
       }
 
       /* 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>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b c d e f</div>
       <div class="flex-end">end</div>
--- a/layout/reftests/flexbox/flexbox-align-self-vert-rtl-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-2.xhtml
@@ -8,18 +8,18 @@
      margin/border/padding values on each, and with "direction: rtl" to swap
      the horizontal (cross) axis item. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .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;
         font-size: 10px;
       }
 
       .flexbox > div {
         margin:       1px 2px 3px 4px;
@@ -32,33 +32,33 @@
       div.big {
         font-size: 20px;
         width: 50px;
       }
 
       /* 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>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b c d e f</div>
       <div class="flex-end">end</div>
--- a/layout/reftests/flexbox/flexbox-align-self-vert-rtl-3.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-3.xhtml
@@ -8,49 +8,49 @@
      flex container being skinnier than its items, and with "direction: rtl" to
      swap the horizontal (cross) axis. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .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;
         margin-left: 80px;
       }
 
       div.big {
         font-size: 18px;
         width: 50px;
       }
 
       /* 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>
   <body>
     <div class="flexbox">
       <div class="flex-start">start</div>
       <div class="flex-start big">a b</div>
       <div class="flex-end">end</div>
--- a/layout/reftests/flexbox/flexbox-align-self-vert-rtl-4.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-4.xhtml
@@ -8,18 +8,18 @@
      flex container being skinnier than its items, and with "direction: rtl" to
      swap the horizontal (cross) axis. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       .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;
         font-size: 10px;
         margin-left: 80px;
       }
 
       .flexbox > div {
@@ -33,33 +33,33 @@
       div.big {
         font-size: 18px;
         width: 50px;
       }
 
       /* 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>
   <body>
     <!-- (NOTE: this test has the "stretch" divs and the "flex-end" divs
          swapped in the ordering, with respect to the other
          flexbox-align-self-* testcases.  That's because "stretch" and
          "flex-end" overflow in opposite directions, and in RTL mode (with 2
--- a/layout/reftests/flexbox/flexbox-basic-block-horiz-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-block-horiz-1.xhtml
@@ -8,36 +8,36 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div { height: 100px; }
       div.flexbox {
         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 {
         display: inline-block;
         width: 15px;
         height: 15px;
         background: purple;
       }
--- a/layout/reftests/flexbox/flexbox-basic-block-vert-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-block-vert-1.xhtml
@@ -9,37 +9,37 @@
   <head>
     <style>
       div { width: 50px; }
       div.flexbox {
         float: left;
         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 {
         width: 15px;
         height: 15px;
         background: purple;
       }
     </style>
--- a/layout/reftests/flexbox/flexbox-basic-canvas-horiz-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-canvas-horiz-1.xhtml
@@ -7,18 +7,18 @@
      This test checks that canvas elements behave correctly as flex items.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       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;
       }
       canvas {
         min-width: 0;
         width: 10px;
         height: 20px;
         border: 1px dotted green;
@@ -41,57 +41,57 @@
 
          Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
                                  = 196px
 
          1st element gets 5/8 of space: 5/8 * 196px = 122.5px
          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
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          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.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          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>
 </html>
--- a/layout/reftests/flexbox/flexbox-basic-canvas-horiz-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-canvas-horiz-2-ref.xhtml
@@ -5,17 +5,17 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       canvas {
         width: 50px;
         height: 50px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-canvas-horiz-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-canvas-horiz-2.xhtml
@@ -9,17 +9,17 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       canvas {
         width: 1000px;
         height: 50px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-canvas-vert-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-canvas-vert-1.xhtml
@@ -7,19 +7,19 @@
      This test checks that canvas elements behave correctly as flex items.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       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;
       }
       canvas {
         width: 20px;
         height: 10px;
         min-height: 0;
@@ -43,57 +43,57 @@
 
          Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
                                  = 196px
 
          1st element gets 5/8 of space: 5/8 * 196px = 122.5px
          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
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          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.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          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>
 </html>
--- a/layout/reftests/flexbox/flexbox-basic-canvas-vert-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-canvas-vert-2-ref.xhtml
@@ -5,18 +5,18 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       canvas {
         width: 50px;
         height: 50px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-canvas-vert-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-canvas-vert-2.xhtml
@@ -9,18 +9,18 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       canvas {
         width: 50px;
         height: 1000px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-fieldset-horiz-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-fieldset-horiz-1.xhtml
@@ -7,18 +7,18 @@
      This test checks that fieldset elements behave correctly as flex items.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       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;
       }
       fieldset {
         min-width: 0;
         width: 10px;
         height: 20px;
         border: 1px dotted green;
@@ -45,57 +45,57 @@
 
          Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
                                  = 196px
 
          1st element gets 5/8 of space: 5/8 * 196px = 122.5px
          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
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          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.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          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>
 </html>
--- a/layout/reftests/flexbox/flexbox-basic-fieldset-horiz-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-fieldset-horiz-2-ref.xhtml
@@ -5,17 +5,17 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       fieldset {
         width: 50px;
         height: 50px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-fieldset-horiz-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-fieldset-horiz-2.xhtml
@@ -9,17 +9,17 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       fieldset {
         width: 1000px;
         height: 50px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-fieldset-vert-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-fieldset-vert-1.xhtml
@@ -7,19 +7,19 @@
      This test checks that fieldset elements behave correctly as flex items.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       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;
       }
       fieldset {
         width: 20px;
         height: 10px;
         min-height: 0;
@@ -47,57 +47,57 @@
 
          Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
                                  = 196px
 
          1st element gets 5/8 of space: 5/8 * 196px = 122.5px
          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
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          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.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          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>
 </html>
--- a/layout/reftests/flexbox/flexbox-basic-fieldset-vert-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-fieldset-vert-2-ref.xhtml
@@ -5,18 +5,18 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       fieldset {
         width: 50px;
         height: 50px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-fieldset-vert-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-fieldset-vert-2.xhtml
@@ -10,18 +10,18 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       fieldset {
         width: 50px;
         height: 1000px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-iframe-horiz-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-iframe-horiz-1.xhtml
@@ -7,18 +7,18 @@
      This test checks that iframe elements behave correctly as flex items.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       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;
       }
       iframe {
         min-width: 0;
         width: 10px;
         height: 20px;
         border: 1px dotted green;
@@ -42,57 +42,57 @@
 
          Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
                                  = 196px
 
          1st element gets 5/8 of space: 5/8 * 196px = 122.5px
          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
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          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.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          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>
 </html>
--- a/layout/reftests/flexbox/flexbox-basic-iframe-horiz-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-iframe-horiz-2-ref.xhtml
@@ -5,17 +5,17 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       iframe {
         width: 50px;
         height: 50px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-iframe-horiz-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-iframe-horiz-2.xhtml
@@ -9,17 +9,17 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       iframe {
         width: 1000px;
         height: 50px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-iframe-vert-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-iframe-vert-1.xhtml
@@ -7,19 +7,19 @@
      This test checks that iframe elements behave correctly as flex items.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       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;
       }
       iframe {
         width: 20px;
         height: 10px;
         min-height: 0;
@@ -44,57 +44,57 @@
 
          Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
                                  = 196px
 
          1st element gets 5/8 of space: 5/8 * 196px = 122.5px
          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
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          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.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          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>
 </html>
--- a/layout/reftests/flexbox/flexbox-basic-iframe-vert-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-iframe-vert-2-ref.xhtml
@@ -5,18 +5,18 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       iframe {
         width: 50px;
         height: 50px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-iframe-vert-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-iframe-vert-2.xhtml
@@ -9,18 +9,18 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       iframe {
         width: 50px;
         height: 1000px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-img-horiz-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-img-horiz-1.xhtml
@@ -7,18 +7,18 @@
      This test checks that img elements behave correctly as flex items.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       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;
       }
       img {
         min-width: 0;
         width: 10px;
         height: 20px;
         border: 1px dotted green;
@@ -41,59 +41,59 @@
 
          Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
                                  = 196px
 
          1st element gets 5/8 of space: 5/8 * 196px = 122.5px
          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
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          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.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          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>
 </html>
--- a/layout/reftests/flexbox/flexbox-basic-img-horiz-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-img-horiz-2-ref.xhtml
@@ -5,17 +5,17 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       img {
         width: 50px;
         height: 50px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-img-horiz-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-img-horiz-2.xhtml
@@ -9,17 +9,17 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       img {
         width: 1000px;
         height: 50px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-img-vert-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-img-vert-1.xhtml
@@ -7,19 +7,19 @@
      This test checks that img elements behave correctly as flex items.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       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;
       }
       img {
         width: 20px;
         height: 10px;
         min-height: 0;
@@ -43,59 +43,59 @@
 
          Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
                                  = 196px
 
          1st element gets 5/8 of space: 5/8 * 196px = 122.5px
          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
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          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.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          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>
 </html>
--- a/layout/reftests/flexbox/flexbox-basic-img-vert-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-img-vert-2-ref.xhtml
@@ -5,18 +5,18 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       img {
         width: 50px;
         height: 50px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-img-vert-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-img-vert-2.xhtml
@@ -9,18 +9,18 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       img {
         width: 50px;
         height: 1000px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-textarea-horiz-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-textarea-horiz-1.xhtml
@@ -7,18 +7,18 @@
      This test checks that textarea elements behave correctly as flex items.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       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;
       }
       textarea {
         min-width: 0;
         width: 10px;
         height: 20px;
         background: white;
@@ -46,59 +46,59 @@
 
          Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
                                  = 196px
 
          1st element gets 5/8 of space: 5/8 * 196px = 122.5px
          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
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          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.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          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>
 </html>
--- a/layout/reftests/flexbox/flexbox-basic-textarea-horiz-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-textarea-horiz-2-ref.xhtml
@@ -5,17 +5,17 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       textarea {
         width: 50px;
         height: 50px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-textarea-horiz-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-textarea-horiz-2.xhtml
@@ -9,17 +9,17 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       textarea {
         width: 1000px;
         height: 50px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-textarea-vert-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-textarea-vert-1.xhtml
@@ -7,19 +7,19 @@
      This test checks that textarea elements behave correctly as flex items.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       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;
       }
       textarea {
         width: 20px;
         height: 10px;
         min-height: 0;
@@ -49,59 +49,59 @@
 
          Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
                                  = 196px
 
          1st element gets 5/8 of space: 5/8 * 196px = 122.5px
          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
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          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.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          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>
 </html>
--- a/layout/reftests/flexbox/flexbox-basic-textarea-vert-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-textarea-vert-2-ref.xhtml
@@ -5,18 +5,18 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       textarea {
         width: 50px;
         height: 50px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-textarea-vert-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-textarea-vert-2.xhtml
@@ -10,18 +10,18 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       textarea {
         width: 50px;
         height: 1000px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-video-horiz-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-video-horiz-1.xhtml
@@ -7,18 +7,18 @@
      This test checks that video elements behave correctly as flex items.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       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;
       }
       video {
         min-width: 0;
         width: 10px;
         height: 20px;
         border: 1px dotted green;
@@ -41,57 +41,57 @@
 
          Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
                                  = 196px
 
          1st element gets 5/8 of space: 5/8 * 196px = 122.5px
          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
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          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.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          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>
 </html>
--- a/layout/reftests/flexbox/flexbox-basic-video-horiz-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-video-horiz-2-ref.xhtml
@@ -5,17 +5,17 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       video {
         width: 50px;
         height: 50px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-video-horiz-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-video-horiz-2.xhtml
@@ -9,17 +9,17 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
       }
       video {
         width: 1000px;
         height: 50px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-video-vert-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-video-vert-1.xhtml
@@ -7,19 +7,19 @@
      This test checks that video elements behave correctly as flex items.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       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;
       }
       video {
         width: 20px;
         height: 10px;
         min-height: 0;
@@ -43,57 +43,57 @@
 
          Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
                                  = 196px
 
          1st element gets 5/8 of space: 5/8 * 196px = 122.5px
          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
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          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.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          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>
 </html>
--- a/layout/reftests/flexbox/flexbox-basic-video-vert-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-video-vert-2-ref.xhtml
@@ -5,18 +5,18 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       video {
         width: 50px;
         height: 50px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-basic-video-vert-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-basic-video-vert-2.xhtml
@@ -9,18 +9,18 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 50px;
         width: 50px;
         border: 2px dotted black;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
       }
       video {
         width: 50px;
         height: 1000px;
         background: purple;
       }
     </style>
   </head>
--- a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1-ref.xhtml
@@ -10,18 +10,18 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       body { font-size: 10px; }
 
       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;
       }
     </style>
   </head>
   <body>
     <div class="flexbox" id="f0">  <div>[OldText]</div></div>
     <div class="flexbox" id="f1"><div>[OldText]</div>  </div>
--- a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.xhtml
@@ -14,18 +14,18 @@
       class="reftest-wait">
   <head>
     <style>
       body { font-size: 10px; }
 
       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;
       }
     </style>
     <script>
       function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
         var parent = document.getElementById(aParentId);
         var insertBeforeTarget = parent.firstChild;
--- a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2-ref.xhtml
@@ -13,18 +13,18 @@
       body { font-size: 10px; }
 
       <!-- to make inserted div elements stand out -->
       div.inserted { background: teal; }
 
       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;
       }
     </style>
   </head>
   <body>
     <div class="flexbox" id="f8"><div class="inserted">[NewDiv]</div><div>[OldText]</div></div>
     <div class="flexbox" id="f9"><div>[OldText]</div><div class="inserted">[NewDiv]</div></div>
--- a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2.xhtml
@@ -17,18 +17,18 @@
       body { font-size: 10px; }
 
       <!-- to make inserted div elements stand out -->
       div.inserted { background: teal; }
 
       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;
       }
     </style>
     <script>
       function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
         var parent = document.getElementById(aParentId);
         var insertBeforeTarget = parent.firstChild;
--- a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3-ref.xhtml
@@ -13,18 +13,18 @@
       body { font-size: 10px; }
 
       <!-- to make inserted span elements stand out -->
       span.inserted { background: teal; }
 
       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;
       }
     </style>
   </head>
   <body>
     <div class="flexbox" id="f0"><span class="inserted">[NewSpan]</span><div>[OldText]</div></div>
     <div class="flexbox" id="f1"><div>[OldText]</div><span class="inserted">[NewSpan]</span></div>
--- a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3.xhtml
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3.xhtml
@@ -17,18 +17,18 @@
       body { font-size: 10px; }
 
       <!-- to make inserted span elements stand out -->
       span.inserted { background: teal; }
 
       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;
       }
     </style>
     <script>
       function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
         var parent = document.getElementById(aParentId);
         var insertBeforeTarget = parent.firstChild;
--- a/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-1.xhtml
@@ -14,18 +14,18 @@
       class="reftest-wait">
   <head>
     <style>
       body { font-size: 10px; }
 
       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;
       }
     </style>
     <script>
       function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
         var parent = document.getElementById(aParentId);
         var insertBeforeTarget = parent.firstChild;
--- a/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-2.xhtml
@@ -20,18 +20,18 @@
 
       div.inserted {
         background: teal; /* To make inserted div elements stand out. */
       }
 
       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;
       }
     </style>
     <script>
       function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
         var parent = document.getElementById(aParentId);
         var insertBeforeTarget = parent.firstChild;
--- a/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml
@@ -20,18 +20,18 @@
 
       span.inserted {
         background: teal; /* To make inserted span elements stand out. */
       }
 
       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;
       }
     </style>
     <script>
       function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
         var parent = document.getElementById(aParentId);
         var insertBeforeTarget = parent.firstChild;
--- a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1-ref.xhtml
@@ -10,18 +10,18 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       body { font-size: 10px; }
 
       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;
       }
     </style>
   </head>
   <body>
     <div class="flexbox" id="f0">  [OldText]</div>
     <div class="flexbox" id="f1">[OldText]  </div>
--- a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1.xhtml
@@ -14,18 +14,18 @@
       class="reftest-wait">
   <head>
     <style>
       body { font-size: 10px; }
 
       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;
       }
     </style>
     <script>
       function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
         var parent = document.getElementById(aParentId);
         var insertBeforeTarget = parent.firstChild;
--- a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2-ref.xhtml
@@ -16,18 +16,18 @@
 
       div.inserted {
         background: teal; /* To make inserted div elements stand out. */
       }
 
       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;
       }
     </style>
   </head>
   <body>
     <div class="flexbox" id="f8"><div class="inserted">[NewDiv]</div>[OldText]</div>
     <div class="flexbox" id="f9">[OldText]<div class="inserted">[NewDiv]</div></div>
--- a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2.xhtml
@@ -20,18 +20,18 @@
 
       div.inserted {
         background: teal; /* To make inserted div elements stand out. */
       }
 
       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;
       }
     </style>
     <script>
       function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
         var parent = document.getElementById(aParentId);
         var insertBeforeTarget = parent.firstChild;
--- a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3-ref.xhtml
@@ -16,18 +16,18 @@
 
       span.inserted {
         background: teal; /* To make inserted span elements stand out. */
       }
 
       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;
       }
     </style>
   </head>
   <body>
     <div class="flexbox" id="f0"><span class="inserted">[NewSpan]</span>[OldText]</div>
     <div class="flexbox" id="f1">[OldText]<span class="inserted">[NewSpan]</span></div>
--- a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3.xhtml
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3.xhtml
@@ -20,18 +20,18 @@
 
       span.inserted {
         background: teal; /* To make inserted span elements stand out. */
       }
 
       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;
       }
     </style>
     <script>
       function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
         var parent = document.getElementById(aParentId);
         var insertBeforeTarget = parent.firstChild;
--- a/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1-ref.xhtml
@@ -16,18 +16,18 @@
       span {
         background: teal;
         padding: 3px;
       }
 
       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;
       }
     </style>
   </head>
   <body>
     <div class="flexbox" id="f0"><span/>[orig]</div>
     <div class="flexbox" id="f1">[orig]<span/></div>
--- a/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1.xhtml
@@ -19,18 +19,18 @@
       span {
         background: teal;
         padding: 3px;
       }
 
       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;
       }
     </style>
     <script>
       function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
         var parent = document.getElementById(aParentId);
         var insertBeforeTarget = parent.firstChild;
--- a/layout/reftests/flexbox/flexbox-empty-1a.xhtml
+++ b/layout/reftests/flexbox/flexbox-empty-1a.xhtml
@@ -5,17 +5,17 @@
 -->
 <!-- Testcase for behavior of flex containers that have no children -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         border: 1px dotted blue;
         background: yellow;
-        display: -moz-flex;
+        display: flex;
       }
 
       div.withPadding {
         padding: 2px 3px 4px 5px;
       }
     </style>
   </head>
   <body>
--- a/layout/reftests/flexbox/flexbox-empty-1b.xhtml
+++ b/layout/reftests/flexbox/flexbox-empty-1b.xhtml
@@ -11,17 +11,17 @@
      of inline content).
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         border: 1px dotted blue;
         background: yellow;
-        display: -moz-flex;
+        display: flex;
       }
 
       div.withPadding {
         padding: 2px 3px 4px 5px;
       }
     </style>
   </head>
   <body>
--- a/layout/reftests/flexbox/flexbox-float-1-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-float-1-ref.xhtml
@@ -2,22 +2,22 @@
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <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>
   <body>
     <div class="flexbox">
       aaa<div>[[[</div>bbb
     </div>
     <div class="flexbox">
--- a/layout/reftests/flexbox/flexbox-float-1a.xhtml
+++ b/layout/reftests/flexbox/flexbox-float-1a.xhtml
@@ -6,22 +6,22 @@
 <!--
      This test verifies that 'float' on a direct child of a flexbox won't
      actually cause it to be floated.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <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>
   <body>
     <!-- These cases have a span as a direct child of the flexbox. The span
          should become display:block (and hence form its own flex item),
          but it shouldn't actually float.
       -->
--- a/layout/reftests/flexbox/flexbox-float-1b.xhtml
+++ b/layout/reftests/flexbox/flexbox-float-1b.xhtml
@@ -6,22 +6,22 @@
 <!--
      This test is like flexbox-float-1a.xhtml, but with the float-styled
      element already being a block. (Should render the same.)
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <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>
   <body>
     <div class="flexbox">
       aaa<div style="float: left">[[[</div>bbb
     </div>
     <div class="flexbox">
--- a/layout/reftests/flexbox/flexbox-float-1c.xhtml
+++ b/layout/reftests/flexbox/flexbox-float-1c.xhtml
@@ -38,22 +38,22 @@
 
         document.documentElement.removeAttribute("class");
       }
 
       window.addEventListener("MozReftestInvalidate", tweak, false);
     </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>
   <body>
     <div class="flexbox" floatValToUse="left" insertPosn="mid">
       aaa<span>bbb</span>
     </div>
     <div class="flexbox" floatValToUse="right" insertPosn="mid">
--- a/layout/reftests/flexbox/flexbox-float-1d.xhtml
+++ b/layout/reftests/flexbox/flexbox-float-1d.xhtml
@@ -38,22 +38,22 @@
 
         document.documentElement.removeAttribute("class");
       }
 
       window.addEventListener("MozReftestInvalidate", tweak, false);
     </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>
   <body>
     <div class="flexbox" floatValToUse="left" insertPosn="mid">
       aaa<span>bbb</span>
     </div>
     <div class="flexbox" floatValToUse="right" insertPosn="mid">
--- a/layout/reftests/flexbox/flexbox-float-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-float-2-ref.xhtml
@@ -12,17 +12,17 @@
   <head>
     <style>
       div.flexbox {
         text-align: center;
         font-family: sans-serif;
         width: 400px;
         margin-bottom: 2px;
         background: lightgreen;
-        -moz-justify-content: space-around;
+        justify-content: space-around;
       }
     </style>
   </head>
   <body>
     <div class="flexbox">
       lllaaabbb
     </div>
     <div class="flexbox">
--- a/layout/reftests/flexbox/flexbox-float-2a.xhtml
+++ b/layout/reftests/flexbox/flexbox-float-2a.xhtml
@@ -6,22 +6,22 @@
 <!--
      This test verifies that 'float' on a grandchild of a flex container _will_
      cause the element to be floated.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <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>
   <body>
     <!-- These cases have a floated span as a grandchild of the flex container.
          The span should float within its flex item. -->
     <div class="flexbox">
       aaa<span><span style="float: left">lll</span></span>bbb
--- a/layout/reftests/flexbox/flexbox-float-2b.xhtml
+++ b/layout/reftests/flexbox/flexbox-float-2b.xhtml
@@ -10,22 +10,22 @@
      This differs from the "2a" variant in that the flex items are <div>s
      rather than <span>s (though that shouldn't matter, because <span> as a
      flex item should become "display:block").
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <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>
   <body>
     <!-- These cases have a floated span as a grandchild of the flex container.
          The span should float within its flex item. -->
     <div class="flexbox">
       <div>aaa<span style="float: left">lll</span>bbb</div>
--- a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1a.xhtml
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1a.xhtml
@@ -10,28 +10,28 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <link rel="stylesheet" type="text/css" href="ahem.css" />
     <style>
       div { height: 100px; }
       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>
   </head>
   <body>
     <div class="flexbox"
        ><div class="a"/>text<div class="b"/><i>italic</i
        ><div class="inflex"/></div>
--- a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1b.xhtml
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1b.xhtml
@@ -26,28 +26,28 @@
 
       window.addEventListener("MozReftestInvalidate", tweak, false);
     </script>
     <style>
       div { height: 100px; }
       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>
   </head>
   <body>
     <div class="flexbox"
        ><div class="a"/>text<i>italic</i
        ><div class="inflex"/></div>
--- a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2-ref.xhtml
@@ -9,24 +9,24 @@
      removed, hopefully making it look like this reference case.)
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       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>
   </head>
   <body>
     <div class="flexbox"
        ><div class="a"/>text<i>italic</i
        ><div class="inflex"/></div>
--- a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.xhtml
@@ -17,28 +17,28 @@
         document.documentElement.removeAttribute("class");
       }
       window.addEventListener("MozReftestInvalidate", tweak, false);
     </script>
     <style>
       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>
   </head>
   <body>
     <div class="flexbox"
        ><div class="a"/>text<div class="b" id="removeMe"/><i>italic</i
        ><div class="inflex"/></div>
--- a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3a.xhtml
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3a.xhtml
@@ -8,17 +8,17 @@
      against the "b" & "c" variants of this test (which use dynamic tweaks).
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <link rel="stylesheet" type="text/css" href="ahem.css" />
     <style>
       div#flexbox {
         width: 100px;
-        display: -moz-flex;
+        display: flex;
         font: 10px Ahem;
       }
     </style>
   </head>
   <body>
     <div id="flexbox"><u>abc def ghi</u> jkl <i>mno pqr stu</i></div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.xhtml
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.xhtml
@@ -23,17 +23,17 @@
         document.documentElement.removeAttribute("class");
       }
 
       window.addEventListener("MozReftestInvalidate", tweak, false);
     </script>
     <style>
       div#flexbox {
         width: 100px;
-        display: -moz-flex;
+        display: flex;
         font: 10px Ahem;
       }
     </style>
   </head>
   <body>
     <div id="flexbox"> jkl <i>mno pqr stu</i></div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.xhtml
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.xhtml
@@ -23,17 +23,17 @@
         document.documentElement.removeAttribute("class");
       }
 
       window.addEventListener("MozReftestInvalidate", tweak, false);
     </script>
     <style>
       div#flexbox {
         width: 100px;
-        display: -moz-flex;
+        display: flex;
         font: 10px Ahem;
       }
     </style>
   </head>
   <body>
     <div id="flexbox"><u>abc def ghi</u> jkl </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4.xhtml
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4.xhtml
@@ -1,27 +1,27 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!--
      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.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         width: 200px;
         height: 100px;
         background: lightgreen;
-        -moz-justify-content: center;
-        display: -moz-flex;
+        justify-content: center;
+        display: flex;
       }
     </style>
   </head>
   <body>
     <div class="flexbox">text</div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5-ref.xhtml
@@ -9,17 +9,17 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         width: 200px;
         height: 100px;
         background: lightgreen;
-        -moz-justify-content: space-around;
-        display: -moz-flex;
+        justify-content: space-around;
+        display: flex;
       }
     </style>
   </head>
   <body>
     <div class="flexbox">text<div>div</div></div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5.xhtml
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5.xhtml
@@ -18,18 +18,18 @@
       }
       window.addEventListener("MozReftestInvalidate", tweak, false);
     </script>
     <style>
       div.flexbox {
         width: 200px;
         height: 100px;
         background: lightgreen;
-        -moz-justify-content: space-around;
-        display: -moz-flex;
+        justify-content: space-around;
+        display: flex;
       }
     </style>
   </head>
   <body>
     <div class="flexbox">text<div>div</div>
       <span id="removeMe">REMOVE</span>
     </div>
   </body>
--- a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-6-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-6-ref.xhtml
@@ -9,18 +9,18 @@
      in the testcase.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         width: 200px;
         height: 100px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
         border: 1px dotted black;
       }
       div.a {
         width: 30px;
         height: 50px;
         background: lightgreen;
       }
       div.b {
--- a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-6.xhtml
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-6.xhtml
@@ -10,18 +10,18 @@
      anonymous flex item.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         width: 200px;
         height: 100px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
         border: 1px dotted black;
       }
       div.a {
         width: 30px;
         height: 50px;
         background: lightgreen;
       }
       div.b {
--- a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.xhtml
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.xhtml
@@ -24,17 +24,17 @@
     <style>
       table {
         width: 300px;
         font: 10px Ahem;
         margin-bottom: 2px;
         border: 1px dashed black;
       }
 
-      div.a, div.b { display: -moz-flex; }
+      div.a, div.b { display: flex; }
 
       div.a { background: lightgreen; }
       div.b { background: lightblue;  }
 
       <!-- helper-classes for assigning pref / min / auto-width to our divs -->
       div.prefWidth {
         width: -moz-max-content;
       }
--- a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1b.xhtml
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1b.xhtml
@@ -24,17 +24,17 @@
     <style>
       table {
         width: 300px;
         font: 10px Ahem;
         margin-bottom: 2px;
         border: 1px dashed black;
       }
 
-      div.a, div.b { display: -moz-flex; }
+      div.a, div.b { display: flex; }
 
       div.a { background: lightgreen; }
       div.b { background: lightblue;  }
 
       <!-- helper-classes for assigning pref / min / auto-width to our divs -->
       div.prefWidth {
         width: -moz-max-content;
       }
--- a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2a.xhtml
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2a.xhtml
@@ -7,17 +7,17 @@
      This test checks how a flexbox sizes itself to shrinkwrap its contents'
      preferred sizes.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       body { margin: 0; }
       div.flexbox {
-        display: -moz-flex;
+        display: flex;
         width: -moz-max-content;
 
         /* We give the flexbox a border and background so we can easily see how
          * large it is. */
         border: 2px dotted black;
         background: lime;
       }
 
--- a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2b.xhtml
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2b.xhtml
@@ -8,17 +8,17 @@
      at the deepest level of nesting.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       body { margin: 0; }
 
       div.flexbox {
-        display: -moz-flex;
+        display: flex;
         width: -moz-max-content;
 
         /* We give the flex container a border and background so we can easily
          * see how large it is. */
         border: 2px dotted black;
         background: lime;
       }
 
--- a/layout/reftests/flexbox/flexbox-invalidation-1-ref.html
+++ b/layout/reftests/flexbox/flexbox-invalidation-1-ref.html
@@ -10,18 +10,18 @@
   <head>
     <style>
       div#outer { margin-left: 40px }
 
       div#flexContainer {
         width: 100px;
         height: 50px;
         background: lightgray;
-        display: -moz-flex;
-        -moz-justify-content: center;
+        display: flex;
+        justify-content: center;
       }
 
       div#flexItem {
         border: 1px solid black;
         height: 200%;
         background: purple;
       }
     </style>
--- a/layout/reftests/flexbox/flexbox-invalidation-1.html
+++ b/layout/reftests/flexbox/flexbox-invalidation-1.html
@@ -21,18 +21,18 @@
 
       window.addEventListener("MozReftestInvalidate", tweak, false);
     </script>
     <style>
       div#flexContainer {
         width: 100px;
         height: 50px;
         background: lightgray;
-        display: -moz-flex;
-        -moz-justify-content: center;
+        display: flex;
+        justify-content: center;
       }
 
       div#flexItem {
         border: 1px solid black;
         height: 200%;
         background: purple;
       }
     </style>
--- a/layout/reftests/flexbox/flexbox-justify-content-horiz-1-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-horiz-1-ref.xhtml
@@ -93,15 +93,15 @@
     <div class="flexbox">
       <div class="a" style="margin-left: 95px"/>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-left: 35px"
            /><div class="b" style="margin-left: 70px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-left: -moz-calc(40px / 6)"
-           /><div class="b" style="margin-left: -moz-calc(40px / 3)"
-           /><div class="c" style="margin-left: -moz-calc(40px / 3)"/>
+      <div class="a" style="margin-left: calc(40px / 6)"
+           /><div class="b" style="margin-left: calc(40px / 3)"
+           /><div class="c" style="margin-left: calc(40px / 3)"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-justify-content-horiz-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-horiz-1.xhtml
@@ -1,36 +1,36 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<!-- Testcase with a variety of 'display: -moz-flex' examples
-     testing each possible value of the '-moz-justify-content' property. -->
+<!-- Testcase with a variety of 'display: flex' examples
+     testing each possible value of the 'justify-content' property. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         width: 200px;
-        display: -moz-flex;
+        display: flex;
         margin-bottom: 2px;
       }
       div.a {
         height: 20px;
-        -moz-flex: 0 10px;
+        flex: 0 10px;
         background: lightgreen;
       }
       div.b {
         height: 20px;
-        -moz-flex: 0 50px;
+        flex: 0 50px;
         background: pink;
       }
       div.c {
         height: 20px;
-        -moz-flex: 0 100px;
+        flex: 0 100px;
         background: orange;
       }
     </style>
   </head>
   <body>
 
     <!-- default (start) -->
     <div class="flexbox">
@@ -39,64 +39,64 @@
     <div class="flexbox">
       <div class="a"/><div class="b"></div>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-start -->
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-end -->
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- center -->
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-between -->
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-around -->
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-justify-content-horiz-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-horiz-2-ref.xhtml
@@ -107,15 +107,15 @@
     <div class="flexbox">
       <div class="a" style="margin-left: 90px"/>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-left: 29.5px"
            /><div style="margin-left: 59px"><div class="b"/></div>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-left: -moz-calc(8px / 6)"
-           /><div style="margin-left: -moz-calc(8px / 3)"><div class="b"/></div
-            ><div style="margin-left: -moz-calc(8px / 3)"><div class="c"/></div>
+      <div class="a" style="margin-left: calc(8px / 6)"
+           /><div style="margin-left: calc(8px / 3)"><div class="b"/></div
+            ><div style="margin-left: calc(8px / 3)"><div class="c"/></div>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-justify-content-horiz-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-horiz-2.xhtml
@@ -1,47 +1,47 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!-- Testcase with a series of flex containers testing each possible value of
-     the '-moz-justify-content' property, with margin/border/padding on the
+     the 'justify-content' property, with margin/border/padding on the
      flex items. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         width: 200px;
-        display: -moz-flex;
+        display: flex;
         margin-bottom: 4px;
         border: 1px dotted black;
       }
       div.a {
         height: 10px;
-        -moz-flex: 0 10px;
+        flex: 0 10px;
         background: lightgreen;
         border-style: solid;
         border-color:     purple;
         border-top-width:    1px;
         border-right-width:  2px;
         border-bottom-width: 3px;
         border-left-width:   4px;
         padding: 2px;
       }
       div.b {
         height: 10px;
-        -moz-flex: 0 50px;
+        flex: 0 50px;
         background: pink;
         padding: 4px 3px 2px 1px;
         margin: 2px 3px 4px 5px;
       }
       div.c {
         height: 10px;
-        -moz-flex: 0 100px;
+        flex: 0 100px;
         background: orange;
         margin: 3px;
         border: 2px dashed teal;
       }
     </style>
   </head>
   <body>
 
@@ -52,64 +52,64 @@
     <div class="flexbox">
       <div class="a"/><div class="b"></div>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-start -->
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-end -->
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- center -->
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-between -->
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-around -->
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-justify-content-horiz-3.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-horiz-3.xhtml
@@ -1,44 +1,44 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<!-- Testcase with a variety of 'display: -moz-flex' examples testing each
-     possible value of the '-moz-justify-content' property, and with each
+<!-- Testcase with a variety of 'display: flex' examples testing each
+     possible value of the 'justify-content' property, and with each
      individual flex item being wider than the flexbox itself (so that
      there isn't any packing space available).
        * For 'flex-start'/'space-between', we should overflow on the end
          (right) side.
        * For 'flex-end', we should overflow on the start (left) side.
        * For 'center'/'space-around', we should overflow equally on both sides.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       body { margin-left: 100px; } /* So we can see left-overflowed stuff */
       div.flexbox {
         width: 30px;
-        display: -moz-flex;
+        display: flex;
         margin-bottom: 2px;
       }
       div.a {
         height: 20px;
-        -moz-flex: 0 0 35px;
+        flex: 0 0 35px;
         background: lightgreen;
       }
       div.b {
         height: 20px;
-        -moz-flex: 0 0 40px;
+        flex: 0 0 40px;
         background: pink;
       }
       div.c {
         height: 20px;
-        -moz-flex: 0 0 45px;
+        flex: 0 0 45px;
         background: orange;
       }
     </style>
   </head>
   <body>
 
     <!-- default (start) -->
     <div class="flexbox">
@@ -47,64 +47,64 @@
     <div class="flexbox">
       <div class="a"/><div class="b"></div>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-start -->
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-end -->
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- center -->
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-between -->
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-around -->
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-justify-content-horiz-4.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-horiz-4.xhtml
@@ -1,53 +1,53 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<!-- Testcase with a variety of 'display: -moz-flex' examples testing each
-     possible value of the '-moz-justify-content' property, and with each
+<!-- Testcase with a variety of 'display: flex' examples testing each
+     possible value of the 'justify-content' property, and with each
      individual flex item being wider than the flexbox itself (so that
      there isn't any packing space available).
        * For 'flex-start'/'space-between', we should overflow on the end
          (right) side.
        * For 'flex-end', we should overflow on the start (left) side.
        * For 'center'/'space-around', we should overflow equally on both sides.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       body { margin-left: 100px; } /* So we can see left-overflowed stuff */
       div.flexbox {
         width: 30px;
-        display: -moz-flex;
+        display: flex;
         margin-bottom: 4px;
       }
       div.a {
         height: 10px;
-        -moz-flex: 0 0 35px;
+        flex: 0 0 35px;
         background: lightgreen;
         border-style: solid;
         border-color:     purple;
         border-top-width:    1px;
         border-right-width:  2px;
         border-bottom-width: 3px;
         border-left-width:   4px;
         padding: 2px;
       }
       div.b {
         height: 10px;
-        -moz-flex: 0 0 40px;
+        flex: 0 0 40px;
         background: pink;
         padding: 4px 3px 2px 1px;
         margin: 2px 3px 4px 5px;
       }
       div.c {
         height: 10px;
-        -moz-flex: 0 0 45px;
+        flex: 0 0 45px;
         background: orange;
         margin: 3px;
         border: 2px dashed teal;
       }
     </style>
   </head>
   <body>
 
@@ -58,64 +58,64 @@
     <div class="flexbox">
       <div class="a"/><div class="b"></div>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-start -->
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-end -->
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- center -->
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-between -->
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-around -->
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-justify-content-horiz-5-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-horiz-5-ref.xhtml
@@ -103,26 +103,26 @@
     <div class="flexbox center">
       <div class="a"/>
     </div>
     <!-- For these, we use a flex container with invisible flexible items
          instead of packing space. That's simpler than trying to hack up
          a width-independent reference case for "justify-content:space-around".
          (There are other reftests to ensure that basic flex container
          behavior is correct, so it's safe to rely on that.) -->
-    <div class="flexbox" style="display: -moz-flex">
-      <div style="-moz-flex: 0.5"/>
+    <div class="flexbox" style="display: flex">
+      <div style="flex: 0.5"/>
       <div class="a"/>
-      <div style="-moz-flex: 1"/>
+      <div style="flex: 1"/>
       <div class="b"/>
-      <div style="-moz-flex: 0.5"/>
+      <div style="flex: 0.5"/>
     </div>
-    <div class="flexbox" style="display: -moz-flex">
-      <div style="-moz-flex: 0.5"/>
+    <div class="flexbox" style="display: flex">
+      <div style="flex: 0.5"/>
       <div class="a"/>
-      <div style="-moz-flex: 1"/>
+      <div style="flex: 1"/>
       <div class="b"/>
-      <div style="-moz-flex: 1"/>
+      <div style="flex: 1"/>
       <div class="c"/>
-      <div style="-moz-flex: 0.5"/>
+      <div style="flex: 0.5"/>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-justify-content-horiz-5.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-horiz-5.xhtml
@@ -1,35 +1,35 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<!-- Testcase to exercise each possible value of the '-moz-justify-content'
+<!-- Testcase to exercise each possible value of the 'justify-content'
      property, in an auto-sized horizontal flex container. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
-        display: -moz-flex;
+        display: flex;
         margin-bottom: 2px;
       }
       div.a {
         height: 20px;
-        -moz-flex: 0 10px;
+        flex: 0 10px;
         background: lightgreen;
       }
       div.b {
         height: 20px;
-        -moz-flex: 0 50px;
+        flex: 0 50px;
         background: pink;
       }
       div.c {
         height: 20px;
-        -moz-flex: 0 100px;
+        flex: 0 100px;
         background: orange;
       }
     </style>
   </head>
   <body>
 
     <!-- default (start) -->
     <div class="flexbox">
@@ -38,63 +38,63 @@
     <div class="flexbox">
       <div class="a"/><div class="b"></div>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-start -->
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-end -->
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- center -->
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-between -->
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-around -->
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-justify-content-vert-1-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-vert-1-ref.xhtml
@@ -91,15 +91,15 @@
     <div class="flexbox">
       <div class="a" style="margin-top: 95px"/>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-top: 35px"
            /><div class="b" style="margin-top: 70px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: -moz-calc(40px / 6)"
-           /><div class="b" style="margin-top: -moz-calc(40px / 3)"
-           /><div class="c" style="margin-top: -moz-calc(40px / 3)"/>
+      <div class="a" style="margin-top: calc(40px / 6)"
+           /><div class="b" style="margin-top: calc(40px / 3)"
+           /><div class="c" style="margin-top: calc(40px / 3)"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-justify-content-vert-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-vert-1.xhtml
@@ -1,38 +1,38 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!-- Testcase with a series of flex containers, testing each possible value of
-     the '-moz-justify-content' property. -->
+     the 'justify-content' property. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 200px;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
         margin-right: 2px;
         float: left;
       }
       div.a {
         width: 20px;
-        -moz-flex: 0 10px;
+        flex: 0 10px;
         background: lightgreen;
       }
       div.b {
         width: 20px;
-        -moz-flex: 0 50px;
+        flex: 0 50px;
         background: pink;
       }
       div.c {
         width: 20px;
-        -moz-flex: 0 100px;
+        flex: 0 100px;
         background: orange;
       }
     </style>
   </head>
   <body>
 
     <!-- default (start) -->
     <div class="flexbox">
@@ -41,64 +41,64 @@
     <div class="flexbox">
       <div class="a"/><div class="b"></div>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-start -->
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-end -->
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- center -->
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-between -->
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-around -->
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-justify-content-vert-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-vert-2-ref.xhtml
@@ -104,15 +104,15 @@
     <div class="flexbox">
       <div class="a" style="margin-top: 90px"/>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-top: 29.5px"
            /><div style="margin-top: 64px"><div class="b"/></div>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: -moz-calc(8px / 6)"
-           /><div style="margin-top: -moz-calc(5px + 8px / 3)"><div class="b"/></div
-            ><div style="margin-top: -moz-calc(6px + 8px / 3)"><div class="c"/></div>
+      <div class="a" style="margin-top: calc(8px / 6)"
+           /><div style="margin-top: calc(5px + 8px / 3)"><div class="b"/></div
+            ><div style="margin-top: calc(6px + 8px / 3)"><div class="c"/></div>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-justify-content-vert-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-vert-2.xhtml
@@ -1,49 +1,49 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!-- Testcase with a series of flex containers testing each possible value of
-     the '-moz-justify-content' property, with margin/border/padding on the
+     the 'justify-content' property, with margin/border/padding on the
      flex items. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 200px;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
         margin-right: 2px;
         float: left;
         border: 1px dotted black;
       }
       div.a {
         width: 10px;
-        -moz-flex: 0 10px;
+        flex: 0 10px;
         background: lightgreen;
         border-style: solid;
         border-color:     purple;
         border-top-width:    4px;
         border-right-width:  3px;
         border-bottom-width: 2px;
         border-left-width:   1px;
         padding: 2px;
       }
       div.b {
         width: 10px;
-        -moz-flex: 0 50px;
+        flex: 0 50px;
         background: pink;
         padding: 1px 2px 3px 4px;
         margin: 5px 4px 3px 2px;
       }
       div.c {
         width: 10px;
-        -moz-flex: 0 100px;
+        flex: 0 100px;
         background: orange;
         margin: 3px;
         border: 2px dashed teal;
       }
     </style>
   </head>
   <body>
 
@@ -54,64 +54,64 @@
     <div class="flexbox">
       <div class="a"/><div class="b"></div>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-start -->
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-end -->
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- center -->
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-between -->
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-around -->
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-justify-content-vert-3.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-vert-3.xhtml
@@ -1,47 +1,47 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!-- Testcase with a series of vertical flex containers testing each possible
-     value of the '-moz-justify-content' property, and with each individual
+     value of the 'justify-content' property, and with each individual
      flex item being larger than the flexbox itself (so that there isn't any
      packing space available).
 
        * For 'flex-start'/'space-between', we should overflow on the end
          (bottom) side.
        * For 'flex-end', we should overflow on the start (top) side.
        * For 'center'/'space-around', we should overflow equally on both sides.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       body { margin-top: 100px; } /* So we can see top-overflowed stuff */
       div.flexbox {
         height: 30px;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
         margin-right: 2px;
         float: left;
       }
       div.a {
         width: 20px;
-        -moz-flex: 0 0 35px;
+        flex: 0 0 35px;
         background: lightgreen;
       }
       div.b {
         width: 20px;
-        -moz-flex: 0 0 40px;
+        flex: 0 0 40px;
         background: pink;
       }
       div.c {
         width: 20px;
-        -moz-flex: 0 0 45px;
+        flex: 0 0 45px;
         background: orange;
       }
     </style>
   </head>
   <body>
 
     <!-- default (start) -->
     <div class="flexbox">
@@ -50,64 +50,64 @@
     <div class="flexbox">
       <div class="a"/><div class="b"></div>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-start -->
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-end -->
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- center -->
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-between -->
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-around -->
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-justify-content-vert-4.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-vert-4.xhtml
@@ -1,56 +1,56 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!-- Testcase with a series of vertical flex containers, testing each possible
-     value of the '-moz-justify-content' property, and with each individual
+     value of the 'justify-content' property, and with each individual
      flex item being larger than the flexbox itself (so that there isn't any
      packing space available).  Also, we've got margin/border/padding on the
      flex items.
        * For 'flex-start'/'space-between', we should overflow on the end
          (bottom) side.
        * For 'flex-end', we should overflow on the start (top) side.
        * For 'center'/'space-around', we should overflow equally on both sides.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       body { margin-top: 100px; } /* So we can see top-overflowed stuff */
       div.flexbox {
         height: 30px;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
         margin-right: 4px;
         float: left;
       }
       div.a {
         width: 10px;
-        -moz-flex: 0 0 35px;
+        flex: 0 0 35px;
         background: lightgreen;
         border-style: solid;
         border-color:     purple;
         border-top-width:    4px;
         border-right-width:  3px;
         border-bottom-width: 2px;
         border-left-width:   1px;
         padding: 2px;
       }
       div.b {
         width: 10px;
-        -moz-flex: 0 0 40px;
+        flex: 0 0 40px;
         background: pink;
         padding: 1px 2px 3px 4px;
         margin: 5px 4px 3px 2px;
       }
       div.c {
         width: 10px;
-        -moz-flex: 0 0 45px;
+        flex: 0 0 45px;
         background: orange;
         margin: 3px;
         border: 2px dashed teal;
       }
     </style>
   </head>
   <body>
 
@@ -61,64 +61,64 @@
     <div class="flexbox">
       <div class="a"/><div class="b"></div>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-start -->
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-end -->
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- center -->
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-between -->
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-around -->
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-justify-content-vert-5.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-vert-5.xhtml
@@ -1,41 +1,41 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<!-- Testcase to exercise each possible value of the '-moz-justify-content'
+<!-- Testcase to exercise each possible value of the 'justify-content'
      property, in an auto-sized vertical flex container.  The flex container
      should shrink-wrap its contents' heights, leaving no packing space
-     available.  So, the "-moz-justify-content" values should have no effect
+     available.  So, the "justify-content" values should have no effect
      in this testcase. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
         margin-right: 2px;
         float: left;
         border: 1px dotted black;
       }
       div.a {
         width: 20px;
-        -moz-flex: 0 10px;
+        flex: 0 10px;
         background: lightgreen;
       }
       div.b {
         width: 20px;
-        -moz-flex: 0 50px;
+        flex: 0 50px;
         background: pink;
       }
       div.c {
         width: 20px;
-        -moz-flex: 0 100px;
+        flex: 0 100px;
         background: orange;
       }
     </style>
   </head>
   <body>
 
     <!-- default (start) -->
     <div class="flexbox">
@@ -44,64 +44,64 @@
     <div class="flexbox">
       <div class="a"/><div class="b"></div>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-start -->
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-start">
+    <div class="flexbox" style="justify-content: flex-start">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-end -->
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: flex-end">
+    <div class="flexbox" style="justify-content: flex-end">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- center -->
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: center">
+    <div class="flexbox" style="justify-content: center">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-between -->
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-between">
+    <div class="flexbox" style="justify-content: space-between">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-around -->
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
-    <div class="flexbox" style="-moz-justify-content: space-around">
+    <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-margin-auto-horiz-1-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-margin-auto-horiz-1-ref.xhtml
@@ -30,17 +30,17 @@
 
       <!-- These classes allow us to conveniently/concisely specify margin
            values below, for exact positioning of the items on each reference
            line. ("l" = "margin-_l_eft", and the number = number of pixels) -->
       div.l180 { margin-left: 180px }
       div.l90  { margin-left:  90px }
       div.l80  { margin-left:  80px }
       div.l70  { margin-left:  70px }
-      div.l53  { margin-left: -moz-calc(160px / 3) } <!-- == 53.33333px -->
+      div.l53  { margin-left: calc(160px / 3) } <!-- == 53.33333px -->
       div.l35  { margin-left:  35px }
     </style>
   </head>
   <body>
     <!-- just one item -->
     <div class="flexbox">
       <div class="a l180"/>
     </div>
--- a/layout/reftests/flexbox/flexbox-margin-auto-horiz-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-margin-auto-horiz-1.xhtml
@@ -1,23 +1,23 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<!-- Testcase with a variety of 'display: -moz-flex' examples
+<!-- Testcase with a variety of 'display: flex' examples
      with margin-left and/or margin-right set to 'auto'. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         width: 200px;
         height: 20px;
         background: lightgray;
-        display: -moz-flex;
+        display: flex;
         margin-bottom: 2px;
       }
       div.a {
         width: 20px;
         background: green;
         margin-left: auto;
       }
       div.b {
--- a/layout/reftests/flexbox/flexbox-margin-auto-horiz-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-margin-auto-horiz-2-ref.xhtml
@@ -1,21 +1,21 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<!-- Testcase with a variety of 'display: -moz-flex' examples
+<!-- Testcase with a variety of 'display: flex' examples
      with margin-top and/or margin-bottom set to 'auto' on flex items. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
         margin-bottom: 2px;
         width: 100px;
       }
       div.fixedSize {
         width:  20px;
         height: 20px;
       }
       div.gray        { background: gray;  }
--- a/layout/reftests/flexbox/flexbox-margin-auto-horiz-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-margin-auto-horiz-2.xhtml
@@ -1,21 +1,21 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<!-- Testcase with a variety of 'display: -moz-flex' examples
+<!-- Testcase with a variety of 'display: flex' examples
      with margin-top and/or margin-bottom set to 'auto' on flex items. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         border: 2px dotted black;
-        display: -moz-flex;
+        display: flex;
         margin-bottom: 2px;
         width: 100px;
       }
       div.fixedSize {
         width:  20px;
         height: 20px;
       }
       div.gray        { background: gray;  }
--- a/layout/reftests/flexbox/flexbox-mbp-horiz-1-reverse.xhtml
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-1-reverse.xhtml
@@ -7,43 +7,43 @@
      reverse the flex container's main axis. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div { height: 100px; border: 0; }
       div.flexbox {
         width: 200px;
         font-size: 10px;
-        display: -moz-flex;
-        -moz-flex-direction: row-reverse;
+        display: flex;
+        flex-direction: row-reverse;
       }
       div.a {
-        -moz-flex: 1 0 24px;
+        flex: 1 0 24px;
         background: lightgreen;
         border-style: dotted;
         border-left-width: 2px;
         border-right-width: 4px;
       }
       div.b {
-        -moz-flex: 2 0 10px;
+        flex: 2 0 10px;
         background: yellow;
         border-style: dashed;
         border-left-width: 7px;
         border-right-width: 3px;
       }
       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 {
         display: inline-block;
         width: 15px;
         height: 15px;
         background: purple;
       }
--- a/layout/reftests/flexbox/flexbox-mbp-horiz-1-rtl-reverse.xhtml
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-1-rtl-reverse.xhtml
@@ -8,44 +8,44 @@
      main axis. --> 
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div { height: 100px; border: 0; }
       div.flexbox {
         width: 200px;
         font-size: 10px;
-        display: -moz-flex;
-        -moz-flex-direction: row-reverse;
+        display: flex;
+        flex-direction: row-reverse;
         direction: rtl;
       }
       div.a {
-        -moz-flex: 1 0 24px;
+        flex: 1 0 24px;
         background: lightgreen;
         border-style: dotted;
         border-left-width: 2px;
         border-right-width: 4px;
       }
       div.b {
-        -moz-flex: 2 0 10px;
+        flex: 2 0 10px;
         background: yellow;
         border-style: dashed;
         border-left-width: 7px;
         border-right-width: 3px;
       }
       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 {
         display: inline-block;
         width: 15px;
         height: 15px;
         background: purple;
       }
--- a/layout/reftests/flexbox/flexbox-mbp-horiz-1-rtl.xhtml
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-1-rtl.xhtml
@@ -7,43 +7,43 @@
      the flex container's main axis. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div { height: 100px; border: 0; }
       div.flexbox {
         width: 200px;
         font-size: 10px;
-        display: -moz-flex;
+        display: flex;
         direction: rtl;
       }
       div.a {
-        -moz-flex: 1 0 24px;
+        flex: 1 0 24px;
         background: lightgreen;
         border-style: dotted;
         border-left-width: 2px;
         border-right-width: 4px;
       }
       div.b {
-        -moz-flex: 2 0 10px;
+        flex: 2 0 10px;
         background: yellow;
         border-style: dashed;
         border-left-width: 7px;
         border-right-width: 3px;
       }
       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 {
         display: inline-block;
         width: 15px;
         height: 15px;
         background: purple;
       }
--- a/layout/reftests/flexbox/flexbox-mbp-horiz-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-1.xhtml
@@ -6,42 +6,42 @@
 <!-- Testcase with borders on flex items. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div { height: 100px; border: 0; }
       div.flexbox {
         width: 200px;
         font-size: 10px;
-        display: -moz-flex;
+        display: flex;
       }
       div.a {
-        -moz-flex: 1 0 24px;
+        flex: 1 0 24px;
         background: lightgreen;
         border-style: dotted;
         border-left-width: 2px;
         border-right-width: 4px;
       }
       div.b {
-        -moz-flex: 2 0 10px;
+        flex: 2 0 10px;
         background: yellow;
         border-style: dashed;
         border-left-width: 7px;
         border-right-width: 3px;
       }
       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 {
         display: inline-block;
         width: 15px;
         height: 15px;
         background: purple;
       }
--- a/layout/reftests/flexbox/flexbox-mbp-horiz-2a.xhtml
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-2a.xhtml
@@ -6,46 +6,46 @@
 <!-- Testcase with margin/border on flex items. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div { height: 100px; border: 0; }
       div.flexbox {
         width: 200px;
         font-size: 10px;
-        display: -moz-flex;
+        display: flex;
       }
       div.a {
-        -moz-flex: 1 0 20px;
+        flex: 1 0 20px;
         background: lightgreen;
         margin-left: 1px;
         margin-right: 3px;
         border-style: dotted;
         border-left-width: 2px;
         border-right-width: 4px;
       }
       div.b {
-        -moz-flex: 2 0 4px;
+        flex: 2 0 4px;
         background: yellow;
         margin-left: 2px;
         margin-right: 4px;
         border-style: dashed;
         border-left-width: 7px;
         border-right-width: 3px;
       }
       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 {
         display: inline-block;
         width: 15px;
         height: 15px;
         background: purple;
       }
--- a/layout/reftests/flexbox/flexbox-mbp-horiz-2b.xhtml
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-2b.xhtml
@@ -9,50 +9,50 @@
      padding-box area in this test.) -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div { height: 100px; border: 0; }
       div.flexbox {
         width: 200px;
         font-size: 10px;
-        display: -moz-flex;
+        display: flex;
       }
       div.a {
-        -moz-flex: 1 0 9px;
+        flex: 1 0 9px;
         background: lightgreen;
         margin-left: 1px;
         margin-right: 3px;
         border-style: dotted;
         border-left-width: 2px;
         border-right-width: 4px;
         padding-left: 5px;
         padding-right: 6px;
       }
       div.b {
-        -moz-flex: 2 0 1px;
+        flex: 2 0 1px;
         background: yellow;
         margin-left: 2px;
         margin-right: 4px;
         border-style: dashed;
         border-left-width: 7px;
         border-right-width: 3px;
         padding-left: 1px;
         padding-right: 2px;
       }
       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 {
         display: inline-block;
         width: 15px;
         height: 15px;
         background: purple;
       }
--- a/layout/reftests/flexbox/flexbox-mbp-horiz-3-reverse.xhtml
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-3-reverse.xhtml
@@ -4,18 +4,18 @@
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div { height: 20px; border: 0; }
       div.flexbox {
         width: 200px;
-        display: -moz-flex;
-        -moz-flex-direction: row-reverse;
+        display: flex;
+        flex-direction: row-reverse;
         margin-bottom: 2px;
       }
 
       <!-- customizations for flexbox border/padding -->
       .borderA {
         border-style: dashed;
         border-color: purple;
         border-top-width: 6px;
@@ -37,24 +37,24 @@
         padding: 4px 3px 2px 1px;
       }
 
       .paddingB {
         padding: 8px 11px 14px 17px;
       }
 
       div.child1 {
-        -moz-flex: 1 0 24px;
+        flex: 1 0 24px;
         background: lightgreen;
         border-style: dotted;
         border-left-width: 2px;
         border-right-width: 4px;
       }
       div.child2 {
-        -moz-flex: 2 0 10px;
+        flex: 2 0 10px;
         background: yellow;
         border-style: dashed;
         border-left-width: 7px;
         border-right-width: 3px;
       }
     </style>
   </head>
   <body>
--- a/layout/reftests/flexbox/flexbox-mbp-horiz-3.xhtml
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-3.xhtml
@@ -5,17 +5,17 @@
 -->
 <!-- Testcase with border/padding on a flex container and on its children -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div { height: 20px; border: 0; }
       div.flexbox {
         width: 200px;
-        display: -moz-flex;
+        display: flex;
         margin-bottom: 2px;
       }
 
       <!-- customizations for flex container border/padding -->
       .borderA {
         border-style: dashed;
         border-color: purple;
         border-top-width: 6px;
@@ -37,24 +37,24 @@
         padding: 4px 3px 2px 1px;
       }
 
       .paddingB {
         padding: 8px 11px 14px 17px;
       }
 
       div.child1 {
-        -moz-flex: 1 0 24px;
+        flex: 1 0 24px;
         background: lightgreen;
         border-style: dotted;
         border-left-width: 2px;
         border-right-width: 4px;
       }
       div.child2 {
-        -moz-flex: 2 0 10px;
+        flex: 2 0 10px;
         background: yellow;
         border-style: dashed;
         border-left-width: 7px;
         border-right-width: 3px;
       }
     </style>
   </head>
   <body>
--- a/layout/reftests/flexbox/flexbox-minSize-horiz-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-minSize-horiz-1.xhtml
@@ -10,29 +10,29 @@
      We check that flex items can't shrink below their min-content width,
      unless we explicitly reduce their min-width with e.g. "min-width: 0".
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         width: 200px;
-        display: -moz-flex;
+        display: flex;
         margin-bottom: 5px;
         font-size: 8px;
         border: 1px dotted black;
       }
       div.flexbox > * {
         margin-right: 20px;
         border: 1px dashed green;
         background: lightblue;
         height: 40px;
       }
       div.smallSize      { width: 5px; }
-      div.smallFlexBasis { -moz-flex-basis: 2px; }
+      div.smallFlexBasis { flex-basis: 2px; }
       div.zeroMinWidth   { min-width: 0; }
 
     </style>
   </head>
   <body>
 
     <!-- Check that we use the min-content width as a lower-bound when sizing
          flex items. -->
--- a/layout/reftests/flexbox/flexbox-minSize-vert-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-minSize-vert-1.xhtml
@@ -10,31 +10,31 @@
      We check that flex items can't shrink below their min-content height,
      unless we explicitly reduce their min-height with e.g. "min-height: 0".
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         height: 140px;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
         margin-right: 5px;
         font-size: 8px;
         border: 1px dotted black;
         float: left;
       }
       div.flexbox > * {
         margin-bottom: 20px;
         border: 1px dashed green;
         background: lightblue;
         width: 40px;
       }
       div.smallSize      { height: 5px; }
-      div.smallFlexBasis { -moz-flex-basis: 2px; }
+      div.smallFlexBasis { flex-basis: 2px; }
       div.zeroMinHeight  { min-height: 0; }
 
     </style>
   </head>
   <body>
 
     <!-- Check that we use the min-content height as a lower-bound when sizing
          flex items. -->
--- a/layout/reftests/flexbox/flexbox-position-absolute-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-absolute-1.xhtml
@@ -20,32 +20,32 @@
       .abspos {
         position: absolute;
         left: 5px;
         border: 2px dotted black;
       }
       div.flexbox {
         width: 200px;
         height: 100px;
-        display: -moz-flex;
+        display: flex;
       }
       div.a {
-        -moz-flex: 1 0 auto;
+        flex: 1 0 auto;
         width: 30px;
         height: 100px;
         background: lightgreen;
       }
       div.b {
-        -moz-flex: 2 0 auto;
+        flex: 2 0 auto;
         width: 20px;
         height: 100px;
         background: yellow;
       }
       div.inflex {
-        -moz-flex: none;
+        flex: none;
         width: 20px;
         height: 100px;
         background: gray;
       }
       div.noFlexFn {
         width: 15px;
         height: 15px;
         background: teal;
@@ -57,14 +57,14 @@
       <!-- First child abspos: -->
       <div class="flexbox"><div class="a abspos"/><div class="b"/></div>
       <!-- Second child abspos: -->
       <div class="flexbox"><div class="a"/><div class="b abspos"/></div>
       <!-- Middle child abspos: -->
       <div class="flexbox"
            ><div class="a"/><div class="inflex abspos"/><div class="b"/></div>
       <!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
-      <div class="flexbox" style="-moz-justify-content: space-around"
+      <div class="flexbox" style="justify-content: space-around"
            ><div class="inflex"/><div class="inflex"/><div class="inflex"
           /><div class="noFlexFn abspos"/><div class="inflex"/></div>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-position-absolute-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-absolute-2.xhtml
@@ -21,32 +21,32 @@
       }
       .abspos {
         position: absolute;
         border: 2px dotted black;
       }
       div.flexbox {
         width: 200px;
         height: 100px;
-        display: -moz-flex;
+        display: flex;
       }
       div.a {
-        -moz-flex: 1 0 auto;
+        flex: 1 0 auto;
         width: 30px;
         height: 100px;
         background: lightgreen;
       }
       div.b {
-        -moz-flex: 2 0 auto;
+        flex: 2 0 auto;
         width: 20px;
         height: 100px;
         background: yellow;
       }
       div.inflex {
-        -moz-flex: none;
+        flex: none;
         width: 20px;
         height: 100px;
         background: gray;
       }
       div.noFlexFn {
         width: 15px;
         height: 15px;
         background: teal;
@@ -58,14 +58,14 @@
       <!-- First child abspos: -->
       <div class="flexbox"><div class="a abspos"/><div class="b"/></div>
       <!-- Second child abspos: -->
       <div class="flexbox"><div class="a"/><div class="b abspos"/></div>
       <!-- Middle child abspos: -->
       <div class="flexbox"
            ><div class="a"/><div class="inflex abspos"/><div class="b"/></div>
       <!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
-      <div class="flexbox" style="-moz-justify-content: space-around"
+      <div class="flexbox" style="justify-content: space-around"
            ><div class="inflex"/><div class="inflex"/><div class="inflex"
           /><div class="noFlexFn abspos"/><div class="inflex"/></div>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-position-absolute-3.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-absolute-3.xhtml
@@ -17,27 +17,27 @@
         position: absolute;
         border: 2px dashed purple;
       }
       div.flexbox {
         top: 30px;
         left: 40px;
         width: 200px;
         height: 100px;
-        display: -moz-flex;
+        display: flex;
         position: absolute;
         border: 1px solid black;
       }
       div.a {
-        -moz-flex: 1 0 30px;
+        flex: 1 0 30px;
         height: 100px;
         background: lightgreen;
       }
       div.b {
-        -moz-flex: 2 0 20px;
+        flex: 2 0 20px;
         height: 100px;
         background: yellow;
       }
     </style>
   </head>
   <body>
     <div class="containingBlock">
       <div class="flexbox"><div class="a"/><div class="b"/></div>
--- a/layout/reftests/flexbox/flexbox-position-absolute-4.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-absolute-4.xhtml
@@ -22,28 +22,28 @@
         left: 5px;
         border: 2px dotted black;
       }
       div.flexbox {
         top: 30px;
         left: 40px;
         width: 200px;
         height: 100px;
-        display: -moz-flex;
+        display: flex;
         position: absolute;
         border: 1px solid black;
       }
       div.a {
-        -moz-flex: 1 0 auto;
+        flex: 1 0 auto;
         width:  30px;
         height: 100px;
         background: lightgreen;
       }
       div.b {
-        -moz-flex: 2 0 20px;
+        flex: 2 0 20px;
         height: 100px;
         background: yellow;
       }
     </style>
   </head>
   <body>
     <div class="containingBlock">
       <div class="flexbox"><div class="a abspos"/><div class="b"/></div>
--- a/layout/reftests/flexbox/flexbox-position-fixed-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-fixed-1.xhtml
@@ -20,32 +20,32 @@
       .fixedpos {
         position: fixed;
         left: 5px;
         border: 2px dotted black;
       }
       div.flexbox {
         width: 200px;
         height: 100px;
-        display: -moz-flex;
+        display: flex;
       }
       div.a {
-        -moz-flex: 1 0 auto;
+        flex: 1 0 auto;
         width: 30px;
         height: 100px;
         background: lightgreen;
       }
       div.b {
-        -moz-flex: 2 0 auto;
+        flex: 2 0 auto;
         width: 20px;
         height: 100px;
         background: yellow;
       }
       div.inflex {
-        -moz-flex: none;
+        flex: none;
         width: 20px;
         height: 100px;
         background: gray;
       }
       div.noFlexFn {
         width: 15px;
         height: 15px;
         background: teal;
@@ -57,14 +57,14 @@
       <!-- First child fixedpos: -->
       <div class="flexbox"><div class="a fixedpos"/><div class="b"/></div>
       <!-- Second child fixedpos: -->
       <div class="flexbox"><div class="a"/><div class="b fixedpos"/></div>
       <!-- Middle child fixedpos: -->
       <div class="flexbox"
            ><div class="a"/><div class="inflex fixedpos"/><div class="b"/></div>
       <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: -->
-      <div class="flexbox" style="-moz-justify-content: space-around"
+      <div class="flexbox" style="justify-content: space-around"
            ><div class="inflex"/><div class="inflex"/><div class="inflex"
           /><div class="noFlexFn fixedpos"/><div class="inflex"/></div>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-position-fixed-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-fixed-2.xhtml
@@ -21,32 +21,32 @@
       }
       .fixedpos {
         position: fixed;
         border: 2px dotted black;
       }
       div.flexbox {
         width: 200px;
         height: 100px;
-        display: -moz-flex;
+        display: flex;
       }
       div.a {
-        -moz-flex: 1 0 auto;
+        flex: 1 0 auto;
         width: 30px;
         height: 100px;
         background: lightgreen;
       }
       div.b {
-        -moz-flex: 2 0 auto;
+        flex: 2 0 auto;
         width: 20px;
         height: 100px;
         background: yellow;
       }
       div.inflex {
-        -moz-flex: none;
+        flex: none;
         width: 20px;
         height: 100px;
         background: gray;
       }
       div.noFlexFn {
         width: 15px;
         height: 15px;
         background: teal;
@@ -58,14 +58,14 @@
       <!-- First child fixedpos: -->
       <div class="flexbox"><div class="a fixedpos"/><div class="b"/></div>
       <!-- Second child fixedpos: -->
       <div class="flexbox"><div class="a"/><div class="b fixedpos"/></div>
       <!-- Middle child fixedpos: -->
       <div class="flexbox"
            ><div class="a"/><div class="inflex fixedpos"/><div class="b"/></div>
       <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: -->
-      <div class="flexbox" style="-moz-justify-content: space-around"
+      <div class="flexbox" style="justify-content: space-around"
            ><div class="inflex"/><div class="inflex"/><div class="inflex"
           /><div class="noFlexFn fixedpos"/><div class="inflex"/></div>
     </div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-position-fixed-3.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-fixed-3.xhtml
@@ -17,27 +17,27 @@
         position: absolute;
         border: 2px dashed purple;
       }
       div.flexbox {
         top: 30px;
         left: 40px;
         width: 200px;
         height: 100px;
-        display: -moz-flex;
+        display: flex;
         position: fixed;
         border: 1px solid black;
       }
       div.a {
-        -moz-flex: 1 0 30px;
+        flex: 1 0 30px;
         height: 100px;
         background: lightgreen;
       }
       div.b {
-        -moz-flex: 2 0 20px;
+        flex: 2 0 20px;
         height: 100px;
         background: yellow;
       }
     </style>
   </head>
   <body>
     <div class="containingBlock">
       <div class="flexbox"><div class="a"/><div class="b"/></div>
--- a/layout/reftests/flexbox/flexbox-position-fixed-4.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-fixed-4.xhtml
@@ -22,28 +22,28 @@
         left: 5px;
         border: 2px dotted black;
       }
       div.flexbox {
         top: 30px;
         left: 40px;
         width: 200px;
         height: 100px;
-        display: -moz-flex;
+        display: flex;
         position: fixed;
         border: 2px dashed teal;
       }
       div.a {
-        -moz-flex: 1 0 auto;
+        flex: 1 0 auto;
         width:  30px;
         height: 100px;
         background: lightgreen;
       }
       div.b {
-        -moz-flex: 2 0 20px;
+        flex: 2 0 20px;
         height: 100px;
         background: yellow;
       }
     </style>
   </head>
   <body>
     <div class="containingBlock">
       <div class="flexbox"><div class="a fixedpos"/><div class="b"/></div>
--- a/layout/reftests/flexbox/flexbox-pref-1-disabled-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-pref-1-disabled-ref.xhtml
@@ -6,17 +6,17 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       body { margin: 0 }
     </style>
   </head>
   <body>
     <p>
-      "display: -moz-flex" is:
+      "display: flex" is:
       <div>disabled</div>
     </p>
     <p>
-      "display: -moz-inline-flex" is:
+      "display: inline-flex" is:
       <div>disabled</div>
     </p>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-pref-1-enabled-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-pref-1-enabled-ref.xhtml
@@ -6,17 +6,17 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       body { margin: 0 }
     </style>
   </head>
   <body>
     <p>
-      "display: -moz-flex" is:
+      "display: flex" is:
       <div>enabled</div>
     </p>
     <p>
-      "display: -moz-inline-flex" is:
+      "display: inline-flex" is:
       <div>enabled</div>
     </p>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-pref-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-pref-1.xhtml
@@ -10,31 +10,31 @@
       body { margin: 0 }
       div.mask {
         position: absolute;
         background: white;
         width: -moz-available;
       }
       div.flex {
         display: none;
-        display: -moz-flex;
+        display: flex;
       }
       div.inlineFlex {
         display: none;
-        display: -moz-inline-flex;
+        display: inline-flex;
       }
     </style>
   </head>
   <body>
     <p>
-      "display: -moz-flex" is:
+      "display: flex" is:
       <!-- If rendered, this will cover up "disabled" below: -->
       <div class="mask flex">enabled</div>
       <div>disabled</div>
     </p>
     <p>
-      "display: -moz-inline-flex" is:<br/>
+      "display: inline-flex" is:<br/>
       <!-- If rendered, this will cover up "disabled" below: -->
       <div class="mask inlineFlex">enabled</div>
       <div>disabled</div>
     </p>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-resizeviewport-1-helper.html
+++ b/layout/reftests/flexbox/flexbox-resizeviewport-1-helper.html
@@ -4,26 +4,26 @@
 -->
 <!-- Helper-file for reftest flexbox-resizeviewport-1.xhtml
      I'm intentionally using quirks-mode (no doctype), so that
      a 100% height will work. -->
 <html>
   <head>
     <style>
       div.flexbox {
-        display: -moz-flex;
+        display: flex;
         height: 100%;
         border: 2px dashed black;
       }
       div.a {
-        -moz-flex: 1;
+        flex: 1;
         background: pink;
       }
       div.b {
-        -moz-flex: 1;
+        flex: 1;
         background: teal;
       }
     </style>
   </head>
   <body>
     <div class="flexbox">
       <div class="a"></div><div class="b"></div>
     </div>
--- a/layout/reftests/flexbox/flexbox-sizing-horiz-1-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-sizing-horiz-1-ref.xhtml
@@ -5,17 +5,17 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div { height: 10px; }
       div.flexbox {
         border: 1px dashed blue;
         font-size: 10px;
-        -moz-flex-direction: column;
+        flex-direction: column;
         margin-bottom: 2px;
       }
       div.a, div.b, div.c { float: left }
       div.a {
         width: 20px;
         background: lightgreen;
       }
       div.b {
--- a/layout/reftests/flexbox/flexbox-sizing-horiz-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-sizing-horiz-1.xhtml
@@ -9,32 +9,32 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div { height: 10px; }
       div.flexbox {
         border: 1px dashed blue;
         font-size: 10px;
-        display: -moz-flex;
+        display: flex;
         margin-bottom: 2px;
       }
       div.a {
-        -moz-flex: 1 20px;
+        flex: 1 20px;
         max-width: 60px;
         background: lightgreen;
       }
       div.b {
-        -moz-flex: 1 20px;
+        flex: 1 20px;
         min-width: 40px;
         max-width: 60px;
         background: purple;
       }
       div.c {
-        -moz-flex: 1 40px;
+        flex: 1 40px;
         max-width: 10px;
         max-width: 60px;
         background: orange;
       }
     </style>
   </head>
   <body>
     <!-- auto-sized horizontal flexbox should occupy the available width. -->
--- a/layout/reftests/flexbox/flexbox-sizing-vert-1-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-sizing-vert-1-ref.xhtml
@@ -6,17 +6,17 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div { width: 10px; }
       div.flexbox {
         float: left;
         border: 1px dashed blue;
         font-size: 10px;
-        -moz-flex-direction: column;
+        flex-direction: column;
         margin-right: 2px;
       }
       div.a {
         height: 20px;
         background: lightgreen;
       }
       div.b {
         height: 40px;
--- a/layout/reftests/flexbox/flexbox-sizing-vert-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-sizing-vert-1.xhtml
@@ -10,33 +10,33 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div { width: 10px; }
       div.flexbox {
         float: left;
         border: 1px dashed blue;
         font-size: 10px;
-        display: -moz-flex;
-        -moz-flex-direction: column;
+        display: flex;
+        flex-direction: column;
         margin-right: 2px;
       }
       div.a {
-        -moz-flex: 1 20px;
+        flex: 1 20px;
         max-height: 60px;
         background: lightgreen;
       }
       div.b {
-        -moz-flex: 1 20px;
+        flex: 1 20px;
         min-height: 40px;
         max-height: 60px;
         background: purple;
       }
       div.c {
-        -moz-flex: 1 40px;
+        flex: 1 40px;
         max-height: 10px;
         max-height: 60px;
         background: orange;
       }
     </style>
   </head>
   <body>
     <!-- auto-sized flexbox should shrinkwrap its flex items' hypothetical
--- a/layout/reftests/flexbox/flexbox-table-fixup-1a.xhtml
+++ b/layout/reftests/flexbox/flexbox-table-fixup-1a.xhtml
@@ -1,27 +1,27 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!--
      Testcase with table parts inside of a flex container, triggering
-     table-fixup.  We use -moz-justify-content:space-between to stick packing
+     table-fixup.  We use justify-content:space-between to stick packing
      space between flex items, so that we can verify that e.g. a contiguous
      run of <td>s will end up in the same flex item (wrapped in a table).
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         border: 1px dashed blue;
         width: 200px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
       }
 
       <!-- NOTE: table-fixup pads each td element by 1px on each side. We
            override that for top & bottom, for simplicity. So the td makes us
            generate a box that's 2px wider than its contents. -->
       td {
         padding-top: 0px;
         padding-bottom: 0px;
@@ -51,12 +51,12 @@
     <!-- Table cell followed by tbody (they end up in the same table) -->
     <div class="flexbox"
          ><td class="a">cell1</td><tbody class="b">t</tbody></div>
 
     <!-- Empty table cell (ends up occupying 2px of width), followed by div,
          followed by nonempty table cell. (3 flex items). -->
     <!-- Note: We use "space-between" (instead of "space-around") here because
          it makes the math cleaner. (100px split 2 ways instead of 3 ways.) -->
-    <div class="flexbox" style="-moz-justify-content: space-between"
+    <div class="flexbox" style="justify-content: space-between"
          ><td></td><div class="c">div</div><td class="b">cell1</td></div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-table-fixup-1b.xhtml
+++ b/layout/reftests/flexbox/flexbox-table-fixup-1b.xhtml
@@ -1,70 +1,70 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!--
      Testcase with table parts inside of a flex container, triggering
-     table-fixup.  We use -moz-justify-content:space-between to stick packing
+     table-fixup.  We use justify-content:space-between to stick packing
      space between flex items, so that we can verify that e.g. a contiguous
      run of <td>s will end up in the same flex item (wrapped in a table).
 
-     In this variant of the test, we also assign '-moz-flex' values to the
+     In this variant of the test, we also assign 'flex' values to the
      table parts - these values should have no effect, since these children
-     don't themselves form flex items.  The -moz-flex property _is_ honored on
+     don't themselves form flex items.  The flex property _is_ honored on
      the <div class="c">, though, because _its_ box _is_ a direct child of a
      flexbox, so it _is_ a flex item.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div.flexbox {
         border: 1px dashed blue;
         width: 200px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
       }
 
       <!-- NOTE: table-fixup pads each td element by 1px on each side. We
            override that for top & bottom, for simplicity. So the td makes us
            generate a box that's 2px wider than its contents. -->
       td {
         padding-top: 0px;
         padding-bottom: 0px;
       }
 
       .a {
         background: lightgreen;
         width: 48px;
-        -moz-flex: 5 3 100px;
+        flex: 5 3 100px;
       }
 
       .b {
         background: yellow;
         width: 48px;
-        -moz-flex: 1 2 3px;
+        flex: 1 2 3px;
       }
 
       .c {
         background: pink;
-        -moz-flex: 0 0 48px;
+        flex: 0 0 48px;
       }
     </style>
   </head>
   <body>
     <!-- Just 2 adjacent table cells (they end up in the same table) -->
     <div class="flexbox"
          ><td class="a">cell1</td><td class="b">cell2</td></div>
 
     <!-- Table cell followed by tbody (they end up in the same table) -->
     <div class="flexbox"
          ><td class="a">cell1</td><tbody class="b">t</tbody></div>
 
     <!-- Empty table cell (ends up occupying 2px of width), followed by div,
          followed by nonempty table cell. (3 flex items). -->
     <!-- Note: We use "space-between" (instead of "space-around") here because
          it makes the math cleaner. (100px split 2 ways instead of 3 ways.) -->
-    <div class="flexbox" style="-moz-justify-content: space-between"
+    <div class="flexbox" style="justify-content: space-between"
          ><td></td><div class="c">div</div><td class="b">cell1</td></div>
   </body>
 </html>
--- a/layout/reftests/flexbox/flexbox-whitespace-handling-1a.xhtml
+++ b/layout/reftests/flexbox/flexbox-whitespace-handling-1a.xhtml
@@ -5,38 +5,38 @@
 -->
 <!--
      This test verifies that we don't create anonymous flex items around
      runs of inline content that are _purely_ whitespace.
 
      The test uses "white-space: pre", to try to tempt us into honoring
      that whitespace. (but we should resist that temptation).
 
-     The test also uses '-moz-justify-content: space-around' to be sure we can
+     The test also uses 'justify-content: space-around' to be sure we can
      tell whether anonymous flex items are being created around the whitespace
      (since they'd claim a share of the packing space if they were there).
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div { height: 100px; }
       div.flexbox {
         white-space: pre;
         border: 1px dashed blue;
         width: 200px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
       }
       div.a {
-        -moz-flex: none;
+        flex: none;
         width: 30px;
         background: lightgreen;
       }
       div.b {
-        -moz-flex: none;
+        flex: none;
         width: 20px;
         background: lightblue;
       }
       img { width: 40px; }
     </style>
   </head>
   <body>
     <!-- whitespace & tab after flex item -->
--- a/layout/reftests/flexbox/flexbox-whitespace-handling-1b.xhtml
+++ b/layout/reftests/flexbox/flexbox-whitespace-handling-1b.xhtml
@@ -10,18 +10,18 @@
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <style>
       div { height: 100px; }
       div.flexbox {
         border: 1px dashed blue;
         width: 200px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
       }
       div.a {
         width: 30px;
         background: lightgreen;
       }
       div.b {
         width: 20px;
         background: lightblue;
--- a/layout/reftests/flexbox/flexbox-whitespace-handling-2-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-whitespace-handling-2-ref.xhtml
@@ -12,18 +12,18 @@
   <head>
     <link rel="stylesheet" type="text/css" href="ahem.css" />
     <style>
       div { height: 100px; }
       div.flexbox {
         white-space: pre;
         border: 1px dashed blue;
         width: 200px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
       }
       div.a {
         width: 30px;
         background: lightgreen;
       }
       div.b {
         width: 20px;
         background: lightblue;
--- a/layout/reftests/flexbox/flexbox-whitespace-handling-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-whitespace-handling-2.xhtml
@@ -12,18 +12,18 @@
   <head>
     <link rel="stylesheet" type="text/css" href="ahem.css" />
     <style>
       div { height: 100px; }
       div.flexbox {
         white-space: pre;
         border: 1px dashed blue;
         width: 200px;
-        display: -moz-flex;
-        -moz-justify-content: space-around;
+        display: flex;
+        justify-content: space-around;
       }
       div.a {
         width: 30px;
         background: lightgreen;
       }
       div.b {
         width: 20px;
         background: lightblue;
--- a/layout/reftests/flexbox/flexbox-whitespace-handling-3-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-whitespace-handling-3-ref.xhtml
@@ -9,17 +9,17 @@
      affect our rendering.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <link rel="stylesheet" type="text/css" href="ahem.css" />
     <style>
       div.flexbox {
         border: 1px dashed blue;
-        display: -moz-flex;
+        display: flex;
       }
     </style>
   </head>
   <body>
     <div class="flexbox">abc def</div>
     <div class="flexbox">abc def</div>
     <div class="flexbox">abc def</div>
     <div class="flexbox">abc def</div>
--- a/layout/reftests/flexbox/flexbox-whitespace-handling-3.xhtml
+++ b/layout/reftests/flexbox/flexbox-whitespace-handling-3.xhtml
@@ -10,17 +10,17 @@
      and more variants on that theme.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <link rel="stylesheet" type="text/css" href="ahem.css" />
     <style>
       div.flexbox {
         border: 1px dashed blue;
-        display: -moz-flex;
+        display: flex;
       }
     </style>
   </head>
   <body>
     <div class="flexbox">abc def</div>
     <div class="flexbox">abc <span>def</span></div>
     <div class="flexbox"><span>abc</span> def</div>
     <div class="flexbox"><span>abc</span> <span>def</span></div>
--- a/layout/reftests/flexbox/flexbox-widget-flex-items-1.html
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-1.html
@@ -12,25 +12,25 @@
     valid size, and any specified widths (and min/max-widths) will have no
     effect on their rendering (regardless of whether they're in a flex
     container).
 -->
 <html>
 <head>
   <style>
     div.flexbox {
-      display: -moz-flex;
-      -moz-align-items: flex-start;
+      display: flex;
+      align-items: flex-start;
       border: 2px dotted lightgray;
       width: 400px;
       height: 30px;
       margin-bottom: 10px;
     }
     div.flexbox > * {
-      -moz-flex: 1;
+      flex: 1;
       outline: 1px dashed black;
       margin: 0;
       vertical-align: top;
     }
   </style>
 </head>
 <body>
   <div class="flexbox"><input type="button"></div>
--- a/layout/reftests/flexbox/flexbox-widget-flex-items-2.html
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-2.html
@@ -8,18 +8,18 @@
     (and hence refuse to flex), we don't honor the "min-width" property
     when running the flex algorithm, just as we don't honor it outside
     of flexbox contexts.
 -->
 <html>
 <head>
   <style>
     div.flexbox {
-      display: -moz-flex;
-      -moz-align-items: flex-start;
+      display: flex;
+      align-items: flex-start;
       background: lightgray;
       width: 400px;
       height: 30px;
       margin-bottom: 10px;
     }
     div.flexbox > * {
       min-width: 350px;
       outline: 1px dashed black;
--- a/layout/reftests/flexbox/flexbox-widget-flex-items-3.html
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-3.html
@@ -8,18 +8,18 @@
     (and hence refuse to flex), we don't honor the "max-width" property
     when running the flex algorithm, just as we don't honor it outside
     of flexbox contexts.
 -->
 <html>
 <head>
   <style>
     div.flexbox {
-      display: -moz-flex;
-      -moz-align-items: flex-start;
+      display: flex;
+      align-items: flex-start;
       background: lightgray;
       width: 400px;
       height: 30px;
       margin-bottom: 10px;
     }
     div.flexbox > * {
       max-width: 3px;
       min-width: 0; /* to override default 'min-width:auto' */
--- a/layout/reftests/flexbox/flexbox-widget-flex-items-4-ref.html
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-4-ref.html
@@ -11,17 +11,17 @@
       width: -moz-max-content;
       float: left;
       height: 60px;
       margin-right: 10px;
     }
     div.flexbox > * {
       outline: 1px dashed black;
       margin: 0;
-      -moz-align-self: stretch;
+      align-self: stretch;
       vertical-align: top;
       height: 100%;
     }
     br { clear: left; }
   </style>
 </head>
 <body>
   <div class="flexbox"><input type="button"></div>
--- a/layout/reftests/flexbox/flexbox-widget-flex-items-4.html
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-4.html
@@ -7,27 +7,27 @@
     This testcase checks that, for any widgets that have a single valid size
     (and hence refuse to flex), we don't stretch them in the cross-axis,
     despite the "align-self: stretch" property.
 -->
 <html>
 <head>
   <style>
     div.flexbox {
-      display: -moz-flex;
+      display: flex;
       background: lightgray;
       width: -moz-max-content;
       float: left;
       height: 60px;
       margin-right: 10px;
     }
     div.flexbox > * {
       outline: 1px dashed black;
       margin: 0;
-      -moz-align-self: stretch;
+      align-self: stretch;
       vertical-align: top;
       height: auto;
     }
     br { clear: left; }
   </style>
 </head>
 <body>
   <div class="flexbox"><input type="button"></div>
--- a/layout/style/nsCSSKeywordList.h
+++ b/layout/style/nsCSSKeywordList.h
@@ -69,19 +69,16 @@ CSS_KEY(-moz-eventreerow, _moz_eventreer
 CSS_KEY(-moz-ethiopic-halehame, _moz_ethiopic_halehame)
 CSS_KEY(-moz-ethiopic-numeric, _moz_ethiopic_numeric)
 CSS_KEY(-moz-ethiopic-halehame-am, _moz_ethiopic_halehame_am)
 CSS_KEY(-moz-ethiopic-halehame-ti-er, _moz_ethiopic_halehame_ti_er)
 CSS_KEY(-moz-ethiopic-halehame-ti-et, _moz_ethiopic_halehame_ti_et)
 CSS_KEY(-moz-field, _moz_field)
 CSS_KEY(-moz-fieldtext, _moz_fieldtext)
 CSS_KEY(-moz-fit-content, _moz_fit_content)
-#ifdef MOZ_FLEXBOX
-CSS_KEY(-moz-flex, _moz_flex)
-#endif // MOZ_FLEXBOX
 CSS_KEY(-moz-grabbing, _moz_grabbing)
 CSS_KEY(-moz-grab, _moz_grab)
 CSS_KEY(-moz-grid-group, _moz_grid_group)
 CSS_KEY(-moz-grid-line, _moz_grid_line)
 CSS_KEY(-moz-grid, _moz_grid)
 CSS_KEY(-moz-groupbox, _moz_groupbox)
 CSS_KEY(-moz-gujarati, _moz_gujarati)
 CSS_KEY(-moz-gurmukhi, _moz_gurmukhi)
@@ -90,19 +87,16 @@ CSS_KEY(-moz-hidden-unscrollable, _moz_h
 CSS_KEY(-moz-hangul, _moz_hangul)
 CSS_KEY(-moz-hyperlinktext, _moz_hyperlinktext)
 CSS_KEY(-moz-html-cellhighlight, _moz_html_cellhighlight)
 CSS_KEY(-moz-html-cellhighlighttext, _moz_html_cellhighlighttext)
 CSS_KEY(-moz-image-rect, _moz_image_rect)
 CSS_KEY(-moz-info, _moz_info)
 CSS_KEY(-moz-initial, _moz_initial)
 CSS_KEY(-moz-inline-box, _moz_inline_box)
-#ifdef MOZ_FLEXBOX
-CSS_KEY(-moz-inline-flex, _moz_inline_flex)
-#endif // MOZ_FLEXBOX
 CSS_KEY(-moz-inline-grid, _moz_inline_grid)
 CSS_KEY(-moz-inline-stack, _moz_inline_stack)
 CSS_KEY(-moz-isolate, _moz_isolate)
 CSS_KEY(-moz-isolate-override, _moz_isolate_override)
 CSS_KEY(-moz-japanese-formal, _moz_japanese_formal)
 CSS_KEY(-moz-japanese-informal, _moz_japanese_informal)
 CSS_KEY(-moz-kannada, _moz_kannada)
 CSS_KEY(-moz-khmer, _moz_khmer)
@@ -256,16 +250,17 @@ CSS_KEY(expanded, expanded)
 CSS_KEY(extra-condensed, extra_condensed)
 CSS_KEY(extra-expanded, extra_expanded)
 CSS_KEY(ew-resize, ew_resize)
 CSS_KEY(farthest-side, farthest_side)
 CSS_KEY(farthest-corner, farthest_corner)
 CSS_KEY(fill, fill)
 CSS_KEY(fixed, fixed)
 CSS_KEY(flat, flat)
+CSS_KEY(flex, flex)
 CSS_KEY(flex-end, flex_end)
 CSS_KEY(flex-start, flex_start)
 CSS_KEY(forwards, forwards)
 CSS_KEY(georgian, georgian)
 CSS_KEY(grad, grad)
 CSS_KEY(graytext, graytext)
 CSS_KEY(groove, groove)
 CSS_KEY(hebrew, hebrew)
@@ -288,16 +283,17 @@ CSS_KEY(inactivecaption, inactivecaption
 CSS_KEY(inactivecaptiontext, inactivecaptiontext)
 CSS_KEY(infinite, infinite)
 CSS_KEY(infobackground, infobackground)
 CSS_KEY(infotext, infotext)
 CSS_KEY(inherit, inherit)
 CSS_KEY(inline, inline)
 CSS_KEY(inline-axis, inline_axis)
 CSS_KEY(inline-block, inline_block)
+CSS_KEY(inline-flex, inline_flex)
 CSS_KEY(inline-table, inline_table)
 CSS_KEY(inset, inset)
 CSS_KEY(inside, inside)
 CSS_KEY(interpolatematrix, interpolatematrix)
 CSS_KEY(italic, italic)
 CSS_KEY(justify, justify)
 CSS_KEY(katakana, katakana)
 CSS_KEY(katakana-iroha, katakana_iroha)
--- a/layout/style/nsCSSPropList.h
+++ b/layout/style/nsCSSPropList.h
@@ -1532,108 +1532,108 @@ CSS_PROP_TABLEBORDER(
     CSS_PROPERTY_PARSE_VALUE,
     "",
     VARIANT_HK,
     kEmptyCellsKTable,
     CSS_PROP_NO_OFFSET,
     eStyleAnimType_None)
 #ifdef MOZ_FLEXBOX
 CSS_PROP_POSITION(
-    -moz-align-items,
+    align-items,
     align_items,
-    CSS_PROP_DOMPROP_PREFIXED(AlignItems),
+    AlignItems,
     CSS_PROPERTY_PARSE_VALUE,
     "layout.css.flexbox.enabled",
     VARIANT_HK,
     kAlignItemsKTable,
     offsetof(nsStylePosition, mAlignItems),
     eStyleAnimType_EnumU8)
 CSS_PROP_POSITION(
-    -moz-align-self,
+    align-self,
     align_self,
-    CSS_PROP_DOMPROP_PREFIXED(AlignSelf),
+    AlignSelf,
     CSS_PROPERTY_PARSE_VALUE,
     "layout.css.flexbox.enabled",
     VARIANT_HK,
     kAlignSelfKTable,
     offsetof(nsStylePosition, mAlignSelf),
     eStyleAnimType_EnumU8)
 CSS_PROP_SHORTHAND(
-    -moz-flex,
+    flex,
     flex,
-    CSS_PROP_DOMPROP_PREFIXED(Flex),
+    Flex,
     CSS_PROPERTY_PARSE_FUNCTION,
     "layout.css.flexbox.enabled")
 CSS_PROP_POSITION(
-    -moz-flex-basis,
+    flex-basis,
     flex_basis,
-    CSS_PROP_DOMPROP_PREFIXED(FlexBasis),
+    FlexBasis,
     CSS_PROPERTY_PARSE_VALUE |
         CSS_PROPERTY_VALUE_NONNEGATIVE |
         CSS_PROPERTY_STORES_CALC,
     "layout.css.flexbox.enabled",
     // NOTE: The parsing implementation for the 'flex' shorthand property has
     // its own code to parse each subproperty. It does not depend on the
     // longhand parsing defined here.
     VARIANT_AHKLP | VARIANT_CALC,
     kWidthKTable,
     offsetof(nsStylePosition, mFlexBasis),
     eStyleAnimType_Coord)
 CSS_PROP_POSITION(
-    -moz-flex-direction,
+    flex-direction,
     flex_direction,
-    CSS_PROP_DOMPROP_PREFIXED(FlexDirection),
+    FlexDirection,
     CSS_PROPERTY_PARSE_VALUE,
     "layout.css.flexbox.enabled",
     VARIANT_HK,
     kFlexDirectionKTable,
     offsetof(nsStylePosition, mFlexDirection),
     eStyleAnimType_EnumU8)
 CSS_PROP_POSITION(
-    -moz-flex-grow,
+    flex-grow,
     flex_grow,
-    CSS_PROP_DOMPROP_PREFIXED(FlexGrow),
+    FlexGrow,
     CSS_PROPERTY_PARSE_VALUE |
       CSS_PROPERTY_VALUE_NONNEGATIVE,
     "layout.css.flexbox.enabled",
     // NOTE: The parsing implementation for the 'flex' shorthand property has
     // its own code to parse each subproperty. It does not depend on the
     // longhand parsing defined here.
     VARIANT_HN,
     nullptr,
     offsetof(nsStylePosition, mFlexGrow),
     eStyleAnimType_float) // float, except animations to/from 0 shouldn't work
 CSS_PROP_POSITION(
-    -moz-flex-shrink,
+    flex-shrink,
     flex_shrink,
-    CSS_PROP_DOMPROP_PREFIXED(FlexShrink),
+    FlexShrink,
     CSS_PROPERTY_PARSE_VALUE |
       CSS_PROPERTY_VALUE_NONNEGATIVE,
     "layout.css.flexbox.enabled",
     // NOTE: The parsing implementation for the 'flex' shorthand property has
     // its own code to parse each subproperty. It does not depend on the
     // longhand parsing defined here.
     VARIANT_HN,
     nullptr,
     offsetof(nsStylePosition, mFlexShrink),
     eStyleAnimType_float) // float, except animations to/from 0 shouldn't work
 CSS_PROP_POSITION(
-    -moz-order,
+    order,
     order,
-    CSS_PROP_DOMPROP_PREFIXED(Order),
+    Order,
     CSS_PROPERTY_PARSE_VALUE,
     "layout.css.flexbox.enabled",
     VARIANT_HI,
     nullptr,
     offsetof(nsStylePosition, mOrder),
     eStyleAnimType_Custom) // <integer>
 CSS_PROP_POSITION(
-    -moz-justify-content,
+    justify-content,
     justify_content,
-    CSS_PROP_DOMPROP_PREFIXED(JustifyContent),
+    JustifyContent,
     CSS_PROPERTY_PARSE_VALUE,
     "layout.css.flexbox.enabled",
     VARIANT_HK,
     kJustifyContentKTable,
     offsetof(nsStylePosition, mJustifyContent),
     eStyleAnimType_EnumU8)
 #endif // MOZ_FLEXBOX
 CSS_PROP_DISPLAY(
--- a/layout/style/nsCSSProps.cpp
+++ b/layout/style/nsCSSProps.cpp
@@ -956,18 +956,18 @@ int32_t nsCSSProps::kDisplayKTable[] = {
   eCSSKeyword__moz_deck,          NS_STYLE_DISPLAY_DECK,
   eCSSKeyword__moz_popup,         NS_STYLE_DISPLAY_POPUP,
   eCSSKeyword__moz_groupbox,      NS_STYLE_DISPLAY_GROUPBOX,
 #endif
 #ifdef MOZ_FLEXBOX
   // XXXdholbert NOTE: These currently need to be the last entries in the
   // table, because the "is flexbox enabled" pref that disables these will
   // disable all the entries after them, too.
-  eCSSKeyword__moz_flex,          NS_STYLE_DISPLAY_FLEX,
-  eCSSKeyword__moz_inline_flex,   NS_STYLE_DISPLAY_INLINE_FLEX,
+  eCSSKeyword_flex,               NS_STYLE_DISPLAY_FLEX,
+  eCSSKeyword_inline_flex,        NS_STYLE_DISPLAY_INLINE_FLEX,
 #endif // MOZ_FLEXBOX
   eCSSKeyword_UNKNOWN,-1
 };
 
 const int32_t nsCSSProps::kEmptyCellsKTable[] = {
   eCSSKeyword_show,                 NS_STYLE_TABLE_EMPTY_CELLS_SHOW,
   eCSSKeyword_hide,                 NS_STYLE_TABLE_EMPTY_CELLS_HIDE,
   eCSSKeyword__moz_show_background, NS_STYLE_TABLE_EMPTY_CELLS_SHOW_BACKGROUND,
--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@@ -4635,16 +4635,20 @@ nsComputedDOMStyle::GetQueryableProperty
    * Properties commented out with // are not yet implemented            *
    * Properties commented out with //// are shorthands and not queryable *
   \* ******************************************************************* */
   static const ComputedStyleMapEntry map[] = {
     /* ***************************** *\
      * Implementations of CSS styles *
     \* ***************************** */
 
+#ifdef MOZ_FLEXBOX
+    COMPUTED_STYLE_MAP_ENTRY(align_items,                   AlignItems),
+    COMPUTED_STYLE_MAP_ENTRY(align_self,                    AlignSelf),
+#endif // MOZ_FLEXBOX
     //// COMPUTED_STYLE_MAP_ENTRY(animation,                Animation),
     COMPUTED_STYLE_MAP_ENTRY(animation_delay,               AnimationDelay),
     COMPUTED_STYLE_MAP_ENTRY(animation_direction,           AnimationDirection),
     COMPUTED_STYLE_MAP_ENTRY(animation_duration,            AnimationDuration),
     COMPUTED_STYLE_MAP_ENTRY(animation_fill_mode,           AnimationFillMode),
     COMPUTED_STYLE_MAP_ENTRY(animation_iteration_count,     AnimationIterationCount),
     COMPUTED_STYLE_MAP_ENTRY(animation_name,                AnimationName),
     COMPUTED_STYLE_MAP_ENTRY(animation_play_state,          AnimationPlayState),
@@ -4699,27 +4703,36 @@ nsComputedDOMStyle::GetQueryableProperty
     COMPUTED_STYLE_MAP_ENTRY(color,                         Color),
     COMPUTED_STYLE_MAP_ENTRY(content,                       Content),
     COMPUTED_STYLE_MAP_ENTRY(counter_increment,             CounterIncrement),
     COMPUTED_STYLE_MAP_ENTRY(counter_reset,                 CounterReset),
     COMPUTED_STYLE_MAP_ENTRY(cursor,                        Cursor),
     COMPUTED_STYLE_MAP_ENTRY(direction,                     Direction),
     COMPUTED_STYLE_MAP_ENTRY(display,                       Display),
     COMPUTED_STYLE_MAP_ENTRY(empty_cells,                   EmptyCells),
+#ifdef MOZ_FLEXBOX
+    COMPUTED_STYLE_MAP_ENTRY(flex_basis,                    FlexBasis),
+    COMPUTED_STYLE_MAP_ENTRY(flex_direction,                FlexDirection),
+    COMPUTED_STYLE_MAP_ENTRY(flex_grow,                     FlexGrow),
+    COMPUTED_STYLE_MAP_ENTRY(flex_shrink,                   FlexShrink),
+#endif // MOZ_FLEXBOX
     COMPUTED_STYLE_MAP_ENTRY(float,                         CssFloat),
     //// COMPUTED_STYLE_MAP_ENTRY(font,                     Font),
     COMPUTED_STYLE_MAP_ENTRY(font_family,                   FontFamily),
     COMPUTED_STYLE_MAP_ENTRY(font_size,                     FontSize),
     COMPUTED_STYLE_MAP_ENTRY(font_size_adjust,              FontSizeAdjust),
     COMPUTED_STYLE_MAP_ENTRY(font_stretch,                  FontStretch),
     COMPUTED_STYLE_MAP_ENTRY(font_style,                    FontStyle),
     COMPUTED_STYLE_MAP_ENTRY(font_variant,                  FontVariant),
     COMPUTED_STYLE_MAP_ENTRY(font_weight,                   FontWeight),
     COMPUTED_STYLE_MAP_ENTRY_LAYOUT(height,                 Height),
     COMPUTED_STYLE_MAP_ENTRY(ime_mode,                      IMEMode),
+#ifdef MOZ_FLEXBOX
+    COMPUTED_STYLE_MAP_ENTRY(justify_content,               JustifyContent),
+#endif // MOZ_FLEXBOX
     COMPUTED_STYLE_MAP_ENTRY_LAYOUT(left,                   Left),
     COMPUTED_STYLE_MAP_ENTRY(letter_spacing,                LetterSpacing),
     COMPUTED_STYLE_MAP_ENTRY_LAYOUT(line_height,            LineHeight),
     //// COMPUTED_STYLE_MAP_ENTRY(list_style,               ListStyle),
     COMPUTED_STYLE_MAP_ENTRY(list_style_image,              ListStyleImage),
     COMPUTED_STYLE_MAP_ENTRY(list_style_position,           ListStylePosition),
     COMPUTED_STYLE_MAP_ENTRY(list_style_type,               ListStyleType),
     //// COMPUTED_STYLE_MAP_ENTRY(margin,                   Margin),
@@ -4731,16 +4744,19 @@ nsComputedDOMStyle::GetQueryableProperty
     // COMPUTED_STYLE_MAP_ENTRY(marks,                      Marks),
     COMPUTED_STYLE_MAP_ENTRY_LAYOUT(max_height,             MaxHeight),
     COMPUTED_STYLE_MAP_ENTRY_LAYOUT(max_width,              MaxWidth),
     COMPUTED_STYLE_MAP_ENTRY_LAYOUT(min_height,             MinHeight),
     COMPUTED_STYLE_MAP_ENTRY_LAYOUT(min_width,              MinWidth),
     COMPUTED_STYLE_MAP_ENTRY(opacity,                       Opacity),
     // COMPUTED_STYLE_MAP_ENTRY(orphans,                    Orphans),
     //// COMPUTED_STYLE_MAP_ENTRY(outline,                  Outline),
+#ifdef MOZ_FLEXBOX
+    COMPUTED_STYLE_MAP_ENTRY(order,                         Order),
+#endif // MOZ_FLEXBOX
     COMPUTED_STYLE_MAP_ENTRY(outline_color,                 OutlineColor),
     COMPUTED_STYLE_MAP_ENTRY(outline_offset,                OutlineOffset),
     COMPUTED_STYLE_MAP_ENTRY(outline_style,                 OutlineStyle),
     COMPUTED_STYLE_MAP_ENTRY(outline_width,                 OutlineWidth),
     COMPUTED_STYLE_MAP_ENTRY(overflow,                      Overflow),
     COMPUTED_STYLE_MAP_ENTRY(overflow_x,                    OverflowX),
     COMPUTED_STYLE_MAP_ENTRY(overflow_y,                    OverflowY),
     //// COMPUTED_STYLE_MAP_ENTRY(padding,                  Padding),
@@ -4786,20 +4802,16 @@ nsComputedDOMStyle::GetQueryableProperty
     COMPUTED_STYLE_MAP_ENTRY(word_spacing,                  WordSpacing),
     COMPUTED_STYLE_MAP_ENTRY(word_wrap,                     WordWrap),
     COMPUTED_STYLE_MAP_ENTRY(z_index,                       ZIndex),
 
     /* ******************************* *\
      * Implementations of -moz- styles *
     \* ******************************* */
 
-#ifdef MOZ_FLEXBOX
-    COMPUTED_STYLE_MAP_ENTRY(align_items,                   AlignItems),
-    COMPUTED_STYLE_MAP_ENTRY(align_self,                    AlignSelf),
-#endif // MOZ_FLEXBOX
     COMPUTED_STYLE_MAP_ENTRY(appearance,                    Appearance),
     COMPUTED_STYLE_MAP_ENTRY(_moz_background_inline_policy, BackgroundInlinePolicy),
     COMPUTED_STYLE_MAP_ENTRY(binding,                       Binding),
     COMPUTED_STYLE_MAP_ENTRY(border_bottom_colors,          BorderBottomColors),
     COMPUTED_STYLE_MAP_ENTRY(border_left_colors,            BorderLeftColors),
     COMPUTED_STYLE_MAP_ENTRY(border_right_colors,           BorderRightColors),
     COMPUTED_STYLE_MAP_ENTRY(border_top_colors,             BorderTopColors),
     COMPUTED_STYLE_MAP_ENTRY(box_align,                     BoxAlign),
@@ -4812,32 +4824,22 @@ nsComputedDOMStyle::GetQueryableProperty
     COMPUTED_STYLE_MAP_ENTRY(_moz_column_count,             ColumnCount),
     COMPUTED_STYLE_MAP_ENTRY(_moz_column_fill,              ColumnFill),
     COMPUTED_STYLE_MAP_ENTRY(_moz_column_gap,               ColumnGap),
     //// COMPUTED_STYLE_MAP_ENTRY(_moz_column_rule,         ColumnRule),
     COMPUTED_STYLE_MAP_ENTRY(_moz_column_rule_color,        ColumnRuleColor),
     COMPUTED_STYLE_MAP_ENTRY(_moz_column_rule_style,        ColumnRuleStyle),
     COMPUTED_STYLE_MAP_ENTRY(_moz_column_rule_width,        ColumnRuleWidth),
     COMPUTED_STYLE_MAP_ENTRY(_moz_column_width,             ColumnWidth),
-#ifdef MOZ_FLEXBOX
-    COMPUTED_STYLE_MAP_ENTRY(flex_basis,                    FlexBasis),
-    COMPUTED_STYLE_MAP_ENTRY(flex_direction,                FlexDirection),
-    COMPUTED_STYLE_MAP_ENTRY(flex_grow,                     FlexGrow),
-    COMPUTED_STYLE_MAP_ENTRY(flex_shrink,                   FlexShrink),
-#endif // MOZ_FLEXBOX
     COMPUTED_STYLE_MAP_ENTRY(float_edge,                    FloatEdge),
     COMPUTED_STYLE_MAP_ENTRY(font_feature_settings,         FontFeatureSettings),
     COMPUTED_STYLE_MAP_ENTRY(font_language_override,        FontLanguageOverride),
     COMPUTED_STYLE_MAP_ENTRY(force_broken_image_icon,       ForceBrokenImageIcon),
     COMPUTED_STYLE_MAP_ENTRY(hyphens,                       Hyphens),
     COMPUTED_STYLE_MAP_ENTRY(image_region,                  ImageRegion),
-#ifdef MOZ_FLEXBOX
-    COMPUTED_STYLE_MAP_ENTRY(justify_content,               JustifyContent),
-    COMPUTED_STYLE_MAP_ENTRY(order,                         Order),
-#endif // MOZ_FLEXBOX
     COMPUTED_STYLE_MAP_ENTRY(orient,                        Orient),
     COMPUTED_STYLE_MAP_ENTRY_LAYOUT(_moz_outline_radius_bottomLeft, OutlineRadiusBottomLeft),
     COMPUTED_STYLE_MAP_ENTRY_LAYOUT(_moz_outline_radius_bottomRight,OutlineRadiusBottomRight),
     COMPUTED_STYLE_MAP_ENTRY_LAYOUT(_moz_outline_radius_topLeft,    OutlineRadiusTopLeft),
     COMPUTED_STYLE_MAP_ENTRY_LAYOUT(_moz_outline_radius_topRight,   OutlineRadiusTopRight),
     COMPUTED_STYLE_MAP_ENTRY(stack_sizing,                  StackSizing),
     COMPUTED_STYLE_MAP_ENTRY(_moz_tab_size,                 TabSize),
     COMPUTED_STYLE_MAP_ENTRY(text_align_last,               TextAlignLast),
--- a/layout/style/test/file_flexbox_align_self_auto.html
+++ b/layout/style/test/file_flexbox_align_self_auto.html
@@ -44,123 +44,123 @@
 // Use "is()" and "ok()" from parent document.
 var is = parent.is;
 var ok = parent.ok;
 
 /*
  * Utility function for getting computed style of "align-self":
  */
 function getComputedAlignSelf(elem) {
-  return window.getComputedStyle(elem, "").MozAlignSelf;
+  return window.getComputedStyle(elem, "").alignSelf;
 }
 
 /*
  * Tests that are useful regardless of whether we have a parent node:
  */
 function testGeneralNode(elem) {
   // Test initial computed style
   // (Initial value should be 'auto', which should compute to 'stretch')
   is(getComputedAlignSelf(elem), "stretch",
      "initial computed value of 'align-self' should be 'stretch', " +
      "if we haven't explicitly set any style on the parent");
 
   // Test value after setting align-self explicitly to "auto"
-  elem.style.MozAlignSelf = "auto";
+  elem.style.alignSelf = "auto";
   is(getComputedAlignSelf(elem), "stretch",
      "computed value of 'align-self: auto' should be 'stretch', " +
      "if we haven't explicitly set any style on the parent");
-  elem.style.MozAlignSelf = ""; // clean up
+  elem.style.alignSelf = ""; // clean up
 
   // Test value after setting align-self explicitly to "inherit"
-  elem.style.MozAlignSelf = "inherit";
+  elem.style.alignSelf = "inherit";
   is(getComputedAlignSelf(elem), "stretch",
      "computed value of 'align-self: inherit' should be 'stretch', " +
      "if we haven't explicitly set any style on the parent");
-  elem.style.MozAlignSelf = ""; // clean up
+  elem.style.alignSelf = ""; // clean up
 }
 
 /*
  * Tests that depend on us having a parent node:
  */
 function testNodeThatHasParent(elem) {
   // Sanity-check that we actually do have a styleable parent:
   ok(elem.parentNode && elem.parentNode.style,
      "bug in test -- expecting caller to pass us a node with a parent");
 
   // Test initial computed style when "align-items" has been set on our parent.
   // (elem's initial "align-self" value should be "auto", which should compute
   // to its parent's "align-items" value, which in this case is "center".)
-  elem.parentNode.style.MozAlignItems = "center";
+  elem.parentNode.style.alignItems = "center";
   is(getComputedAlignSelf(elem), "center",
      "initial computed value of 'align-self' should match parent's " +
      "specified 'align-items' value");
 
   // ...and now test computed style after setting "align-self" explicitly to
   // "auto" (with parent "align-items" still at "center")
-  elem.style.MozAlignSelf = "auto";
+  elem.style.alignSelf = "auto";
   is(getComputedAlignSelf(elem), "center",
      "computed value of 'align-self: auto' should match parent's " +
      "specified 'align-items' value");
 
-  elem.style.MozAlignSelf = ""; // clean up
-  elem.parentNode.style.MozAlignItems = ""; // clean up
+  elem.style.alignSelf = ""; // clean up
+  elem.parentNode.style.alignItems = ""; // clean up
 
   // Finally: test computed style after setting "align-self" to "inherit"
   // and leaving parent at its initial value (which should be "auto", which
   // should compute to "stretch")
-  elem.style.MozAlignSelf = "inherit";
+  elem.style.alignSelf = "inherit";
   is(getComputedAlignSelf(elem), "stretch",
      "computed value of 'align-self: inherit' should take parent's " +
      "computed 'align-self' value (which should be 'stretch', " +
      "if we haven't explicitly set any other style");
-  elem.style.MozAlignSelf = ""; // clean up
+  elem.style.alignSelf = ""; // clean up
  }
 
 /*
  * Tests that depend on us having a grandparent node:
  */
 function testNodeThatHasGrandparent(elem) {
   // Sanity-check that we actually do have a styleable grandparent:
   ok(elem.parentNode && elem.parentNode.parentNode &&
      elem.parentNode.parentNode.style,
      "bug in test -- should be getting a node with a grandparent");
 
   // Test computed "align-self" after we set "align-self" to "inherit" on our elem
   // and to "auto" on its parent, and "align-items" to "baseline" on its
   // grandparent. The parent's "auto" value should resolve to "baseline", and
   // that's what our elem should inherit.
 
-  elem.style.MozAlignSelf = "inherit";
-  elem.parentNode.style.MozAlignSelf = "auto";
-  elem.parentNode.parentNode.style.MozAlignItems = "baseline";
+  elem.style.alignSelf = "inherit";
+  elem.parentNode.style.alignSelf = "auto";
+  elem.parentNode.parentNode.style.alignItems = "baseline";
 
   is(getComputedAlignSelf(elem), "baseline",
      "computed value of 'align-self:inherit' on node when parent has " +
      "'align-self:auto' and grandparent has 'align-items:baseline'")
 
   // clean up:
-  elem.style.MozAlignSelf = "";
-  elem.parentNode.style.MozAlignSelf = "";
-  elem.parentNode.parentNode.style.MozAlignItems = "";
+  elem.style.alignSelf = "";
+  elem.parentNode.style.alignSelf = "";
+  elem.parentNode.parentNode.style.alignItems = "";
 
   // Test computed "align-self" after we set it to "auto" on our node, set
   // "align-items" to "inherit" on its parent, and "align-items" to "baseline"
   // on its grandparent. The parent's "inherit" should compute to "baseline",
   // and our elem's "auto" value should resolve to that.
-  elem.style.MozAlignSelf = "auto";
-  elem.parentNode.style.MozAlignItems = "inherit";
-  elem.parentNode.parentNode.style.MozAlignItems = "baseline";
+  elem.style.alignSelf = "auto";
+  elem.parentNode.style.alignItems = "inherit";
+  elem.parentNode.parentNode.style.alignItems = "baseline";
   is(getComputedAlignSelf(elem), "baseline",
      "computed value of 'align-self:auto on node when parent has " +
      "'align-items:inherit' and grandparent has 'align-items:baseline'")
 
   // clean up:
-  elem.style.MozAlignSelf = "";
-  elem.parentNode.style.MozAlignItems = "";
-  elem.parentNode.parentNode.style.MozAlignItems = "";
+  elem.style.alignSelf = "";
+  elem.parentNode.style.alignItems = "";
+  elem.parentNode.parentNode.style.alignItems = "";
 }
 
 /*
  * Main test function
  */
 function main() {
   ok(SpecialPowers.getBoolPref("layout.css.flexbox.enabled"),
      "expecting to be run with flexbox support enabled");
--- a/layout/style/test/file_flexbox_flex_grow_and_shrink.html
+++ b/layout/style/test/file_flexbox_flex_grow_and_shrink.html
@@ -1,54 +1,54 @@
 <!DOCTYPE HTML>
 <html>
 <head>
   <script type="application/javascript" src="animation_utils.js"></script>
   <style type="text/css">
 
-  /* Set -moz-flex-grow and -moz-flex-shrink to nonzero values,
+  /* Set flex-grow and flex-shrink to nonzero values,
      when no animations are applied. */
 
-  * { -moz-flex-grow: 10; -moz-flex-shrink: 20 }
+  * { flex-grow: 10; flex-shrink: 20 }
 
   /* These animations SHOULD affect computed style */
-  @-moz-keyframes flexGrowTwoToThree {
-     0%   { -moz-flex-grow: 2 }
-     100% { -moz-flex-grow: 3 }
+  @keyframes flexGrowTwoToThree {
+     0%   { flex-grow: 2 }
+     100% { flex-grow: 3 }
   }
-  @-moz-keyframes flexShrinkTwoToThree {
-     0%   { -moz-flex-shrink: 2 }
-     100% { -moz-flex-shrink: 3 }
+  @keyframes flexShrinkTwoToThree {
+     0%   { flex-shrink: 2 }
+     100% { flex-shrink: 3 }
   }
-  @-moz-keyframes flexGrowZeroToZero {
-     0%   { -moz-flex-grow: 0 }
-     100% { -moz-flex-grow: 0 }
+  @keyframes flexGrowZeroToZero {
+     0%   { flex-grow: 0 }
+     100% { flex-grow: 0 }
   }
-  @-moz-keyframes flexShrinkZeroToZero {
-     0%   { -moz-flex-shrink: 0 }
-     100% { -moz-flex-shrink: 0 }
+  @keyframes flexShrinkZeroToZero {
+     0%   { flex-shrink: 0 }
+     100% { flex-shrink: 0 }
   }
 
   /* These animations SHOULD NOT affect computed style. (flex-grow and
      flex-shrink are animatable "except between '0' and other values") */
-  @-moz-keyframes flexGrowZeroToOne {
-     0%   { -moz-flex-grow: 0 }
-     100% { -moz-flex-grow: 1 }
+  @keyframes flexGrowZeroToOne {
+     0%   { flex-grow: 0 }
+     100% { flex-grow: 1 }
   }
-  @-moz-keyframes flexShrinkZeroToOne {
-     0%   { -moz-flex-shrink: 0 }
-     100% { -moz-flex-shrink: 1 }
+  @keyframes flexShrinkZeroToOne {
+     0%   { flex-shrink: 0 }
+     100% { flex-shrink: 1 }
   }
-  @-moz-keyframes flexGrowOneToZero {
-     0%   { -moz-flex-grow: 1 }
-     100% { -moz-flex-grow: 0 }
+  @keyframes flexGrowOneToZero {
+     0%   { flex-grow: 1 }
+     100% { flex-grow: 0 }
   }
-  @-moz-keyframes flexShrinkOneToZero {
-     0%   { -moz-flex-shrink: 1 }
-     100% { -moz-flex-shrink: 0 }
+  @keyframes flexShrinkOneToZero {
+     0%   { flex-shrink: 1 }
+     100% { flex-shrink: 0 }
   }
 
   </style>
 </head>
 <body>
 <div id="display">
   <div id="myDiv"></div>
 </div>
@@ -95,88 +95,88 @@ function done_div() {
 }
 // take over the refresh driver
 advance_clock(0);
 
 // ANIMATIONS THAT SHOULD AFFECT COMPUTED STYLE
 // --------------------------------------------
 
 // flexGrowTwoToThree: 2.0 at 0%, 2.5 at 50%, 10 after animation is over
-new_div("-moz-animation: flexGrowTwoToThree linear 1s");
-is_approx(cs.MozFlexGrow, 2, 0.01, "flexGrowTwoToThree at 0.0s");
+new_div("animation: flexGrowTwoToThree linear 1s");
+is_approx(cs.flexGrow, 2, 0.01, "flexGrowTwoToThree at 0.0s");
 advance_clock(500);
-is_approx(cs.MozFlexGrow, 2.5, 0.01, "flexGrowTwoToThree at 0.5s");
+is_approx(cs.flexGrow, 2.5, 0.01, "flexGrowTwoToThree at 0.5s");
 advance_clock(1000);
-is(cs.MozFlexGrow, 10, "flexGrowTwoToThree at 1.5s");
+is(cs.flexGrow, 10, "flexGrowTwoToThree at 1.5s");
 done_div();
 
 // flexShrinkTwoToThree: 2.0 at 0%, 2.5 at 50%, 20 after animation is over
-new_div("-moz-animation: flexShrinkTwoToThree linear 1s");
-is_approx(cs.MozFlexShrink, 2, 0.01,  "flexShrinkTwoToThree at 0.0s");
+new_div("animation: flexShrinkTwoToThree linear 1s");
+is_approx(cs.flexShrink, 2, 0.01,  "flexShrinkTwoToThree at 0.0s");
 advance_clock(500);
-is_approx(cs.MozFlexShrink, 2.5, 0.01, "flexShrinkTwoToThree at 0.5s");
+is_approx(cs.flexShrink, 2.5, 0.01, "flexShrinkTwoToThree at 0.5s");
 advance_clock(1000);
-is(cs.MozFlexShrink, 20, "flexShrinkTwoToThree at 1.5s");
+is(cs.flexShrink, 20, "flexShrinkTwoToThree at 1.5s");
 done_div();
 
 // flexGrowZeroToZero: 0 at 0%, 0 at 50%, 10 after animation is over
-new_div("-moz-animation: flexGrowZeroToZero linear 1s");
-is(cs.MozFlexGrow, 0, "flexGrowZeroToZero at 0.0s");
+new_div("animation: flexGrowZeroToZero linear 1s");
+is(cs.flexGrow, 0, "flexGrowZeroToZero at 0.0s");
 advance_clock(500);
-is(cs.MozFlexGrow, 0, "flexGrowZeroToZero at 0.5s");
+is(cs.flexGrow, 0, "flexGrowZeroToZero at 0.5s");
 advance_clock(1000);
-is(cs.MozFlexGrow, 10, "flexGrowZeroToZero at 1.5s");
+is(cs.flexGrow, 10, "flexGrowZeroToZero at 1.5s");
 done_div();
 
 // flexShrinkZeroToZero: 0 at 0%, 0 at 50%, 20 after animation is over
-new_div("-moz-animation: flexShrinkZeroToZero linear 1s");
-is(cs.MozFlexShrink, 0, "flexShrinkZeroToZero at 0.0s");
+new_div("animation: flexShrinkZeroToZero linear 1s");
+is(cs.flexShrink, 0, "flexShrinkZeroToZero at 0.0s");
 advance_clock(500);
-is(cs.MozFlexShrink, 0, "flexShrinkZeroToZero at 0.5s");
+is(cs.flexShrink, 0, "flexShrinkZeroToZero at 0.5s");
 advance_clock(1000);
-is(cs.MozFlexShrink, 20, "flexShrinkZeroToZero at 1.5s");
+is(cs.flexShrink, 20, "flexShrinkZeroToZero at 1.5s");
 done_div();
 
 // ANIMATIONS THAT SHOULD NOT AFFECT COMPUTED STYLE
 // ------------------------------------------------
 
 // flexGrowZeroToOne: no effect on computed style. 10 all the way through.
-new_div("-moz-animation: flexGrowZeroToOne linear 1s");
-is(cs.MozFlexGrow, 10, "flexGrowZeroToOne at 0.0s");
+new_div("animation: flexGrowZeroToOne linear 1s");
+is(cs.flexGrow, 10, "flexGrowZeroToOne at 0.0s");
 advance_clock(500);
-is(cs.MozFlexGrow, 10, "flexGrowZeroToOne at 0.5s");
+is(cs.flexGrow, 10, "flexGrowZeroToOne at 0.5s");
 advance_clock(1000);
-is(cs.MozFlexGrow, 10, "flexGrowZeroToOne at 1.5s");
+is(cs.flexGrow, 10, "flexGrowZeroToOne at 1.5s");
 done_div();
 
 // flexShrinkZeroToOne: no effect on computed style. 20 all the way through.
-new_div("-moz-animation: flexShrinkZeroToOne linear 1s");
-is(cs.MozFlexShrink, 20,  "flexShrinkZeroToOne at 0.0s");
+new_div("animation: flexShrinkZeroToOne linear 1s");
+is(cs.flexShrink, 20,  "flexShrinkZeroToOne at 0.0s");
 advance_clock(500);
-is(cs.MozFlexShrink, 20, "flexShrinkZeroToOne at 0.5s");
+is(cs.flexShrink, 20, "flexShrinkZeroToOne at 0.5s");
 advance_clock(1000);
-is(cs.MozFlexShrink, 20, "flexShrinkZeroToOne at 1.5s");
+is(cs.flexShrink, 20, "flexShrinkZeroToOne at 1.5s");
 done_div();
 
 // flexGrowOneToZero: no effect on computed style. 10 all the way through.
-new_div("-moz-animation: flexGrowOneToZero linear 1s");
-is(cs.MozFlexGrow, 10, "flexGrowOneToZero at 0.0s");
+new_div("animation: flexGrowOneToZero linear 1s");
+is(cs.flexGrow, 10, "flexGrowOneToZero at 0.0s");
 advance_clock(500);
-is(cs.MozFlexGrow, 10, "flexGrowOneToZero at 0.5s");
+is(cs.flexGrow, 10, "flexGrowOneToZero at 0.5s");
 advance_clock(1000);
-is(cs.MozFlexGrow, 10, "flexGrowOneToZero at 1.5s");
+is(cs.flexGrow, 10, "flexGrowOneToZero at 1.5s");
 done_div();
 
 // flexShrinkOneToZero: no effect on computed style. 20 all the way through.
-new_div("-moz-animation: flexShrinkOneToZero linear 1s");
-is(cs.MozFlexShrink, 20,  "flexShrinkOneToZero at 0.0s");
+new_div("animation: flexShrinkOneToZero linear 1s");
+is(cs.flexShrink, 20,  "flexShrinkOneToZero at 0.0s");
 advance_clock(500);
-is(cs.MozFlexShrink, 20, "flexShrinkOneToZero at 0.5s");
+is(cs.flexShrink, 20, "flexShrinkOneToZero at 0.5s");
 advance_clock(1000);
-is(cs.MozFlexShrink, 20, "flexShrinkOneToZero at 1.5s");
+is(cs.flexShrink, 20, "flexShrinkOneToZero at 1.5s");
 done_div();
 
 SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
 
 parent.finish();
 
 </script>
 </pre>
--- a/layout/style/test/file_flexbox_flex_shorthand.html
+++ b/layout/style/test/file_flexbox_flex_shorthand.html
@@ -6,225 +6,225 @@
 <body>
 <div id="content">
 </div>
 <pre id="test">
 <script type="application/javascript;version=1.7">
 "use strict";
 
 /** Test for Bug 696253 **/
-/* (Testing the [-moz-]flex CSS shorthand property) */
+/* (Testing the 'flex' CSS shorthand property) */
 
 // Use "is()" and "ok()" from parent document.
 var is = parent.is;
 var ok = parent.ok;
 
-const gFlexPropName = "-moz-flex";
+const gFlexPropName = "flex";
 const gFlexPropInfo = gCSSProperties[gFlexPropName];
 
 // Default values for shorthand subproperties, when they're not specified
 // explicitly in a testcase.  This lets the testcases be more concise.
 //
 // The values here are from the flexbox spec on the 'flex' shorthand:
 //   "When omitted, [flex-grow and flex-shrink] are set to '1'.
 //   "If omitted, the flex basis defaults to 0%"
 let gFlexShorthandDefaults = {
-    "-moz-flex-grow":   "1",
-    "-moz-flex-shrink": "1",
-    "-moz-flex-basis":  "0%"
+    "flex-grow":   "1",
+    "flex-shrink": "1",
+    "flex-basis":  "0%"
 };
 
 let gFlexShorthandTestcases = [
 /*
   {
-    "-moz-flex":        "SPECIFIED value for flex shorthand",
+    "flex":        "SPECIFIED value for flex shorthand",
 
     // Expected Computed Values of Subproperties
     // Semi-optional -- if unspecified, the expected value is taken
     // from gFlexShorthandDefaults.
-    "-moz-flex-grow":   "EXPECTED computed value for flex-grow property",
-    "-moz-flex-shrink": "EXPECTED computed value for flex-shrink property",
-    "-moz-flex-basis":  "EXPECTED computed value for flex-basis property",
+    "flex-grow":   "EXPECTED computed value for flex-grow property",
+    "flex-shrink": "EXPECTED computed value for flex-shrink property",
+    "flex-basis":  "EXPECTED computed value for flex-basis property",
   }, 
 */
 
   // Initial values of subproperties:
   // --------------------------------
   // (checked by another test that uses property_database.js, too, but
   // might as well check here, too, for thoroughness).
   {
-    "-moz-flex":        "",
-    "-moz-flex-grow":   "0",
-    "-moz-flex-shrink": "1",
-    "-moz-flex-basis":  "auto",
+    "flex":        "",
+    "flex-grow":   "0",
+    "flex-shrink": "1",
+    "flex-basis":  "auto",
   },
   {
-    "-moz-flex":        "-moz-initial",
-    "-moz-flex-grow":   "0",
-    "-moz-flex-shrink": "1",
-    "-moz-flex-basis":  "auto",
+    "flex":        "initial",
+    "flex-grow":   "0",
+    "flex-shrink": "1",
+    "flex-basis":  "auto",
   },
 
   // Special keyword "none" --> "0 0 auto"
   // -------------------------------------
   {
-    "-moz-flex":        "none",
-    "-moz-flex-grow":   "0",
-    "-moz-flex-shrink": "0",
-    "-moz-flex-basis":  "auto",
+    "flex":        "none",
+    "flex-grow":   "0",
+    "flex-shrink": "0",
+    "flex-basis":  "auto",
   },
 
   // One Value (numeric) --> sets flex-grow
   // --------------------------------------
   {
-    "-moz-flex":        "0",
-    "-moz-flex-grow":   "0",
+    "flex":        "0",
+    "flex-grow":   "0",
   },
   {
-    "-moz-flex":        "5",
-    "-moz-flex-grow":   "5",
+    "flex":        "5",
+    "flex-grow":   "5",
   },
   {
-    "-moz-flex":        "1000",
-    "-moz-flex-grow":   "1000",
+    "flex":        "1000",
+    "flex-grow":   "1000",
   },
   {
-    "-moz-flex":        "0.0000001",
-    "-moz-flex-grow":   "1e-7"
+    "flex":        "0.0000001",
+    "flex-grow":   "1e-7"
   },
   {
-    "-moz-flex":        "20000000",
-    "-moz-flex-grow":   "2e+7"
+    "flex":        "20000000",
+    "flex-grow":   "2e+7"
   },
 
   // One Value (length or other nonnumeric) --> sets flex-basis
   // ----------------------------------------------------------
   {
-    "-moz-flex":        "0px",
-    "-moz-flex-basis":  "0px",
+    "flex":        "0px",
+    "flex-basis":  "0px",
   },
   {
-    "-moz-flex":        "0%",
-    "-moz-flex-basis":  "0%",
+    "flex":        "0%",
+    "flex-basis":  "0%",
   },
   {
-    "-moz-flex":        "25px",
-    "-moz-flex-basis":  "25px",
+    "flex":        "25px",
+    "flex-basis":  "25px",
   },
   {
-    "-moz-flex":        "5%",
-    "-moz-flex-basis":  "5%",
+    "flex":        "5%",
+    "flex-basis":  "5%",
   },
   {
-    "-moz-flex":        "auto",
-    "-moz-flex-basis":  "auto",
+    "flex":        "auto",
+    "flex-basis":  "auto",
   },
   {
-    "-moz-flex":        "-moz-fit-content",
-    "-moz-flex-basis":  "-moz-fit-content",
+    "flex":        "-moz-fit-content",
+    "flex-basis":  "-moz-fit-content",
   },
   {
-    "-moz-flex":        "calc(5px + 6px)",
-    "-moz-flex-basis":  "11px",
+    "flex":        "calc(5px + 6px)",
+    "flex-basis":  "11px",
   },
   {
-    "-moz-flex":        "calc(15% + 30px)",
-    "-moz-flex-basis":  "calc(30px + 15%)",
+    "flex":        "calc(15% + 30px)",
+    "flex-basis":  "calc(30px + 15%)",
   },
 
   // Two Values (numeric) --> sets flex-grow, flex-shrink
   // ----------------------------------------------------
   {
-    "-moz-flex":        "0 0",
-    "-moz-flex-grow":   "0",
-    "-moz-flex-shrink": "0",
+    "flex":        "0 0",
+    "flex-grow":   "0",
+    "flex-shrink": "0",
   },
   {
-    "-moz-flex":        "0 2",
-    "-moz-flex-grow":   "0",
-    "-moz-flex-shrink": "2",
+    "flex":        "0 2",
+    "flex-grow":   "0",
+    "flex-shrink": "2",
   },
   {
-    "-moz-flex":        "3 0",
-    "-moz-flex-grow":   "3",
-    "-moz-flex-shrink": "0",
+    "flex":        "3 0",
+    "flex-grow":   "3",
+    "flex-shrink": "0",
   },
   {
-    "-moz-flex":        "0.5000 2.03",
-    "-moz-flex-grow":   "0.5",
-    "-moz-flex-shrink": "2.03",
+    "flex":        "0.5000 2.03",
+    "flex-grow":   "0.5",
+    "flex-shrink": "2.03",
   },
   {
-    "-moz-flex":        "300.0 500.0",
-    "-moz-flex-grow":   "300",
-    "-moz-flex-shrink": "500",
+    "flex":        "300.0 500.0",
+    "flex-grow":   "300",
+    "flex-shrink": "500",
   },
 
   // Two Values (numeric & length-ish) --> sets flex-grow, flex-basis
   // ----------------------------------------------------------------
   {
-    "-moz-flex":        "0 0px",
-    "-moz-flex-grow":   "0",
-    "-moz-flex-basis":  "0px",
+    "flex":        "0 0px",
+    "flex-grow":   "0",
+    "flex-basis":  "0px",
   },
   {
-    "-moz-flex":        "0 0%",
-    "-moz-flex-grow":   "0",
-    "-moz-flex-basis":  "0%",
+    "flex":        "0 0%",
+    "flex-grow":   "0",
+    "flex-basis":  "0%",
   },
   {
-    "-moz-flex":        "10 30px",
-    "-moz-flex-grow":   "10",
-    "-moz-flex-basis":  "30px",
+    "flex":        "10 30px",
+    "flex-grow":   "10",
+    "flex-basis":  "30px",
   },
   {
-    "-moz-flex":        "99px 2.3",
-    "-moz-flex-grow":   "2.3",
-    "-moz-flex-basis":  "99px",
+    "flex":        "99px 2.3",
+    "flex-grow":   "2.3",
+    "flex-basis":  "99px",
   },
   {
-    "-moz-flex":        "99% 6",
-    "-moz-flex-grow":   "6",
-    "-moz-flex-basis":  "99%",
+    "flex":        "99% 6",
+    "flex-grow":   "6",
+    "flex-basis":  "99%",
   },
   {
-    "-moz-flex":        "auto 5",
-    "-moz-flex-grow":   "5",
-    "-moz-flex-basis":  "auto",
+    "flex":        "auto 5",
+    "flex-grow":   "5",
+    "flex-basis":  "auto",
   },
   {
-    "-moz-flex":        "5 -moz-fit-content",
-    "-moz-flex-grow":   "5",
-    "-moz-flex-basis":  "-moz-fit-content",
+    "flex":        "5 -moz-fit-content",
+    "flex-grow":   "5",
+    "flex-basis":  "-moz-fit-content",
   },
   {
-    "-moz-flex":        "calc(5% + 10px) 3",
-    "-moz-flex-grow":   "3",
-    "-moz-flex-basis":  "calc(10px + 5%)",
+    "flex":        "calc(5% + 10px) 3",
+    "flex-grow":   "3",
+    "flex-basis":  "calc(10px + 5%)",
   },
 
   // Three Values --> Sets all three subproperties
   // ---------------------------------------------
   {
-    "-moz-flex":        "0.0 0.00 0px",
-    "-moz-flex-grow":   "0",
-    "-moz-flex-shrink": "0",
-    "-moz-flex-basis":  "0px",
+    "flex":        "0.0 0.00 0px",
+    "flex-grow":   "0",
+    "flex-shrink": "0",
+    "flex-basis":  "0px",
   },
   {
-    "-moz-flex":        "0% 0 0",
-    "-moz-flex-grow":   "0",
-    "-moz-flex-shrink": "0",
-    "-moz-flex-basis":  "0%",
+    "flex":        "0% 0 0",
+    "flex-grow":   "0",
+    "flex-shrink": "0",
+    "flex-basis":  "0%",
   },
   {
-    "-moz-flex":        "10px 3 2",
-    "-moz-flex-grow":   "3",
-    "-moz-flex-shrink": "2",
-    "-moz-flex-basis":  "10px",
+    "flex":        "10px 3 2",
+    "flex-grow":   "3",
+    "flex-shrink": "2",
+    "flex-basis":  "10px",
   },
 ];
 
 function runFlexShorthandTest(aFlexShorthandTestcase)
 {
   let content = document.getElementById("content");
 
   let elem = document.createElement("div");
--- a/layout/style/test/file_flexbox_layout.html
+++ b/layout/style/test/file_flexbox_layout.html
@@ -49,19 +49,21 @@ function setPossiblyAliasedProperty(aEle
 // The main test function.
 // aFlexboxTestcase is an entry from the list in flexbox_layout_testcases.js
 function testFlexboxTestcase(aFlexboxTestcase, aFlexDirection, aPropertyMapping)
 {
   let content = document.getElementById("content");
 
   // Create flex container
   let flexContainer = document.createElement("div");
-  flexContainer.style.display = "-moz-flex";
-  flexContainer.style.MozFlexDirection = aFlexDirection;
-  setPossiblyAliasedProperty(flexContainer, "_main-size", gDefaultFlexContainerSize, aPropertyMapping);
+  flexContainer.style.display = "flex";
+  flexContainer.style.flexDirection = aFlexDirection;
+  setPossiblyAliasedProperty(flexContainer, "_main-size",
+                             gDefaultFlexContainerSize,
+                             aPropertyMapping);
 
   // Apply testcase's customizations for flex container (if any).
   if (aFlexboxTestcase.container_properties) {
     for (let propName in aFlexboxTestcase.container_properties) {
       let propValue = aFlexboxTestcase.container_properties[propName];
       setPossiblyAliasedProperty(flexContainer, propName, propValue,
                                  aPropertyMapping);
     }
--- a/layout/style/test/file_flexbox_order.html
+++ b/layout/style/test/file_flexbox_order.html
@@ -25,17 +25,17 @@
       height: 30px;
     }
     div#c, refC {
       background: blue;
       width: 50px;
       height: 30px;
     }
     div#flexContainer {
-      display: -moz-flex;
+      display: flex;
       width: 100px;
       height: 30px;
     }
     div#flexContainerParent {
       display: none;
     }
   </style>
 </head>
@@ -140,28 +140,28 @@ function complainIfSnapshotsDiffer(aSnap
   }
 }
 
 function runOrderTestcase(aOrderTestcase) {
   // Sanity-check
   ok(Array.isArray(aOrderTestcase), "expecting testcase to be an array");
   is(aOrderTestcase.length, 4, "expecting testcase to have 4 elements");
 
-  document.getElementById("a").style.MozOrder = aOrderTestcase[0];
-  document.getElementById("b").style.MozOrder = aOrderTestcase[1];
-  document.getElementById("c").style.MozOrder = aOrderTestcase[2];
+  document.getElementById("a").style.order = aOrderTestcase[0];
+  document.getElementById("b").style.order = aOrderTestcase[1];
+  document.getElementById("c").style.order = aOrderTestcase[2];
 
   var snapshot = snapshotWindow(window, false);
   complainIfSnapshotsDiffer(snapshot, gRefSnapshots[aOrderTestcase[3]],
                             aOrderTestcase);
 
   // Clean up
-  document.getElementById("a").style.MozOrder = "";
-  document.getElementById("b").style.MozOrder = "";
-  document.getElementById("c").style.MozOrder = "";
+  document.getElementById("a").style.order = "";
+  document.getElementById("b").style.order = "";
+  document.getElementById("c").style.order = "";
 }
 
 // Main Function
 function main() {
   initRefSnapshots();
 
   // un-hide the flex container's parent
   var flexContainerParent = document.getElementById("flexContainerParent");
--- a/layout/style/test/file_flexbox_order_table.html
+++ b/layout/style/test/file_flexbox_order_table.html
@@ -29,17 +29,17 @@
       height: 30px;
     }
     div#c, refC {
       background: blue;
       width: 50px;
       height: 30px;
     }
     div#flexContainer {
-      display: -moz-flex;
+      display: flex;
       width: 100px;
       height: 30px;
     }
     div#flexContainerParent {
       display: none;
     }
   </style>
 </head>
@@ -144,28 +144,28 @@ function complainIfSnapshotsDiffer(aSnap
   }
 }
 
 function runOrderTestcase(aOrderTestcase) {
   // Sanity-check
   ok(Array.isArray(aOrderTestcase), "expecting testcase to be an array");
   is(aOrderTestcase.length, 4, "expecting testcase to have 4 elements");
 
-  document.getElementById("a").style.MozOrder = aOrderTestcase[0];
-  document.getElementById("b").style.MozOrder = aOrderTestcase[1];
-  document.getElementById("c").style.MozOrder = aOrderTestcase[2];
+  document.getElementById("a").style.order = aOrderTestcase[0];
+  document.getElementById("b").style.order = aOrderTestcase[1];
+  document.getElementById("c").style.order = aOrderTestcase[2];
 
   var snapshot = snapshotWindow(window, false);
   complainIfSnapshotsDiffer(snapshot, gRefSnapshots[aOrderTestcase[3]],
                             aOrderTestcase);
 
   // Clean up
-  document.getElementById("a").style.MozOrder = "";
-  document.getElementById("b").style.MozOrder = "";
-  document.getElementById("c").style.MozOrder = "";
+  document.getElementById("a").style.order = "";
+  document.getElementById("b").style.order = "";
+  document.getElementById("c").style.order = "";
 }
 
 // Main Function
 function main() {
   initRefSnapshots();
 
   // un-hide the flex container's parent
   var flexContainerParent = document.getElementById("flexContainerParent");
--- a/layout/style/test/flexbox_layout_testcases.js
+++ b/layout/style/test/flexbox_layout_testcases.js
@@ -97,210 +97,210 @@ var gColumnReversePropertyMapping =
 
 // The list of actual testcase definitions:
 var gFlexboxTestcases =
 [
  // No flex properties specified --> should just use 'width' for sizing
  {
    items:
      [
-       { "_main-size":       [ "40px", "40px" ] },
-       { "_main-size":       [ "65px", "65px" ] },
+       { "_main-size": [ "40px", "40px" ] },
+       { "_main-size": [ "65px", "65px" ] },
      ]
  },
  // flex-basis is specified:
  {
    items:
      [
-       { "-moz-flex-basis": "50px",
-         "_main-size":       [ null,  "50px" ]
+       { "flex-basis": "50px",
+         "_main-size": [ null,  "50px" ]
        },
        {
-         "-moz-flex-basis": "20px",
-         "_main-size":       [ null, "20px" ]
+         "flex-basis": "20px",
+         "_main-size": [ null, "20px" ]
        },
      ]
  },
  // flex-basis is *large* -- sum of flex-basis values is > flex container size:
  // (w/ 0 flex-shrink so we don't shrink):
  {
    items:
      [
        {
-         "-moz-flex": "0 0 150px",
-         "_main-size":       [ null, "150px" ]
+         "flex": "0 0 150px",
+         "_main-size": [ null, "150px" ]
        },
        {
-         "-moz-flex": "0 0 90px",
-         "_main-size":       [ null, "90px" ]
+         "flex": "0 0 90px",
+         "_main-size": [ null, "90px" ]
        },
      ]
  },
  // flex-basis is *large* -- each flex-basis value is > flex container size:
  // (w/ 0 flex-shrink so we don't shrink):
  {
    items:
      [
        {
-         "-moz-flex": "0 0 250px",
-         "_main-size":       [ null, "250px" ]
+         "flex": "0 0 250px",
+         "_main-size": [ null, "250px" ]
        },
        {
-         "-moz-flex": "0 0 400px",
-         "_main-size":       [ null, "400px" ]
+         "flex": "0 0 400px",
+         "_main-size": [ null, "400px" ]
        },
      ]
  },
  // flex-basis has percentage value:
  {
    items:
      [
        {
-         "-moz-flex-basis": "30%",
-         "_main-size":       [ null, "60px" ]
+         "flex-basis": "30%",
+         "_main-size": [ null, "60px" ]
        },
        {
-         "-moz-flex-basis": "45%",
-         "_main-size":       [ null, "90px" ]
+         "flex-basis": "45%",
+         "_main-size": [ null, "90px" ]
        },
      ]
  },
  // flex-basis has calc(percentage) value:
  {
    items:
      [
        {
-         "-moz-flex-basis": "-moz-calc(20%)",
-         "_main-size":       [ null, "40px" ]
+         "flex-basis": "calc(20%)",
+         "_main-size": [ null, "40px" ]
        },
        {
-         "-moz-flex-basis": "-moz-calc(80%)",
-         "_main-size":       [ null, "160px" ]
+         "flex-basis": "calc(80%)",
+         "_main-size": [ null, "160px" ]
        },
      ]
  },
  // flex-basis has calc(percentage +/- length) value:
  {
    items:
      [
        {
-         "-moz-flex-basis": "-moz-calc(10px + 20%)",
-         "_main-size":       [ null, "50px" ]
+         "flex-basis": "calc(10px + 20%)",
+         "_main-size": [ null, "50px" ]
        },
        {
-         "-moz-flex-basis": "-moz-calc(60% - 1px)",
-         "_main-size":       [ null, "119px" ]
+         "flex-basis": "calc(60% - 1px)",
+         "_main-size": [ null, "119px" ]
        },
      ]
  },
  // flex-grow is specified:
  {
    items:
      [
        {
-         "-moz-flex": "1",
-         "_main-size":       [ null,  "60px" ]
+         "flex": "1",
+         "_main-size": [ null,  "60px" ]
        },
        {
-         "-moz-flex": "2",
-         "_main-size":       [ null, "120px" ]
+         "flex": "2",
+         "_main-size": [ null, "120px" ]
        },
        {
-         "-moz-flex": "0 20px",
-         "_main-size":       [ null, "20px" ]
+         "flex": "0 20px",
+         "_main-size": [ null, "20px" ]
        }
      ]
  },
  // Same ratio as prev. testcase; making sure we handle float inaccuracy
  {
    items:
      [
        {
-         "-moz-flex": "100000",
+         "flex": "100000",
          "_main-size": [ null,  "60px" ]
        },
        {
-         "-moz-flex": "200000",
+         "flex": "200000",
          "_main-size": [ null, "120px" ]
        },
        {
-         "-moz-flex": "0.000001 20px",
+         "flex": "0.000001 20px",
          "_main-size": [ null,  "20px" ]
        }
      ]
  },
  // Same ratio as prev. testcase, but with items cycled and w/
  // "flex: none" & explicit size instead of "flex: 0 20px"
  {
    items:
      [
        {
-         "-moz-flex": "none",
+         "flex": "none",
          "_main-size": [ "20px", "20px" ]
        },
        {
-         "-moz-flex": "1",
+         "flex": "1",
          "_main-size": [ null,   "60px" ]
        },
        {
-         "-moz-flex": "2",
+         "flex": "2",
          "_main-size": [ null,  "120px" ]
        }
      ]
  },
 
  // ...and now with flex-grow:[huge] to be sure we handle infinite float values
  // gracefully.
  {
    items:
      [
        {
-         "-moz-flex": "9999999999999999999999999999999999999999999999999999999",
+         "flex": "9999999999999999999999999999999999999999999999999999999",
          "_main-size": [ null,  "200px" ]
        },
      ]
  },
  {
    items:
      [
        {
-         "-moz-flex": "9999999999999999999999999999999999999999999999999999999",
+         "flex": "9999999999999999999999999999999999999999999999999999999",
          "_main-size": [ null,  "50px" ]
        },
        {
-         "-moz-flex": "9999999999999999999999999999999999999999999999999999999",
+         "flex": "9999999999999999999999999999999999999999999999999999999",
          "_main-size": [ null,  "50px" ]
        },
        {
-         "-moz-flex": "9999999999999999999999999999999999999999999999999999999",
+         "flex": "9999999999999999999999999999999999999999999999999999999",
          "_main-size": [ null,  "50px" ]
        },
        {
-         "-moz-flex": "9999999999999999999999999999999999999999999999999999999",
+         "flex": "9999999999999999999999999999999999999999999999999999999",
          "_main-size": [ null,  "50px" ]
        },
      ]
  },
  {
    items:
      [
        {
-         "-moz-flex": "99999999999999999999999999999999999",
+         "flex": "99999999999999999999999999999999999",
          "_main-size": [ null,  "50px" ]
        },
        {
-         "-moz-flex": "99999999999999999999999999999999999",
+         "flex": "99999999999999999999999999999999999",
          "_main-size": [ null,  "50px" ]
        },
        {
-         "-moz-flex": "99999999999999999999999999999999999",
+         "flex": "99999999999999999999999999999999999",
          "_main-size": [ null,  "50px" ]
        },
        {
-         "-moz-flex": "99999999999999999999999999999999999",
+         "flex": "99999999999999999999999999999999999",
          "_main-size": [ null,  "50px" ]
        },
      ]
  },
 
  // And now, some testcases to check that we handle float accumulation error
  // gracefully.
 
@@ -310,35 +310,35 @@ var gFlexboxTestcases =
  {
    container_properties:
    {
      "_main-size": "9000000px"
    },
    items:
      [
        {
-         "-moz-flex": "1",
+         "flex": "1",
          "_main-size": [ null,  "9000000px" ]
        },
      ]
  },
  // ...and now with two flex items dividing up that container's huge size:
  {
    container_properties:
    {
      "_main-size": "9000000px"
    },
    items:
      [
        {
-         "-moz-flex": "2",
+         "flex": "2",
          "_main-size": [ null,  "6000000px" ]
        },
        {
-         "-moz-flex": "1",
+         "flex": "1",
          "_main-size": [ null,  "3000000px" ]
        },
      ]
  },
 
  // OK, now to actually test accumulation error. Below, we have six flex items
  // splitting up the container's size, with huge differences between flex
  // weights.  For simplicity, I've set up the weights so that they sum exactly
@@ -355,182 +355,182 @@ var gFlexboxTestcases =
  {
    container_properties:
    {
      "_main-size": "9000000px"
    },
    items:
      [
        {
-         "-moz-flex": "3000000",
+         "flex": "3000000",
          "_main-size": [ null,  "3000000px" ]
        },
        {
-         "-moz-flex": "1",
+         "flex": "1",
          "_main-size": [ null,  "1px" ]
        },
        {
-         "-moz-flex": "1",
+         "flex": "1",
          "_main-size": [ null,  "1px" ]
        },
        {
-         "-moz-flex": "2999999",
+         "flex": "2999999",
          // NOTE: Expected value is off slightly, from float error when
          // resolving flexible lengths & when generating computed value string:
          "_main-size": [ null,  "3000000px" ]
        },
        {
-         "-moz-flex": "2999998",
+         "flex": "2999998",
          // NOTE: Expected value is off slightly, from float error when
          // resolving flexible lengths & when generating computed value string:
          "_main-size": [ null,  "3000000px" ]
        },
        {
-         "-moz-flex": "1",
+         "flex": "1",
          "_main-size": [ null,  "1px" ]
        },
      ]
  },
  // Same flex items as previous testcase, but now reordered such that the items
  // with tiny flex weights are all listed last:
  {
    container_properties:
    {
      "_main-size": "9000000px"
    },
    items:
      [
        {
-         "-moz-flex": "3000000",
+         "flex": "3000000",
          "_main-size": [ null,  "3000000px" ]
        },
        {
-         "-moz-flex": "2999999",
+         "flex": "2999999",
          // NOTE: Expected value is off slightly, from float error when
          // resolving flexible lengths & when generating computed value string:
          "_main-size": [ null,  "3000000px" ]
        },
        {
-         "-moz-flex": "2999998",
+         "flex": "2999998",
          // NOTE: Expected value is off slightly, from float error when
          // resolving flexible lengths & when generating computed value string:
          "_main-size": [ null,  "3000000px" ]
        },
        {
-         "-moz-flex": "1",
+         "flex": "1",
          "_main-size": [ null,  "1px" ]
        },
        {
-         "-moz-flex": "1",
+         "flex": "1",
          "_main-size": [ null,  "1px" ]
        },
        {
-         "-moz-flex": "1",
+         "flex": "1",
          "_main-size": [ null,  "1px" ]
        },
      ]
  },
  // Same flex items as previous testcase, but now reordered such that the items
  // with tiny flex weights are all listed first:
  {
    container_properties:
    {
      "_main-size": "9000000px"
    },
    items:
      [
        {
-         "-moz-flex": "1",
+         "flex": "1",
          // NOTE: Expected value is off slightly, from float error when
          // resolving flexible lengths:
          "_main-size": [ null,  "0.966667px" ]
        },
        {
-         "-moz-flex": "1",
+         "flex": "1",
          // NOTE: Expected value is off slightly, from float error when
          // resolving flexible lengths:
          "_main-size": [ null,  "0.983333px" ]
        },
        {
-         "-moz-flex": "1",
+         "flex": "1",
          // NOTE: Expected value is off slightly, from float error when
          // resolving flexible lengths:
          "_main-size": [ null,  "0.983333px" ]
        },
        {
-         "-moz-flex": "3000000",
+         "flex": "3000000",
          "_main-size": [ null,  "3000000px" ]
        },
        {
-         "-moz-flex": "2999999",
+         "flex": "2999999",
          // NOTE: Expected value is off slightly, from float error when
          // resolving flexible lengths & when generating computed value string:
          "_main-size": [ null,  "3000000px" ]
        },
        {
-         "-moz-flex": "2999998",
+         "flex": "2999998",
          // NOTE: Expected value is off slightly, from float error when
          // resolving flexible lengths & when generating computed value string:
          "_main-size": [ null,  "3000000px" ]
        },
      ]
  },
 
  // Trying "flex: auto" (== "1 1 auto") w/ a mix of flex-grow/flex-basis values
  {
    items:
      [
        {
-         "-moz-flex": "auto",
+         "flex": "auto",
          "_main-size": [ null, "45px" ]
        },
        {
-         "-moz-flex": "2",
+         "flex": "2",
          "_main-size": [ null, "90px" ]
        },
        {
-         "-moz-flex": "20px 1 0",
+         "flex": "20px 1 0",
          "_main-size": [ null, "65px" ]
        }
      ]
  },
  // Same as previous, but with items cycled & different syntax
  {
    items:
      [
        {
-         "-moz-flex": "20px",
+         "flex": "20px",
          "_main-size": [ null, "65px" ]
        },
        {
-         "-moz-flex": "1",
+         "flex": "1",
          "_main-size": [ null, "45px" ]
        },
        {
-         "-moz-flex": "2",
+         "flex": "2",
          "_main-size": [ null, "90px" ]
        }
      ]
  },
  {
    items:
      [
        {
-         "-moz-flex": "2",
+         "flex": "2",
          "_main-size": [ null,  "100px" ],
          "border": "0px dashed",
-         "_border-main-start-width":  [ "5px",  "5px" ],
+         "_border-main-start-width": [ "5px",  "5px" ],
          "_border-main-end-width": [ "15px", "15px" ],
          "_margin-main-start": [ "22px", "22px" ],
          "_margin-main-end": [ "8px", "8px" ]
        },
        {
-         "-moz-flex": "1",
+         "flex": "1",
          "_main-size": [ null,  "50px" ],
-         "_margin-main-start":   [ "auto", "0px" ],
+         "_margin-main-start": [ "auto", "0px" ],
          "_padding-main-end": [ "auto", "0px" ],
        }
      ]
  },
  // Test negative flexibility:
 
  // Basic testcase: just 1 item (relying on initial "flex-shrink: 1") --
  // should shrink to container size.
@@ -540,17 +540,17 @@ var gFlexboxTestcases =
        { "_main-size": [ "400px",  "200px" ] },
      ],
  },
  // ...and now with a "flex" specification and a different flex-shrink value:
  {
    items:
      [
        {
-         "-moz-flex": "4 2 250px",
+         "flex": "4 2 250px",
          "_main-size": [ null,  "200px" ]
        },
      ],
  },
  // ...and now with multiple items, which all shrink proportionally (by 50%)
  // to fit to the container, since they have the same (initial) flex-shrink val
  {
    items:
@@ -563,196 +563,196 @@ var gFlexboxTestcases =
  },
  // ...and now with positive flexibility specified. (should have no effect, so
  // everything still shrinks by the same proportion, since the flex-shrink
  // values are all the same).
  {
    items:
      [
        {
-         "-moz-flex": "4 3 100px",
+         "flex": "4 3 100px",
          "_main-size": [ null,  "80px" ]
        },
        {
-         "-moz-flex": "5 3 50px",
+         "flex": "5 3 50px",
          "_main-size": [ null,  "40px" ]
        },
        {
-         "-moz-flex": "0 3 100px",
+         "flex": "0 3 100px",
          "_main-size": [ null, "80px" ]
        }
      ]
  },
  // ...and now with *different* flex-shrink values:
  {
    items:
      [
        {
-         "-moz-flex": "4 2 50px",
+         "flex": "4 2 50px",
          "_main-size": [ null,  "30px" ]
        },
        {
-         "-moz-flex": "5 3 50px",
+         "flex": "5 3 50px",
          "_main-size": [ null,  "20px" ]
        },
        {
-         "-moz-flex": "0 0 150px",
+         "flex": "0 0 150px",
          "_main-size": [ null, "150px" ]
        }
      ]
  },
  // Same ratio as prev. testcase; making sure we handle float inaccuracy
  {
    items:
      [
        {
-         "-moz-flex": "4 20000000 50px",
+         "flex": "4 20000000 50px",
          "_main-size": [ null,  "30px" ]
        },
        {
-         "-moz-flex": "5 30000000 50px",
+         "flex": "5 30000000 50px",
          "_main-size": [ null,  "20px" ]
        },
        {
-         "-moz-flex": "0 0.0000001 150px",
+         "flex": "0 0.0000001 150px",
          "_main-size": [ null, "150px" ]
        }
      ]
  },
  // Another "different flex-shrink values" testcase:
  {
    items:
      [
        {
-         "-moz-flex": "4 2 115px",
+         "flex": "4 2 115px",
          "_main-size": [ null,  "69px" ]
        },
        {
-         "-moz-flex": "5 1 150px",
+         "flex": "5 1 150px",
          "_main-size": [ null,  "120px" ]
        },
        {
-         "-moz-flex": "1 4 30px",
+         "flex": "1 4 30px",
          "_main-size": [ null,  "6px" ]
        },
        {
-         "-moz-flex": "1 0 5px",
+         "flex": "1 0 5px",
          "_main-size": [ null, "5px" ]
        },
      ]
  },
 
  // ...and now with min-size (clamping the effects of flex-shrink on one item):
  {
    items:
      [
        {
-         "-moz-flex": "4 5 75px",
+         "flex": "4 5 75px",
          "_min-main-size": "50px",
          "_main-size": [ null,  "50px" ],
        },
        {
-         "-moz-flex": "5 5 100px",
+         "flex": "5 5 100px",
          "_main-size": [ null,  "62.5px" ]
        },
        {
-         "-moz-flex": "0 4 125px",
+         "flex": "0 4 125px",
          "_main-size": [ null, "87.5px" ]
        }
      ]
  },
 
  // Test a min-size that's much larger than initial preferred size, but small
  // enough that our flexed size pushes us over it:
  {
    items:
      [
        {
-         "-moz-flex": "auto",
+         "flex": "auto",
          "_min-main-size": "110px",
          "_main-size": [ "50px",  "125px" ]
        },
        {
-         "-moz-flex": "auto",
+         "flex": "auto",
          "_main-size": [ null, "75px" ]
        }
      ]
  },
 
  // Test a min-size that's much larger than initial preferred size, and is
  // even larger than our positively-flexed size, so that we have to increase it
  // (as a 'min violation') after we've flexed.
  {
    items:
      [
        {
-         "-moz-flex": "auto",
+         "flex": "auto",
          "_min-main-size": "150px",
          "_main-size": [ "50px",  "150px" ]
        },
        {
-         "-moz-flex": "auto",
+         "flex": "auto",
          "_main-size": [ null, "50px" ]
        }
      ]
  },
 
  // Test min-size on multiple items simultaneously:
  {
    items:
      [
        {
-         "-moz-flex": "auto",
+         "flex": "auto",
          "_min-main-size": "20px",
          "_main-size": [ null,  "20px" ]
        },
        {
-         "-moz-flex": "9 auto",
+         "flex": "9 auto",
          "_min-main-size": "150px",
          "_main-size": [ "50px",  "180px" ]
        },
      ]
  },
  {
    items:
      [