Merge mozilla-central to inbound. a=merge CLOSED TREE
authorshindli <shindli@mozilla.com>
Sun, 18 Feb 2018 11:40:07 +0200
changeset 404336 473f8e78ebf9cbfc94f94771b07717f4d9ad7b81
parent 404330 51b090021867a02e33366b639c7814353c494f00 (current diff)
parent 404335 e7438140bb208aba474a74bdab428fc55962491c (diff)
child 404337 7faf85adc8988c19f9d5a1b396d129c84e6b28f9
push id99984
push usershindli@mozilla.com
push dateSun, 18 Feb 2018 09:40:29 +0000
treeherdermozilla-inbound@473f8e78ebf9 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmerge
milestone60.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Merge mozilla-central to inbound. a=merge CLOSED TREE
--- a/browser/base/content/browser-sidebar.js
+++ b/browser/base/content/browser-sidebar.js
@@ -43,29 +43,36 @@ var SidebarUI = {
     return this.__title = document.getElementById("sidebar-title");
   },
   _splitter: null,
   _icon: null,
   _reversePositionButton: null,
   _switcherPanel: null,
   _switcherTarget: null,
   _switcherArrow: null,
+  _inited: false,
+
+  get initialized() {
+    return this._inited;
+  },
 
   init() {
     this._box = document.getElementById("sidebar-box");
     this._splitter = document.getElementById("sidebar-splitter");
     this._icon = document.getElementById("sidebar-icon");
     this._reversePositionButton = document.getElementById("sidebar-reverse-position");
     this._switcherPanel = document.getElementById("sidebarMenu-popup");
     this._switcherTarget = document.getElementById("sidebar-switcher-target");
     this._switcherArrow = document.getElementById("sidebar-switcher-arrow");
 
     this._switcherTarget.addEventListener("command", () => {
       this.toggleSwitcherPanel();
     });
+
+    this._inited = true;
   },
 
   uninit() {
     // If this is the last browser window, persist various values that should be
     // remembered for after a restart / reopening a browser window.
     let enumerator = Services.wm.getEnumerator("navigator:browser");
     if (!enumerator.hasMoreElements()) {
       document.persist("sidebar-box", "sidebarcommand");
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -5605,39 +5605,42 @@ var gUIDensity = {
     Services.prefs.setIntPref(this.uiDensityPref, mode);
   },
 
   update(mode) {
     if (mode == null) {
       mode = this.getCurrentDensity().mode;
     }
 
-    let docs = [
-      document.documentElement,
-      SidebarUI.browser.contentDocument.documentElement,
-    ];
+    let docs = [document.documentElement];
+    let shouldUpdateSidebar = SidebarUI.initialized && SidebarUI.isOpen;
+    if (shouldUpdateSidebar) {
+      docs.push(SidebarUI.browser.contentDocument.documentElement);
+    }
     for (let doc of docs) {
       switch (mode) {
       case this.MODE_COMPACT:
         doc.setAttribute("uidensity", "compact");
         break;
       case this.MODE_TOUCH:
         doc.setAttribute("uidensity", "touch");
         break;
       default:
         doc.removeAttribute("uidensity");
         break;
       }
     }
-    let tree = SidebarUI.browser.contentDocument.querySelector(".sidebar-placesTree");
-    if (tree) {
-      // Tree items don't update their styles without changing some property on the
-      // parent tree element, like background-color or border. See bug 1407399.
-      tree.style.border = "1px";
-      tree.style.border = "";
+    if (shouldUpdateSidebar) {
+      let tree = SidebarUI.browser.contentDocument.querySelector(".sidebar-placesTree");
+      if (tree) {
+        // Tree items don't update their styles without changing some property on the
+        // parent tree element, like background-color or border. See bug 1407399.
+        tree.style.border = "1px";
+        tree.style.border = "";
+      }
     }
 
     TabsInTitlebar.updateAppearance(true);
     gBrowser.tabContainer.uiDensityChanged();
   },
 };
 
 var gHomeButton = {
--- a/browser/components/places/content/sidebarUtils.js
+++ b/browser/components/places/content/sidebarUtils.js
@@ -1,14 +1,18 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 ChromeUtils.import("resource://gre/modules/AppConstants.jsm");
-window.top.gUIDensity.update();
+
+let uidensity = window.top.document.documentElement.getAttribute("uidensity");
+if (uidensity) {
+  document.documentElement.setAttribute("uidensity", uidensity);
+}
 
 var SidebarUtils = {
   handleTreeClick: function SU_handleTreeClick(aTree, aEvent, aGutterSelect) {
     // right-clicks are not handled here
     if (aEvent.button == 2)
       return;
 
     var tbo = aTree.treeBoxObject;
--- a/layout/generic/nsFlexContainerFrame.cpp
+++ b/layout/generic/nsFlexContainerFrame.cpp
@@ -2829,21 +2829,21 @@ MainAxisPositionTracker::
     mNumAutoMarginsInMainAxis += item->GetNumAutoMarginsInAxis(mAxis);
   }
 
   if (mPackingSpaceRemaining <= 0) {
     // No available packing space to use for resolving auto margins.
     mNumAutoMarginsInMainAxis = 0;
   }
 
-  // If packing space is negative, 'space-between' falls back to 'flex-start',
-  // and 'space-around' & 'space-evenly' fall back to 'center'. In those cases,
-  // it's simplest to just pretend we have a different 'justify-content' value
-  // and share code.
-  if (mPackingSpaceRemaining < 0) {
+  // If packing space is negative or we only have one item, 'space-between'
+  // falls back to 'flex-start', and 'space-around' & 'space-evenly' fall back
+  // to 'center'. In those cases, it's simplest to just pretend we have a
+  // different 'justify-content' value and share code.
+  if (mPackingSpaceRemaining < 0 || aLine->NumItems() == 1) {
     if (mJustifyContent == NS_STYLE_JUSTIFY_SPACE_BETWEEN) {
       mJustifyContent = NS_STYLE_JUSTIFY_FLEX_START;
     } else if (mJustifyContent == NS_STYLE_JUSTIFY_SPACE_AROUND ||
                mJustifyContent == NS_STYLE_JUSTIFY_SPACE_EVENLY) {
       mJustifyContent = NS_STYLE_JUSTIFY_CENTER;
     }
   }
 
@@ -3032,20 +3032,23 @@ CrossAxisPositionTracker::
   for (FlexLine* line = aFirstLine; line; line = line->getNext()) {
     mPackingSpaceRemaining -= line->GetLineCrossSize();
     numLines++;
   }
 
   // If packing space is negative, 'space-between' and 'stretch' behave like
   // 'flex-start', and 'space-around' and 'space-evenly' behave like 'center'.
   // In those cases, it's simplest to just pretend we have a different
-  // 'align-content' value and share code.
-  if (mPackingSpaceRemaining < 0) {
-    if (mAlignContent == NS_STYLE_ALIGN_SPACE_BETWEEN ||
-        mAlignContent == NS_STYLE_ALIGN_STRETCH) {
+  // 'align-content' value and share code. (If we only have one line, all of
+  // the 'space-*' keywords fall back as well, but 'stretch' doesn't because
+  // even a single line can still stretch.)
+  if (mPackingSpaceRemaining < 0 && mAlignContent == NS_STYLE_ALIGN_STRETCH) {
+      mAlignContent = NS_STYLE_ALIGN_FLEX_START;
+  } else if (mPackingSpaceRemaining < 0 || numLines == 1) {
+    if (mAlignContent == NS_STYLE_ALIGN_SPACE_BETWEEN) {
       mAlignContent = NS_STYLE_ALIGN_FLEX_START;
     } else if (mAlignContent == NS_STYLE_ALIGN_SPACE_AROUND ||
                mAlignContent == NS_STYLE_ALIGN_SPACE_EVENLY) {
       mAlignContent = NS_STYLE_ALIGN_CENTER;
     }
   }
 
   // Map 'left'/'right' to 'start'/'end'
@@ -4280,18 +4283,23 @@ nsFlexContainerFrame::CalculatePackingSp
   MOZ_ASSERT(aAlignVal == NS_STYLE_ALIGN_SPACE_BETWEEN ||
              aAlignVal == NS_STYLE_ALIGN_SPACE_AROUND ||
              aAlignVal == NS_STYLE_ALIGN_SPACE_EVENLY,
              "Unexpected alignment value");
 
   MOZ_ASSERT(*aPackingSpaceRemaining >= 0,
              "Should not be called with negative packing space");
 
-  MOZ_ASSERT(aNumThingsToPack >= 1,
-             "Should not be called with less than 1 thing to pack");
+  // Note: In the aNumThingsToPack==1 case, the fallback behavior for
+  // 'space-between' depends on precise information about the axes that we
+  // don't have here. So, for that case, we just depend on the caller to
+  // explicitly convert 'space-{between,around,evenly}' keywords to the
+  // appropriate fallback alignment and skip this function.
+  MOZ_ASSERT(aNumThingsToPack > 1,
+             "Should not be called unless there's more than 1 thing to pack");
 
   // Packing spaces between items:
   *aNumPackingSpacesRemaining = aNumThingsToPack - 1;
 
   if (aAlignVal == NS_STYLE_ALIGN_SPACE_BETWEEN) {
     // No need to reserve space at beginning/end, so we're done.
     return;
   }
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001-ref.xhtml
copy to layout/reftests/flexbox/flexbox-align-content-horizrev-001-ref.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-content-horizrev-001-ref.xhtml
@@ -38,105 +38,105 @@
         background: purple;
       }
     </style>
   </head>
   <body>
 
     <!-- default (stretch) -->
     <div class="flexbox">
+      <div class="a" style="margin-top: 190px"/>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="height:110px"><div class="fixedSizeChild"/></div>
+      <div class="a" style="margin-top:80px"/>
+    </div>
+    <div class="flexbox">
+      <div class="c" style="margin-top:40px"/>
+      <div class="b" style="height: 70px"><div class="fixedSizeChild"/></div>
+      <div class="a" style="margin-top:40px"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 190px"/>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="margin-top: 160px"><div class="fixedSizeChild"/></div>
       <div class="a"/>
     </div>
     <div class="flexbox">
+      <div class="c" style="margin-top: 120px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
       <div class="a"/>
-      <div class="b" style="margin-top:80px; height:110px"><div class="fixedSizeChild"/></div>
-    </div>
-    <div class="flexbox">
-      <div class="a"/>
-      <div class="b" style="margin-top:40px; height: 70px"><div class="fixedSizeChild"/></div>
-      <div class="c"/>
     </div>
 
-    <!-- flex-start -->
+    <!-- flex-end -->
     <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
+      <div class="b"><div class="fixedSizeChild"/></div>
       <div class="a"/>
-      <div class="b"><div class="fixedSizeChild"/></div>
     </div>
     <div class="flexbox">
-      <div class="a"/>
+      <div class="c"/>
       <div class="b"><div class="fixedSizeChild"/></div>
-      <div class="c"/>
-    </div>
-
-    <!-- flex-end -->
-    <div class="flexbox">
-      <div class="a" style="margin-top: 190px"/>
-    </div>
-    <div class="flexbox">
-      <div class="a" style="margin-top: 160px"/>
-      <div class="b"><div class="fixedSizeChild"/></div>
-    </div>
-    <div class="flexbox">
-      <div class="a" style="margin-top: 120px"/>
-      <div class="b"><div class="fixedSizeChild"/></div>
-      <div class="c"/>
+      <div class="a"/>
     </div>
 
     <!-- center -->
     <div class="flexbox">
       <div class="a" style="margin-top: 95px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: 80px"/>
-      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="b" style="margin-top: 80px"><div class="fixedSizeChild"/></div>
+      <div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: 60px"/>
+      <div class="c" style="margin-top: 60px"/>
       <div class="b"><div class="fixedSizeChild"/></div>
-      <div class="c"/>
+      <div class="a"/>
     </div>
 
     <!-- space-between -->
     <div class="flexbox">
-      <div class="a"/>
+      <div class="a" style="margin-top: 190px"/>
     </div>
     <div class="flexbox">
-      <div class="a"/>
-      <div class="b" style="margin-top: 160px"><div class="fixedSizeChild"/></div>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="a" style="margin-top: 160px"/>
     </div>
     <div class="flexbox">
-      <div class="a"/>
+      <div class="c"/>
       <div class="b" style="margin-top: 60px"><div class="fixedSizeChild"/></div>
-      <div class="c" style="margin-top: 60px"/>
+      <div class="a" style="margin-top: 60px"/>
     </div>
 
     <!-- space-around -->
     <div class="flexbox">
       <div class="a" style="margin-top: 95px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: 40px"/>
-      <div class="b" style="margin-top: 80px"><div class="fixedSizeChild"/></div>
+      <div class="b" style="margin-top: 40px"><div class="fixedSizeChild"/></div>
+      <div class="a" style="margin-top: 80px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: 20px"/>
+      <div class="c" style="margin-top: 20px"/>
       <div class="b" style="margin-top: 40px"><div class="fixedSizeChild"/></div>
-      <div class="c" style="margin-top: 40px"/>
+      <div class="a" style="margin-top: 40px"/>
     </div>
 
     <!-- space-evenly -->
     <div class="flexbox">
       <div class="a" style="margin-top: 95px"/>
     </div>
     <div class="flexbox">
+      <div class="b" style="margin-top: calc(160px / 3)"><div class="fixedSizeChild"/></div>
       <div class="a" style="margin-top: calc(160px / 3)"/>
-      <div class="b" style="margin-top: calc(160px / 3)"><div class="fixedSizeChild"/></div>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: 30px"/>
+      <div class="c" style="margin-top: 30px"/>
       <div class="b" style="margin-top: 30px"><div class="fixedSizeChild"/></div>
-      <div class="c" style="margin-top: 30px"/>
+      <div class="a" style="margin-top: 30px"/>
     </div>
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001a.xhtml
copy to layout/reftests/flexbox/flexbox-align-content-horizrev-001.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001a.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-content-horizrev-001.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 a series of horizontal flex containers, with 1-3 flex lines,
+<!-- Testcase with a series of row wrap-reverse flex containers, with 1-3 flex lines,
      testing each possible value of the 'align-content' property. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <title>CSS Test: Testing 'align-content' in a horizontal flex container</title>
+    <title>CSS Test: Testing 'align-content' in a row wrap-reverse flex container</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
     <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/>
-    <link rel="match" href="flexbox-align-content-horiz-001-ref.xhtml"/>
+    <link rel="match" href="flexbox-align-content-horizrev-001-ref.xhtml"/>
     <style>
       div.flexbox {
         width: 20px; /* Skinny, to force us to wrap */
         height: 200px;
         display: flex;
-        flex-wrap: wrap;
+        flex-wrap: wrap-reverse;
         margin-right: 2px;
         float: left;
         background: lightgray;
       }
       div.a {
         width: 20px;
         height: 10px;
         flex: none;
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml
copy to layout/reftests/flexbox/flexbox-align-content-vertrev-001-ref.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-content-vertrev-001-ref.xhtml
@@ -14,29 +14,29 @@
         background: lightgray;
         height: 20px;
         clear: all;
       }
       div.a {
         width: 10px;
         height: 20px;
         background: lightgreen;
-        float: left;
+        float: right;
       }
       div.b {
         width: 30px;
         height: 20px;
         background: pink;
-        float: left;
+        float: right;
       }
       div.c {
         width: 40px;
         height: 20px;
         background: orange;
-        float: left;
+        float: right;
       }
 
       /* Inside of 'b': */
       div.fixedSizeChild {
         width: 30px;
         height: 10px;
         background: purple;
       }
@@ -45,21 +45,21 @@
   <body>
 
     <!-- default (stretch) -->
     <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
       <div class="a"/>
-      <div class="b" style="margin-left:80px; width:110px"><div class="fixedSizeChild"/></div>
+      <div class="b" style="margin-right:80px; width:110px"><div class="fixedSizeChild"/></div>
     </div>
     <div class="flexbox">
       <div class="a"/>
-      <div class="b" style="margin-left: 40px; width: 70px"><div class="fixedSizeChild"/></div>
+      <div class="b" style="margin-right: 40px; width: 70px"><div class="fixedSizeChild"/></div>
       <div class="c"/>
     </div>
 
     <!-- flex-start -->
     <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
@@ -69,77 +69,77 @@
     <div class="flexbox">
       <div class="a"/>
       <div class="b"><div class="fixedSizeChild"/></div>
       <div class="c"/>
     </div>
 
     <!-- flex-end -->
     <div class="flexbox">
-      <div class="a" style="margin-left: 190px"/>
+      <div class="a" style="margin-right: 190px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-left: 160px"/>
+      <div class="a" style="margin-right: 160px"/>
       <div class="b"><div class="fixedSizeChild"/></div>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-left: 120px"/>
+      <div class="a" style="margin-right: 120px"/>
       <div class="b"><div class="fixedSizeChild"/></div>
       <div class="c"/>
     </div>
 
     <!-- center -->
     <div class="flexbox">
-      <div class="a" style="margin-left: 95px"/>
+      <div class="a" style="margin-right: 95px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-left: 80px"/>
+      <div class="a" style="margin-right: 80px"/>
       <div class="b"><div class="fixedSizeChild"/></div>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-left: 60px"/>
+      <div class="a" style="margin-right: 60px"/>
       <div class="b"><div class="fixedSizeChild"/></div>
       <div class="c"/>
     </div>
 
     <!-- space-between -->
     <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
       <div class="a"/>
-      <div class="b" style="margin-left: 160px"><div class="fixedSizeChild"/></div>
+      <div class="b" style="margin-right: 160px"><div class="fixedSizeChild"/></div>
     </div>
     <div class="flexbox">
       <div class="a"/>
-      <div class="b" style="margin-left: 60px"><div class="fixedSizeChild"/></div>
-      <div class="c" style="margin-left: 60px"/>
+      <div class="b" style="margin-right: 60px"><div class="fixedSizeChild"/></div>
+      <div class="c" style="margin-right: 60px"/>
     </div>
 
     <!-- space-around -->
     <div class="flexbox">
-      <div class="a" style="margin-left: 95px"/>
+      <div class="a" style="margin-right: 95px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-left: 40px"/>
-      <div class="b" style="margin-left: 80px"><div class="fixedSizeChild"/></div>
+      <div class="a" style="margin-right: 40px"/>
+      <div class="b" style="margin-right: 80px"><div class="fixedSizeChild"/></div>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-left: 20px"/>
-      <div class="b" style="margin-left: 40px"><div class="fixedSizeChild"/></div>
-      <div class="c" style="margin-left: 40px"/>
+      <div class="a" style="margin-right: 20px"/>
+      <div class="b" style="margin-right: 40px"><div class="fixedSizeChild"/></div>
+      <div class="c" style="margin-right: 40px"/>
     </div>
 
     <!-- space-evenly -->
     <div class="flexbox">
-      <div class="a" style="margin-left: 95px"/>
+      <div class="a" style="margin-right: 95px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-left: calc(160px / 3)"/>
-      <div class="b" style="margin-left: calc(160px / 3)"><div class="fixedSizeChild"/></div>
+      <div class="a" style="margin-right: calc(160px / 3)"/>
+      <div class="b" style="margin-right: calc(160px / 3)"><div class="fixedSizeChild"/></div>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-left: 30px"/>
-      <div class="b" style="margin-left: 30px"><div class="fixedSizeChild"/></div>
-      <div class="c" style="margin-left: 30px"/>
+      <div class="a" style="margin-right: 30px"/>
+      <div class="b" style="margin-right: 30px"><div class="fixedSizeChild"/></div>
+      <div class="c" style="margin-right: 30px"/>
     </div>
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001a.xhtml
copy to layout/reftests/flexbox/flexbox-align-content-vertrev-001.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001a.xhtml
+++ b/layout/reftests/flexbox/flexbox-align-content-vertrev-001.xhtml
@@ -1,28 +1,28 @@
 <?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, with 1-3 flex lines,
+<!-- Testcase with a series of column wrap-reverse flex containers, with 1-3 flex lines,
      testing each possible value of the 'align-content' property. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <title>CSS Test: Testing 'align-content' in a vertical flex container</title>
+    <title>CSS Test: Testing 'align-content' in a column wrap-reverse flex container</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
     <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/>
-    <link rel="match" href="flexbox-align-content-vert-001-ref.xhtml"/>
+    <link rel="match" href="flexbox-align-content-vertrev-001-ref.xhtml"/>
     <style>
       div.flexbox {
         width: 200px;
         height: 20px; /* Short, to force us to wrap */
         display: flex;
         flex-direction: column;
-        flex-wrap: wrap;
+        flex-wrap: wrap-reverse;
         margin-bottom: 2px;
         background: lightgray;
       }
       div.a {
         width: 10px;
         height: 20px;
         flex: none;
         background: lightgreen;
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001-ref.xhtml
copy to layout/reftests/flexbox/flexbox-justify-content-horizrev-001-ref.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-horizrev-001-ref.xhtml
@@ -6,16 +6,18 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>CSS Reftest Reference</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
     <style>
       div.flexbox {
         margin-bottom: 2px;
         line-height: 0;
+        direction: rtl;
+        width: 200px;
       }
       div.flexbox > * {
         display: inline-block;
       }
       div.a {
         height: 20px;
         width: 10px;
         background: lightgreen;
@@ -53,93 +55,98 @@
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- flex-end -->
     <div class="flexbox">
-      <div class="a" style="margin-left: 190px"/>
+      <div class="a" style="margin-right: 190px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-left: 140px"/><div class="b"/>
+      <div class="a" style="margin-right: 140px"/><div class="b"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/>
+      <div class="a" style="margin-right: 40px"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- center -->
     <div class="flexbox">
-      <div class="a" style="margin-left: 95px"/>
+      <div class="a" style="margin-right: 95px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-left: 70px"/><div class="b"/>
+      <div class="a" style="margin-right: 70px"/><div class="b"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-left: 20px"/><div class="b"/><div class="c"/>
+      <div class="a" style="margin-right: 20px"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- space-between -->
     <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b" style="margin-left: 140px"/>
+      <div class="a"/><div class="b" style="margin-right: 140px"/>
     </div>
     <div class="flexbox">
       <div class="a"
-           /><div class="b" style="margin-left: 20px"
-           /><div class="c" style="margin-left: 20px"/>
+           /><div class="b" style="margin-right: 20px"
+           /><div class="c" style="margin-right: 20px"/>
     </div>
 
     <!-- space-around -->
     <div class="flexbox">
-      <div class="a" style="margin-left: 95px"/>
+      <div class="a" style="margin-right: 95px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-left: 35px"
-           /><div class="b" style="margin-left: 70px"/>
+      <div class="a" style="margin-right: 35px"
+           /><div class="b" style="margin-right: 70px"/>
     </div>
     <div class="flexbox">
-      <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 class="a" style="margin-right: calc(40px / 6)"
+           /><div class="b" style="margin-right: calc(40px / 3)"
+           /><div class="c" style="margin-right: calc(40px / 3)"/>
     </div>
 
     <!-- space-evenly -->
     <div class="flexbox">
-      <div class="a" style="margin-left: 95px"/>
+      <div class="a" style="margin-right: 95px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-right: calc(140px / 3)"
+           /><div class="b" style="margin-right: calc(140px / 3)"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-left: calc(140px / 3)"
-           /><div class="b" style="margin-left: calc(140px / 3)"/>
-    </div>
-    <div class="flexbox">
-      <div class="a" style="margin-left: 10px"
-           /><div class="b" style="margin-left: 10px"
-           /><div class="c" style="margin-left: 10px"/>
+      <div class="a" style="margin-right: 10px"
+           /><div class="b" style="margin-right: 10px"
+           /><div class="c" style="margin-right: 10px"/>
     </div>
 
+    <!-- XXXdholbert The left/right references are *WRONG* right now (they
+         should be swapped). I'm including them in their current incorrect form
+         simply to document the testcase's current behavior and to allow this
+         test to "pass" so we can catch any regressions in the rest of the
+         test. We should fix this as part of bug 1207698 or a helper. -->
     <!-- left -->
     <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
     <!-- right -->
     <div class="flexbox">
-      <div class="a" style="margin-left: 190px"/>
+      <div class="a" style="margin-right: 190px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-left: 140px"/><div class="b"/>
+      <div class="a" style="margin-right: 140px"/><div class="b"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/>
+      <div class="a" style="margin-right: 40px"/><div class="b"/><div class="c"/>
     </div>
 
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001a.xhtml
copy to layout/reftests/flexbox/flexbox-justify-content-horizrev-001.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001a.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-horizrev-001.xhtml
@@ -1,25 +1,26 @@
 <?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 horizontal flex containers, testing each
+<!-- Testcase with a series of row-reverse flex containers, testing each
      possible value of the 'justify-content' property. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <title>CSS Test: Testing 'justify-content' in a horizontal flex container</title>
+    <title>CSS Test: Testing 'justify-content' in a row-reverse flex container</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
     <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
-    <link rel="match" href="flexbox-justify-content-horiz-001-ref.xhtml"/>
+    <link rel="match" href="flexbox-justify-content-horizrev-001-ref.xhtml"/>
     <style>
       div.flexbox {
         width: 200px;
         display: flex;
+        flex-direction: row-reverse;
         margin-bottom: 2px;
       }
       div.a {
         height: 20px;
         flex: 0 10px;
         background: lightgreen;
       }
       div.b {
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml
copy to layout/reftests/flexbox/flexbox-justify-content-vertrev-001-ref.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-vertrev-001-ref.xhtml
@@ -29,115 +29,115 @@
         background: orange;
       }
     </style>
   </head>
   <body>
 
     <!-- default (start) -->
     <div class="flexbox">
-      <div class="a"/>
+      <div class="a" style="margin-top: 190px"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"></div>
+      <div class="b" style="margin-top: 140px"/><div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/><div class="c"/>
+      <div class="c" style="margin-top: 40px"/><div class="b"/><div class="a"/>
     </div>
 
     <!-- flex-start -->
     <div class="flexbox">
+      <div class="a" style="margin-top: 190px"/>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="margin-top: 140px"/><div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="c" style="margin-top: 40px"/><div class="b"/><div class="a"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox">
       <div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/>
+      <div class="b"/><div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/><div class="c"/>
-    </div>
-
-    <!-- flex-end -->
-    <div class="flexbox">
-      <div class="a" style="margin-top: 190px"/>
-    </div>
-    <div class="flexbox">
-      <div class="a" style="margin-top: 140px"/><div class="b"/>
-    </div>
-    <div class="flexbox">
-      <div class="a" style="margin-top: 40px"/><div class="b"/><div class="c"/>
+      <div class="c"/><div class="b"/><div class="a"/>
     </div>
 
     <!-- center -->
     <div class="flexbox">
       <div class="a" style="margin-top: 95px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: 70px"/><div class="b"/>
+      <div class="b" style="margin-top: 70px"/><div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: 20px"/><div class="b"/><div class="c"/>
+      <div class="c" style="margin-top: 20px"/><div class="b"/><div class="a"/>
     </div>
 
     <!-- space-between -->
     <div class="flexbox">
-      <div class="a"/>
+      <div class="a" style="margin-top: 190px"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b" style="margin-top: 140px"/>
+      <div class="b"/><div class="a" style="margin-top: 140px"/>
     </div>
     <div class="flexbox">
-      <div class="a"
+      <div class="c"
            /><div class="b" style="margin-top: 20px"
-           /><div class="c" style="margin-top: 20px"/>
+           /><div class="a" style="margin-top: 20px"/>
     </div>
 
     <!-- space-around -->
     <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 class="b" style="margin-top: 35px"
+           /><div class="a" style="margin-top: 70px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: calc(40px / 6)"
+      <div class="c" 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 class="a" style="margin-top: calc(40px / 3)"/>
     </div>
 
     <!-- space-evenly -->
     <div class="flexbox">
       <div class="a" style="margin-top: 95px"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: calc(140px / 3)"
-           /><div class="b" style="margin-top: calc(140px / 3)"/>
+      <div class="b" style="margin-top: calc(140px / 3)"
+           /><div class="a" style="margin-top: calc(140px / 3)"/>
     </div>
     <div class="flexbox">
-      <div class="a" style="margin-top: 10px"
+      <div class="c" style="margin-top: 10px"
            /><div class="b" style="margin-top: 10px"
-           /><div class="c" style="margin-top: 10px"/>
+           /><div class="a" style="margin-top: 10px"/>
     </div>
 
     <!-- left -->
     <div class="flexbox">
-      <div class="a"/>
+      <div class="a" style="margin-top: 190px"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/>
+      <div class="b" style="margin-top: 140px"/><div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/><div class="c"/>
+      <div class="c" style="margin-top: 40px"/><div class="b"/><div class="a"/>
     </div>
 
     <!-- right -->
     <div class="flexbox">
-      <div class="a"/>
+      <div class="a" style="margin-top: 190px"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/>
+      <div class="b" style="margin-top: 140px"/><div class="a"/>
     </div>
     <div class="flexbox">
-      <div class="a"/><div class="b"/><div class="c"/>
+      <div class="c" style="margin-top: 40px"/><div class="b"/><div class="a"/>
     </div>
 
   </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml
copy to layout/reftests/flexbox/flexbox-justify-content-vertrev-001.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml
+++ b/layout/reftests/flexbox/flexbox-justify-content-vertrev-001.xhtml
@@ -1,26 +1,26 @@
 <?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
+<!-- Testcase with a series of column-reverse flex containers, testing each
      possible value of the 'justify-content' property. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <title>CSS Test: Testing 'justify-content' in a vertical flex container</title>
+    <title>CSS Test: Testing 'justify-content' in a column-reverse flex container</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
     <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
-    <link rel="match" href="flexbox-justify-content-vert-001-ref.xhtml"/>
+    <link rel="match" href="flexbox-justify-content-vertrev-001-ref.xhtml"/>
     <style>
       div.flexbox {
         height: 200px;
         display: flex;
-        flex-direction: column;
+        flex-direction: column-reverse;
         margin-right: 2px;
         float: left;
       }
       div.a {
         width: 20px;
         flex: 0 10px;
         background: lightgreen;
       }
--- a/layout/reftests/flexbox/reftest.list
+++ b/layout/reftests/flexbox/reftest.list
@@ -7,16 +7,24 @@
 #
 # Where possible & practical, we should try to address these so we can migrate
 # tests over to the w3c-css directory, so that they can become part of the
 # W3C's test suite.
 
 # SUBDIRECTORY: Reftests for paginated flex containers
 include pagination/reftest.list
 
+# XXXdholbert These tests should move to w3c-css/submitted once we've closed
+# out bug 1207698 and updated these tests' expectations & alignment keyword
+# usage accordingly:
+== flexbox-align-content-horizrev-001.xhtml flexbox-align-content-horizrev-001-ref.xhtml
+== flexbox-align-content-vertrev-001.xhtml flexbox-align-content-vertrev-001-ref.xhtml
+== flexbox-justify-content-horizrev-001.xhtml flexbox-justify-content-horizrev-001-ref.xhtml
+== flexbox-justify-content-vertrev-001.xhtml flexbox-justify-content-vertrev-001-ref.xhtml
+
 # Tests for cross-axis alignment (align-self / align-items properties)
 fails == flexbox-align-self-baseline-horiz-2.xhtml  flexbox-align-self-baseline-horiz-2-ref.xhtml # bug 793456, and possibly others
 # This one fails on windows R (but not Ru, strangely) and GTK.
 # On Windows R and GTK, the single-line <label> flex item has a different
 # background size in test vs. ref
 fuzzy-if(cocoaWidget,1,2) random-if(winWidget||gtkWidget) skip-if(Android) == flexbox-align-self-baseline-horiz-3.xhtml  flexbox-align-self-baseline-horiz-3-ref.xhtml # XXXdholbert investigate the random-if. The skip-if(Android) is because checkbox/radio appearance:none doesn't work as expected.
 == flexbox-align-self-baseline-horiz-4.xhtml flexbox-align-self-baseline-horiz-4-ref.xhtml
 == flexbox-item-align-self-dynamic-pos-001.html flexbox-item-align-self-dynamic-pos-001-ref.html