Update CSS tests to revision 2baa72daab8bf37e3e910a9fd311a1eaa5b0f4a8

48 files changed, 1874 insertions, 257 deletions

diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-1.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-1.xht
index 86f94427de5..e666d4aadaa 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-1.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-1.xht
@@ -56,12 +56,6 @@
         </td>
       </tr>
     </tbody>
-    <tbody id="s1.3">
-      <tr><th colspan="4" scope="rowgroup">
-        <a href="#s1.3">+</a>
-        <a href="http://www.w3.org/TR/css-flexbox-1/#values">1.3 Values</a></th></tr>
-      <!-- 0 tests -->
-    </tbody>
   </table>
 
  </body>
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-10.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-10.xht
index 35908a48f61..5698a6995a2 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-10.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-10.xht
@@ -170,12 +170,54 @@
         <a href="http://www.w3.org/TR/css-flexbox-1/#pagination-algo">10.1 Sample Flex Fragmentation Algorithm</a></th></tr>
       <!-- 0 tests -->
     </tbody>
+    <tbody id="s10.1.#example-bb213bd3">
+      <!-- 0 tests -->
+    </tbody>
     <tbody id="s.#abstract">
       <!-- 0 tests -->
     </tbody>
     <tbody id="s.#acknowledgments">
       <!-- 0 tests -->
     </tbody>
+    <tbody id="s.#biblio-css-align-3">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#biblio-css-break-3">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#biblio-css-cascade-4">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#biblio-css-display-3">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#biblio-css-images-3">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#biblio-css-overflow-3">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#biblio-css-position-3">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#biblio-css-pseudo-4">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#biblio-css-sizing-3">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#biblio-css-text-3">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#biblio-css-ui-3">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#biblio-css-values-3">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#biblio-css-writing-modes-3">
+      <!-- 0 tests -->
+    </tbody>
     <tbody id="s.#biblio-css21">
       <!-- 0 tests -->
     </tbody>
@@ -185,16 +227,19 @@
     <tbody id="s.#biblio-css3-break">
       <!-- 0 tests -->
     </tbody>
+    <tbody id="s.#biblio-css3-display">
+      <!-- 0 tests -->
+    </tbody>
     <tbody id="s.#biblio-css3-sizing">
       <!-- 0 tests -->
     </tbody>
     <tbody id="s.#biblio-css3-writing-modes">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s.#biblio-css3ui">
+    <tbody id="s.#biblio-css3col">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s.#biblio-css3val">
+    <tbody id="s.#biblio-css3ui">
       <!-- 0 tests -->
     </tbody>
     <tbody id="s.#biblio-html40">
@@ -290,6 +335,48 @@
     <tbody id="s.#change-201403-substantive">
       <!-- 0 tests -->
     </tbody>
+    <tbody id="s.#change-201409-algo-breaks">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#change-201409-align-content-wrapping">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#change-201409-clamped-specified">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#change-201409-clarify">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#change-201409-content">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#change-201409-display-longhands">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#change-201409-flexed-definite-container">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#change-201409-inner-base-size">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#change-201409-layout-vs-size">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#change-201409-min-auto-specified-size">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#change-201409-neither">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#change-201409-substantive">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#change-201409-table-wrappers">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#change-201409-unclamped-size">
+      <!-- 0 tests -->
+    </tbody>
     <tbody id="s.#changes">
       <!-- 0 tests -->
     </tbody>
@@ -305,6 +392,9 @@
     <tbody id="s.#changes-201403">
       <!-- 0 tests -->
     </tbody>
+    <tbody id="s.#changes-201409">
+      <!-- 0 tests -->
+    </tbody>
     <tbody id="s.#clarify-2012-abspos-items">
       <!-- 0 tests -->
     </tbody>
@@ -353,16 +443,28 @@
     <tbody id="s.#conventions">
       <!-- 0 tests -->
     </tbody>
+    <tbody id="s.#example-0401c357">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#example-cd819179">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#example-f839f6c8">
+      <!-- 0 tests -->
+    </tbody>
     <tbody id="s.#experimental">
       <!-- 0 tests -->
     </tbody>
     <tbody id="s.#index">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s.#informative">
+    <tbody id="s.#index-defined-elsewhere">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s.#index-defined-here">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s.#issues-index">
+    <tbody id="s.#informative">
       <!-- 0 tests -->
     </tbody>
     <tbody id="s.#normative">
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-2.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-2.xht
index f26ada2c884..43d4130d34f 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-2.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-2.xht
@@ -42,16 +42,16 @@
     <tbody id="s2.#cross-dimension">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s2.#cross-end">
-      <!-- 0 tests -->
-    </tbody>
     <tbody id="s2.#cross-size">
       <!-- 0 tests -->
     </tbody>
     <tbody id="s2.#cross-size-property">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s2.#cross-start">
+    <tbody id="s2.#cross_end">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s2.#cross_start">
       <!-- 0 tests -->
     </tbody>
     <tbody id="s2.#flex-container">
@@ -372,16 +372,16 @@
     <tbody id="s2.#main-dimension">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s2.#main-end">
-      <!-- 0 tests -->
-    </tbody>
     <tbody id="s2.#main-size">
       <!-- 0 tests -->
     </tbody>
     <tbody id="s2.#main-size-property">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s2.#main-start">
+    <tbody id="s2.#main_end">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s2.#main_start">
       <!-- 0 tests -->
     </tbody>
   </table>
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-4.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-4.xht
index 80bbd705885..e3bf234bbb8 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-4.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-4.xht
@@ -13,7 +13,7 @@
  <body>
 
   <h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
-  <h2>Flex Items (58 tests)</h2>
+  <h2>Flex Items (57 tests)</h2>
   <table width="100%">
     <col id="test-column"></col>
     <col id="refs-column"></col>
@@ -231,6 +231,12 @@
         </td>
       </tr>
     </tbody>
+    <tbody id="s4.#example-f7107939">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s4.#flex_level">
+      <!-- 0 tests -->
+    </tbody>
     <tbody id="s4.#table-items">
       <!-- 0 tests -->
     </tbody>
@@ -272,25 +278,17 @@
         </td>
       </tr>
     </tbody>
-    <tbody id="s4.1.#static-position-rectangle">
+    <tbody id="s4.1.#example-5860ae02">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s4.1.#static_position-rectangle">
       <!-- 0 tests -->
     </tbody>
     <tbody id="s4.2">
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s4.2">+</a>
         <a href="http://www.w3.org/TR/css-flexbox-1/#item-margins">4.2 Flex Item Margins and Paddings</a></th></tr>
-      <!-- 3 tests -->
-      <tr id="flex-container-margin-4.2" class="primary">
-        <td><strong>
-            <a href="flex-container-margin.xht">flex-container-margin</a></strong></td>
-        <td><a href="reference/flex-container-margin-ref.xht">=</a> </td>
-        <td></td>
-        <td>flex-container-margin-not-collapse-with-content-margin
-          <ul class="assert">
-            <li>The margins of adjacent flex items do not collapse.</li>
-          </ul>
-        </td>
-      </tr>
+      <!-- 2 tests -->
       <tr id="flex-margin-no-collapse-4.2" class="">
         <td>
             <a href="flex-margin-no-collapse.xht">flex-margin-no-collapse</a></td>
@@ -423,6 +421,9 @@
     <tbody id="s4.4.#collapsed-flex-item">
       <!-- 0 tests -->
     </tbody>
+    <tbody id="s4.4.#example-f6817be4">
+      <!-- 0 tests -->
+    </tbody>
     <tbody id="s4.4.#nav-about">
       <!-- 0 tests -->
     </tbody>
@@ -572,7 +573,7 @@
     <tbody id="s4.5.#min-size-opt">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s4.5.#valdef-min-width-min-height-auto">
+    <tbody id="s4.5.#valdef-min-width-auto">
       <!-- 0 tests -->
     </tbody>
   </table>
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-5.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-5.xht
index e416d9b40a3..fbdfd0d712e 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-5.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-5.xht
@@ -13,7 +13,7 @@
  <body>
 
   <h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
-  <h2>Ordering and Orientation (123 tests)</h2>
+  <h2>Ordering and Orientation (129 tests)</h2>
   <table width="100%">
     <col id="test-column"></col>
     <col id="refs-column"></col>
@@ -263,7 +263,7 @@
       <tr id="ttwf-reftest-flex-direction-column-reverse-5.1" class="primary">
         <td><strong>
             <a href="ttwf-reftest-flex-direction-column-reverse.xht">ttwf-reftest-flex-direction-column-reverse</a></strong></td>
-        <td><a href="reference/ttwf-reftest-flex-direction-column-ref.xht">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-direction-column-reverse-ref.xht">=</a> </td>
         <td></td>
         <td>flex-direction proprety - column-reverse
           <ul class="assert">
@@ -284,7 +284,7 @@
       </tr>
     </tbody>
     <tbody id="s5.1.#propdef-flex-direction">
-      <!-- 1 tests -->
+      <!-- 7 tests -->
       <tr id="flex-margin-no-collapse-5.1.#propdef-flex-direction" class="primary">
         <td><strong>
             <a href="flex-margin-no-collapse.xht">flex-margin-no-collapse</a></strong></td>
@@ -296,6 +296,54 @@
           </ul>
         </td>
       </tr>
+      <tr id="flexbox-writing-mode-001-5.1.#propdef-flex-direction" class="primary">
+        <td><strong>
+            <a href="flexbox-writing-mode-001.xht">flexbox-writing-mode-001</a></strong></td>
+        <td><a href="reference/flexbox-writing-mode-001-ref.xht">=</a> </td>
+        <td></td>
+        <td>Try various flex-flow values, with 'direction: ltr' and 'writing-mode: horizontal-tb'
+        </td>
+      </tr>
+      <tr id="flexbox-writing-mode-002-5.1.#propdef-flex-direction" class="primary">
+        <td><strong>
+            <a href="flexbox-writing-mode-002.xht">flexbox-writing-mode-002</a></strong></td>
+        <td><a href="reference/flexbox-writing-mode-002-ref.xht">=</a> </td>
+        <td></td>
+        <td>Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-rl'
+        </td>
+      </tr>
+      <tr id="flexbox-writing-mode-003-5.1.#propdef-flex-direction" class="primary">
+        <td><strong>
+            <a href="flexbox-writing-mode-003.xht">flexbox-writing-mode-003</a></strong></td>
+        <td><a href="reference/flexbox-writing-mode-003-ref.xht">=</a> </td>
+        <td></td>
+        <td>Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-lr'
+        </td>
+      </tr>
+      <tr id="flexbox-writing-mode-004-5.1.#propdef-flex-direction" class="primary">
+        <td><strong>
+            <a href="flexbox-writing-mode-004.xht">flexbox-writing-mode-004</a></strong></td>
+        <td><a href="reference/flexbox-writing-mode-004-ref.xht">=</a> </td>
+        <td></td>
+        <td>Try various flex-flow values, with 'direction: rtl' and 'writing-mode: horizontal-tb'
+        </td>
+      </tr>
+      <tr id="flexbox-writing-mode-005-5.1.#propdef-flex-direction" class="primary">
+        <td><strong>
+            <a href="flexbox-writing-mode-005.xht">flexbox-writing-mode-005</a></strong></td>
+        <td><a href="reference/flexbox-writing-mode-005-ref.xht">=</a> </td>
+        <td></td>
+        <td>Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-rl'
+        </td>
+      </tr>
+      <tr id="flexbox-writing-mode-006-5.1.#propdef-flex-direction" class="primary">
+        <td><strong>
+            <a href="flexbox-writing-mode-006.xht">flexbox-writing-mode-006</a></strong></td>
+        <td><a href="reference/flexbox-writing-mode-006-ref.xht">=</a> </td>
+        <td></td>
+        <td>Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-lr'
+        </td>
+      </tr>
     </tbody>
     <tbody id="s5.1.#valdef-flex-direction-column">
       <!-- 0 tests -->
@@ -740,7 +788,7 @@
       <tr id="ttwf-reftest-flex-wrap-5.2.#propdef-flex-wrap" class="primary">
         <td><strong>
             <a href="ttwf-reftest-flex-wrap.xht">ttwf-reftest-flex-wrap</a></strong></td>
-        <td><a href="reference/ttwf-reftest-flex-inline-ref.xht">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-wrap-ref.xht">=</a> </td>
         <td></td>
         <td>flex-wrap proprety - wrap
           <ul class="assert">
@@ -802,6 +850,9 @@
         </td>
       </tr>
     </tbody>
+    <tbody id="s5.3.#example-ce59c06d">
+      <!-- 0 tests -->
+    </tbody>
     <tbody id="s5.3.#propdef-flex-flow">
       <!-- 52 tests -->
       <tr id="css-box-justify-content-5.3.#propdef-flex-flow" class="">
@@ -1313,7 +1364,10 @@
         </td>
       </tr>
     </tbody>
-    <tbody id="s5.4.#order-modified-document-order">
+    <tbody id="s5.4.#example-6155594a">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s5.4.#order_modified-document-order">
       <!-- 0 tests -->
     </tbody>
     <tbody id="s5.4.#propdef-order">
@@ -1456,11 +1510,11 @@
           </ul>
         </td>
       </tr>
-      <tr id="order_value-5.4.#propdef-order" class="primary">
+      <tr id="order_value-5.4.#propdef-order" class="primary script">
         <td><strong>
             <a href="order_value.xht">order_value</a></strong></td>
         <td></td>
-        <td></td>
+        <td><abbr class="script" title="Executes tests in script">Script</abbr></td>
         <td>order_check
           <ul class="assert">
             <li>Check if the web engine can indentify order property.</li>
@@ -1488,6 +1542,9 @@
         <a href="http://www.w3.org/TR/css-flexbox-1/#order-accessibility">5.4.1 Reordering and Accessibility</a></th></tr>
       <!-- 0 tests -->
     </tbody>
+    <tbody id="s5.4.1.#example-465c9ea3">
+      <!-- 0 tests -->
+    </tbody>
   </table>
 
  </body>
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-6.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-6.xht
index e11e607c3e0..3f2bdafcb5d 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-6.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-6.xht
@@ -46,13 +46,19 @@
         </td>
       </tr>
     </tbody>
+    <tbody id="s6.#example-c8b950d1">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s6.#example-e4bd6579">
+      <!-- 0 tests -->
+    </tbody>
     <tbody id="s6.#flex-line">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s6.#multi-line">
+    <tbody id="s6.#multi_line">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s6.#single-line">
+    <tbody id="s6.#single_line">
       <!-- 0 tests -->
     </tbody>
   </table>
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-7.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-7.xht
index 11ecbc451ce..181788e79bf 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-7.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-7.xht
@@ -931,9 +931,6 @@
         </td>
       </tr>
     </tbody>
-    <tbody id="s7.1.#valdef-flex-auto">
-      <!-- 0 tests -->
-    </tbody>
     <tbody id="s7.1.#valdef-flex-flex-basis">
       <!-- 0 tests -->
     </tbody>
@@ -946,12 +943,12 @@
     <tbody id="s7.1.#valdef-flex-none">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s7.2">
+    <tbody id="s7.1.1">
       <tr><th colspan="4" scope="rowgroup">
-        <a href="#s7.2">+</a>
-        <a href="http://www.w3.org/TR/css-flexbox-1/#flex-common">7.2 Common Values of flex</a></th></tr>
+        <a href="#s7.1.1">+</a>
+        <a href="http://www.w3.org/TR/css-flexbox-1/#flex-common">7.1.1 Common Values of flex</a></th></tr>
       <!-- 5 tests -->
-      <tr id="flexbox_flex-auto-7.2" class="primary">
+      <tr id="flexbox_flex-auto-7.1.1" class="primary">
         <td><strong>
             <a href="flexbox_flex-auto.xht">flexbox_flex-auto</a></strong></td>
         <td><a href="reference/flexbox_flex-auto-ref.xht">=</a> </td>
@@ -959,7 +956,7 @@
         <td>flexbox | flex: auto
         </td>
       </tr>
-      <tr id="flexbox_flex-initial-7.2" class="primary">
+      <tr id="flexbox_flex-initial-7.1.1" class="primary">
         <td><strong>
             <a href="flexbox_flex-initial.xht">flexbox_flex-initial</a></strong></td>
         <td><a href="reference/flexbox_flex-initial-ref.xht">=</a> </td>
@@ -967,7 +964,7 @@
         <td>flexbox | flex: initial
         </td>
       </tr>
-      <tr id="flexbox_flex-initial-2-7.2" class="primary">
+      <tr id="flexbox_flex-initial-2-7.1.1" class="primary">
         <td><strong>
             <a href="flexbox_flex-initial-2.xht">flexbox_flex-initial-2</a></strong></td>
         <td><a href="reference/flexbox_flex-initial-2-ref.xht">=</a> </td>
@@ -975,7 +972,7 @@
         <td>flexbox | flex: initial
         </td>
       </tr>
-      <tr id="flexbox_flex-natural-7.2" class="primary">
+      <tr id="flexbox_flex-natural-7.1.1" class="primary">
         <td><strong>
             <a href="flexbox_flex-natural.xht">flexbox_flex-natural</a></strong></td>
         <td><a href="reference/flexbox_flex-natural-ref.xht">=</a> </td>
@@ -983,7 +980,7 @@
         <td>flexbox | flex: larger integer
         </td>
       </tr>
-      <tr id="flexbox_flex-none-7.2" class="primary">
+      <tr id="flexbox_flex-none-7.1.1" class="primary">
         <td><strong>
             <a href="flexbox_flex-none.xht">flexbox_flex-none</a></strong></td>
         <td><a href="reference/flexbox_flex-none-ref.xht">=</a> </td>
@@ -992,24 +989,24 @@
         </td>
       </tr>
     </tbody>
-    <tbody id="s7.2.#flex-initial">
+    <tbody id="s7.1.1.#flex-initial">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s7.3">
+    <tbody id="s7.2">
       <tr><th colspan="4" scope="rowgroup">
-        <a href="#s7.3">+</a>
-        <a href="http://www.w3.org/TR/css-flexbox-1/#flex-components">7.3 Components of Flexibility</a></th></tr>
+        <a href="#s7.2">+</a>
+        <a href="http://www.w3.org/TR/css-flexbox-1/#flex-components">7.2 Components of Flexibility</a></th></tr>
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s7.3.1">
+    <tbody id="s7.2.1">
       <tr><th colspan="4" scope="rowgroup">
-        <a href="#s7.3.1">+</a>
-        <a href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property">7.3.1 The flex-grow property</a></th></tr>
+        <a href="#s7.2.1">+</a>
+        <a href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property">7.2.1 The flex-grow property</a></th></tr>
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s7.3.1.#propdef-flex-grow">
+    <tbody id="s7.2.1.#propdef-flex-grow">
       <!-- 13 tests -->
-      <tr id="autoheight-regions-in-fixed-sized-flexbox-001-7.3.1.#propdef-flex-grow" class="ahem">
+      <tr id="autoheight-regions-in-fixed-sized-flexbox-001-7.2.1.#propdef-flex-grow" class="ahem">
         <td>
             <a href="autoheight-regions-in-fixed-sized-flexbox-001.xht">autoheight-regions-in-fixed-sized-flexbox-001</a></td>
         <td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-001-ref.xht">=</a> </td>
@@ -1020,7 +1017,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="autoheight-regions-in-fixed-sized-flexbox-002-7.3.1.#propdef-flex-grow" class="ahem">
+      <tr id="autoheight-regions-in-fixed-sized-flexbox-002-7.2.1.#propdef-flex-grow" class="ahem">
         <td>
             <a href="autoheight-regions-in-fixed-sized-flexbox-002.xht">autoheight-regions-in-fixed-sized-flexbox-002</a></td>
         <td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-002-ref.xht">=</a> </td>
@@ -1031,7 +1028,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="css-flexbox-img-expand-evenly-7.3.1.#propdef-flex-grow" class="primary">
+      <tr id="css-flexbox-img-expand-evenly-7.2.1.#propdef-flex-grow" class="primary">
         <td><strong>
             <a href="css-flexbox-img-expand-evenly.xht">css-flexbox-img-expand-evenly</a></strong></td>
         <td><a href="reference/css-flexbox-img-expand-evenly-ref.xht">=</a> </td>
@@ -1042,7 +1039,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flex-grow-001-7.3.1.#propdef-flex-grow" class="primary">
+      <tr id="flex-grow-001-7.2.1.#propdef-flex-grow" class="primary">
         <td><strong>
             <a href="flex-grow-001.xht">flex-grow-001</a></strong></td>
         <td><a href="reference/flex-grow-001-ref.xht">=</a> </td>
@@ -1053,7 +1050,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flex-grow-002-7.3.1.#propdef-flex-grow" class="primary">
+      <tr id="flex-grow-002-7.2.1.#propdef-flex-grow" class="primary">
         <td><strong>
             <a href="flex-grow-002.xht">flex-grow-002</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1064,7 +1061,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flex-grow-003-7.3.1.#propdef-flex-grow" class="primary">
+      <tr id="flex-grow-003-7.2.1.#propdef-flex-grow" class="primary">
         <td><strong>
             <a href="flex-grow-003.xht">flex-grow-003</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1075,7 +1072,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flex-grow-004-7.3.1.#propdef-flex-grow" class="primary">
+      <tr id="flex-grow-004-7.2.1.#propdef-flex-grow" class="primary">
         <td><strong>
             <a href="flex-grow-004.xht">flex-grow-004</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1086,7 +1083,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flex-grow-005-7.3.1.#propdef-flex-grow" class="primary">
+      <tr id="flex-grow-005-7.2.1.#propdef-flex-grow" class="primary">
         <td><strong>
             <a href="flex-grow-005.xht">flex-grow-005</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1097,7 +1094,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flex-grow-006-7.3.1.#propdef-flex-grow" class="primary">
+      <tr id="flex-grow-006-7.2.1.#propdef-flex-grow" class="primary">
         <td><strong>
             <a href="flex-grow-006.xht">flex-grow-006</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1108,7 +1105,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flexbox_computedstyle_flex-grow-0-7.3.1.#propdef-flex-grow" class="primary dom">
+      <tr id="flexbox_computedstyle_flex-grow-0-7.2.1.#propdef-flex-grow" class="primary dom">
         <td><strong>
             <a href="flexbox_computedstyle_flex-grow-0.xht">flexbox_computedstyle_flex-grow-0</a></strong></td>
         <td></td>
@@ -1116,7 +1113,7 @@
         <td>flexbox | computed style | flex-grow: 0
         </td>
       </tr>
-      <tr id="flexbox_computedstyle_flex-grow-invalid-7.3.1.#propdef-flex-grow" class="primary dom">
+      <tr id="flexbox_computedstyle_flex-grow-invalid-7.2.1.#propdef-flex-grow" class="primary dom">
         <td><strong>
             <a href="flexbox_computedstyle_flex-grow-invalid.xht">flexbox_computedstyle_flex-grow-invalid</a></strong></td>
         <td></td>
@@ -1124,7 +1121,7 @@
         <td>flexbox | computed style | flex-grow: negative
         </td>
       </tr>
-      <tr id="flexbox_computedstyle_flex-grow-number-7.3.1.#propdef-flex-grow" class="primary dom">
+      <tr id="flexbox_computedstyle_flex-grow-number-7.2.1.#propdef-flex-grow" class="primary dom">
         <td><strong>
             <a href="flexbox_computedstyle_flex-grow-number.xht">flexbox_computedstyle_flex-grow-number</a></strong></td>
         <td></td>
@@ -1132,7 +1129,7 @@
         <td>flexbox | computed style | flex-grow: number
         </td>
       </tr>
-      <tr id="flexbox_interactive_flex-grow-transitions-7.3.1.#propdef-flex-grow" class="primary interact">
+      <tr id="flexbox_interactive_flex-grow-transitions-7.2.1.#propdef-flex-grow" class="primary interact">
         <td><strong>
             <a href="flexbox_interactive_flex-grow-transitions.xht">flexbox_interactive_flex-grow-transitions</a></strong></td>
         <td></td>
@@ -1141,18 +1138,18 @@
         </td>
       </tr>
     </tbody>
-    <tbody id="s7.3.1.#valdef-flex-grow-number">
+    <tbody id="s7.2.1.#valdef-flex-grow-number">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s7.3.2">
+    <tbody id="s7.2.2">
       <tr><th colspan="4" scope="rowgroup">
-        <a href="#s7.3.2">+</a>
-        <a href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property">7.3.2 The flex-shrink property</a></th></tr>
+        <a href="#s7.2.2">+</a>
+        <a href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property">7.2.2 The flex-shrink property</a></th></tr>
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s7.3.2.#propdef-flex-shrink">
+    <tbody id="s7.2.2.#propdef-flex-shrink">
       <!-- 12 tests -->
-      <tr id="flex-shrink-001-7.3.2.#propdef-flex-shrink" class="primary">
+      <tr id="flex-shrink-001-7.2.2.#propdef-flex-shrink" class="primary">
         <td><strong>
             <a href="flex-shrink-001.xht">flex-shrink-001</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1163,7 +1160,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flex-shrink-002-7.3.2.#propdef-flex-shrink" class="primary">
+      <tr id="flex-shrink-002-7.2.2.#propdef-flex-shrink" class="primary">
         <td><strong>
             <a href="flex-shrink-002.xht">flex-shrink-002</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1174,7 +1171,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flex-shrink-003-7.3.2.#propdef-flex-shrink" class="primary">
+      <tr id="flex-shrink-003-7.2.2.#propdef-flex-shrink" class="primary">
         <td><strong>
             <a href="flex-shrink-003.xht">flex-shrink-003</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1185,7 +1182,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flex-shrink-004-7.3.2.#propdef-flex-shrink" class="primary">
+      <tr id="flex-shrink-004-7.2.2.#propdef-flex-shrink" class="primary">
         <td><strong>
             <a href="flex-shrink-004.xht">flex-shrink-004</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1196,7 +1193,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flex-shrink-005-7.3.2.#propdef-flex-shrink" class="primary">
+      <tr id="flex-shrink-005-7.2.2.#propdef-flex-shrink" class="primary">
         <td><strong>
             <a href="flex-shrink-005.xht">flex-shrink-005</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1207,7 +1204,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flex-shrink-006-7.3.2.#propdef-flex-shrink" class="primary">
+      <tr id="flex-shrink-006-7.2.2.#propdef-flex-shrink" class="primary">
         <td><strong>
             <a href="flex-shrink-006.xht">flex-shrink-006</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1218,7 +1215,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flex-shrink-007-7.3.2.#propdef-flex-shrink" class="primary">
+      <tr id="flex-shrink-007-7.2.2.#propdef-flex-shrink" class="primary">
         <td><strong>
             <a href="flex-shrink-007.xht">flex-shrink-007</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1229,7 +1226,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flexbox_computedstyle_flex-shrink-0-7.3.2.#propdef-flex-shrink" class="primary dom">
+      <tr id="flexbox_computedstyle_flex-shrink-0-7.2.2.#propdef-flex-shrink" class="primary dom">
         <td><strong>
             <a href="flexbox_computedstyle_flex-shrink-0.xht">flexbox_computedstyle_flex-shrink-0</a></strong></td>
         <td></td>
@@ -1237,7 +1234,7 @@
         <td>flexbox | computed style | flex-shrink: 0
         </td>
       </tr>
-      <tr id="flexbox_computedstyle_flex-shrink-invalid-7.3.2.#propdef-flex-shrink" class="primary dom">
+      <tr id="flexbox_computedstyle_flex-shrink-invalid-7.2.2.#propdef-flex-shrink" class="primary dom">
         <td><strong>
             <a href="flexbox_computedstyle_flex-shrink-invalid.xht">flexbox_computedstyle_flex-shrink-invalid</a></strong></td>
         <td></td>
@@ -1245,7 +1242,7 @@
         <td>flexbox | computed style | flex-shrink: negative
         </td>
       </tr>
-      <tr id="flexbox_computedstyle_flex-shrink-number-7.3.2.#propdef-flex-shrink" class="primary dom">
+      <tr id="flexbox_computedstyle_flex-shrink-number-7.2.2.#propdef-flex-shrink" class="primary dom">
         <td><strong>
             <a href="flexbox_computedstyle_flex-shrink-number.xht">flexbox_computedstyle_flex-shrink-number</a></strong></td>
         <td></td>
@@ -1253,7 +1250,7 @@
         <td>flexbox | computed style | flex-shrink: number
         </td>
       </tr>
-      <tr id="flexbox_interactive_flex-shrink-transitions-7.3.2.#propdef-flex-shrink" class="primary interact">
+      <tr id="flexbox_interactive_flex-shrink-transitions-7.2.2.#propdef-flex-shrink" class="primary interact">
         <td><strong>
             <a href="flexbox_interactive_flex-shrink-transitions.xht">flexbox_interactive_flex-shrink-transitions</a></strong></td>
         <td></td>
@@ -1261,7 +1258,7 @@
         <td>flexbox | transitioned flex-shrink
         </td>
       </tr>
-      <tr id="flexbox_interactive_flex-shrink-transitions-invalid-7.3.2.#propdef-flex-shrink" class="primary interact">
+      <tr id="flexbox_interactive_flex-shrink-transitions-invalid-7.2.2.#propdef-flex-shrink" class="primary interact">
         <td><strong>
             <a href="flexbox_interactive_flex-shrink-transitions-invalid.xht">flexbox_interactive_flex-shrink-transitions-invalid</a></strong></td>
         <td></td>
@@ -1270,15 +1267,15 @@
         </td>
       </tr>
     </tbody>
-    <tbody id="s7.3.2.#valdef-flex-shrink-number">
+    <tbody id="s7.2.2.#valdef-flex-shrink-number">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s7.3.3">
+    <tbody id="s7.2.3">
       <tr><th colspan="4" scope="rowgroup">
-        <a href="#s7.3.3">+</a>
-        <a href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">7.3.3 The flex-basis property</a></th></tr>
+        <a href="#s7.2.3">+</a>
+        <a href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">7.2.3 The flex-basis property</a></th></tr>
       <!-- 10 tests -->
-      <tr id="flexbox_computedstyle_flex-basis-0-7.3.3" class="primary dom">
+      <tr id="flexbox_computedstyle_flex-basis-0-7.2.3" class="primary dom">
         <td><strong>
             <a href="flexbox_computedstyle_flex-basis-0.xht">flexbox_computedstyle_flex-basis-0</a></strong></td>
         <td></td>
@@ -1286,7 +1283,7 @@
         <td>flexbox | computed style | flex-basis: 0
         </td>
       </tr>
-      <tr id="flexbox_computedstyle_flex-basis-0percent-7.3.3" class="primary dom">
+      <tr id="flexbox_computedstyle_flex-basis-0percent-7.2.3" class="primary dom">
         <td><strong>
             <a href="flexbox_computedstyle_flex-basis-0percent.xht">flexbox_computedstyle_flex-basis-0percent</a></strong></td>
         <td></td>
@@ -1294,7 +1291,7 @@
         <td>flexbox | computed style | flex-basis: 0%
         </td>
       </tr>
-      <tr id="flexbox_computedstyle_flex-basis-auto-7.3.3" class="primary dom">
+      <tr id="flexbox_computedstyle_flex-basis-auto-7.2.3" class="primary dom">
         <td><strong>
             <a href="flexbox_computedstyle_flex-basis-auto.xht">flexbox_computedstyle_flex-basis-auto</a></strong></td>
         <td></td>
@@ -1302,7 +1299,7 @@
         <td>flexbox | computed style | flex-basis: auto
         </td>
       </tr>
-      <tr id="flexbox_computedstyle_flex-basis-percent-7.3.3" class="primary dom">
+      <tr id="flexbox_computedstyle_flex-basis-percent-7.2.3" class="primary dom">
         <td><strong>
             <a href="flexbox_computedstyle_flex-basis-percent.xht">flexbox_computedstyle_flex-basis-percent</a></strong></td>
         <td></td>
@@ -1310,7 +1307,7 @@
         <td>flexbox | computed style | flex-basis: percent
         </td>
       </tr>
-      <tr id="flexbox_flex-basis-7.3.3" class="primary">
+      <tr id="flexbox_flex-basis-7.2.3" class="primary">
         <td><strong>
             <a href="flexbox_flex-basis.xht">flexbox_flex-basis</a></strong></td>
         <td><a href="reference/flexbox_flex-basis-ref.xht">=</a> </td>
@@ -1318,7 +1315,7 @@
         <td>flexbox | flex-basis: percentage
         </td>
       </tr>
-      <tr id="flexbox_flex-basis-shrink-7.3.3" class="primary">
+      <tr id="flexbox_flex-basis-shrink-7.2.3" class="primary">
         <td><strong>
             <a href="flexbox_flex-basis-shrink.xht">flexbox_flex-basis-shrink</a></strong></td>
         <td><a href="reference/flexbox_flex-basis-shrink-ref.xht">=</a> </td>
@@ -1326,7 +1323,7 @@
         <td>flexbox | flex-basis: percentage, flex-shrink: +integer
         </td>
       </tr>
-      <tr id="flexbox_flex-natural-mixed-basis-7.3.3" class="primary">
+      <tr id="flexbox_flex-natural-mixed-basis-7.2.3" class="primary">
         <td><strong>
             <a href="flexbox_flex-natural-mixed-basis.xht">flexbox_flex-natural-mixed-basis</a></strong></td>
         <td><a href="reference/flexbox_flex-natural-mixed-basis-ref.xht">=</a> </td>
@@ -1334,7 +1331,7 @@
         <td>flexbox | flex: larger integer, mixed basis
         </td>
       </tr>
-      <tr id="flexbox_flex-natural-mixed-basis-auto-7.3.3" class="primary">
+      <tr id="flexbox_flex-natural-mixed-basis-auto-7.2.3" class="primary">
         <td><strong>
             <a href="flexbox_flex-natural-mixed-basis-auto.xht">flexbox_flex-natural-mixed-basis-auto</a></strong></td>
         <td><a href="reference/flexbox_flex-natural-mixed-basis-auto-ref.xht">=</a> </td>
@@ -1342,7 +1339,7 @@
         <td>flexbox | flex: larger integer, mixed basis, auto
         </td>
       </tr>
-      <tr id="flexbox_flex-natural-variable-auto-basis-7.3.3" class="primary">
+      <tr id="flexbox_flex-natural-variable-auto-basis-7.2.3" class="primary">
         <td><strong>
             <a href="flexbox_flex-natural-variable-auto-basis.xht">flexbox_flex-natural-variable-auto-basis</a></strong></td>
         <td><a href="reference/flexbox_flex-natural-variable-auto-basis-ref.xht">=</a> </td>
@@ -1350,7 +1347,7 @@
         <td>flexbox | flex: larger integer, auto basis
         </td>
       </tr>
-      <tr id="flexbox_interactive_flex-basis-transitions-7.3.3" class="primary interact">
+      <tr id="flexbox_interactive_flex-basis-transitions-7.2.3" class="primary interact">
         <td><strong>
             <a href="flexbox_interactive_flex-basis-transitions.xht">flexbox_interactive_flex-basis-transitions</a></strong></td>
         <td></td>
@@ -1359,12 +1356,15 @@
         </td>
       </tr>
     </tbody>
-    <tbody id="s7.3.3.#issue-753aff05">
+    <tbody id="s7.2.3.#auto">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s7.2.3.#content">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s7.3.3.#propdef-flex-basis">
+    <tbody id="s7.2.3.#propdef-flex-basis">
       <!-- 9 tests -->
-      <tr id="flex-basis-001-7.3.3.#propdef-flex-basis" class="primary">
+      <tr id="flex-basis-001-7.2.3.#propdef-flex-basis" class="primary">
         <td><strong>
             <a href="flex-basis-001.xht">flex-basis-001</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1375,7 +1375,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flex-basis-002-7.3.3.#propdef-flex-basis" class="primary">
+      <tr id="flex-basis-002-7.2.3.#propdef-flex-basis" class="primary">
         <td><strong>
             <a href="flex-basis-002.xht">flex-basis-002</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1386,7 +1386,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flex-basis-003-7.3.3.#propdef-flex-basis" class="primary">
+      <tr id="flex-basis-003-7.2.3.#propdef-flex-basis" class="primary">
         <td><strong>
             <a href="flex-basis-003.xht">flex-basis-003</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1397,7 +1397,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flex-basis-004-7.3.3.#propdef-flex-basis" class="primary">
+      <tr id="flex-basis-004-7.2.3.#propdef-flex-basis" class="primary">
         <td><strong>
             <a href="flex-basis-004.xht">flex-basis-004</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1408,7 +1408,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flex-basis-005-7.3.3.#propdef-flex-basis" class="primary">
+      <tr id="flex-basis-005-7.2.3.#propdef-flex-basis" class="primary">
         <td><strong>
             <a href="flex-basis-005.xht">flex-basis-005</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1419,7 +1419,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flex-basis-006-7.3.3.#propdef-flex-basis" class="primary">
+      <tr id="flex-basis-006-7.2.3.#propdef-flex-basis" class="primary">
         <td><strong>
             <a href="flex-basis-006.xht">flex-basis-006</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1430,7 +1430,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flex-basis-007-7.3.3.#propdef-flex-basis" class="primary">
+      <tr id="flex-basis-007-7.2.3.#propdef-flex-basis" class="primary">
         <td><strong>
             <a href="flex-basis-007.xht">flex-basis-007</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1441,7 +1441,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flex-basis-008-7.3.3.#propdef-flex-basis" class="primary">
+      <tr id="flex-basis-008-7.2.3.#propdef-flex-basis" class="primary">
         <td><strong>
             <a href="flex-basis-008.xht">flex-basis-008</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@@ -1452,7 +1452,7 @@
           </ul>
         </td>
       </tr>
-      <tr id="flexbox_flex-natural-variable-zero-basis-7.3.3.#propdef-flex-basis" class="primary">
+      <tr id="flexbox_flex-natural-variable-zero-basis-7.2.3.#propdef-flex-basis" class="primary">
         <td><strong>
             <a href="flexbox_flex-natural-variable-zero-basis.xht">flexbox_flex-natural-variable-zero-basis</a></strong></td>
         <td><a href="reference/flexbox_flex-natural-variable-zero-basis-ref.xht">=</a> </td>
@@ -1461,9 +1461,6 @@
         </td>
       </tr>
     </tbody>
-    <tbody id="s7.3.3.#valdef-flex-basis-main-size">
-      <!-- 0 tests -->
-    </tbody>
   </table>
 
  </body>
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-8.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-8.xht
index 64b38295610..c7245adcb4e 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-8.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-8.xht
@@ -101,6 +101,12 @@
     <tbody id="s8.1.#auto-bar">
       <!-- 0 tests -->
     </tbody>
+    <tbody id="s8.1.#example-30f9440a">
+      <!-- 0 tests -->
+    </tbody>
+    <tbody id="s8.1.#example-c2f4f7f3">
+      <!-- 0 tests -->
+    </tbody>
     <tbody id="s8.1.#login">
       <!-- 0 tests -->
     </tbody>
@@ -1282,19 +1288,19 @@
     <tbody id="s8.3.#stretched">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s8.3.#valdef-align-items-align-self-baseline">
+    <tbody id="s8.3.#valdef-align-items-baseline">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s8.3.#valdef-align-items-align-self-center">
+    <tbody id="s8.3.#valdef-align-items-center">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s8.3.#valdef-align-items-align-self-flex-end">
+    <tbody id="s8.3.#valdef-align-items-flex-end">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s8.3.#valdef-align-items-align-self-flex-start">
+    <tbody id="s8.3.#valdef-align-items-flex-start">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s8.3.#valdef-align-items-align-self-stretch">
+    <tbody id="s8.3.#valdef-align-items-stretch">
       <!-- 0 tests -->
     </tbody>
     <tbody id="s8.3.#valdef-align-self-auto">
@@ -1586,7 +1592,7 @@
             <a href="ttwf-reftest-flex-align-content-center.xht">ttwf-reftest-flex-align-content-center</a></strong></td>
         <td><a href="reference/ttwf-reftest-flex-align-content-center-ref.xht">=</a> </td>
         <td></td>
-        <td>align-content proprety - center
+        <td>align-content property - center
           <ul class="assert">
             <li>Statement describing what the test case is asserting</li>
           </ul>
@@ -1597,7 +1603,7 @@
             <a href="ttwf-reftest-flex-align-content-end.xht">ttwf-reftest-flex-align-content-end</a></strong></td>
         <td><a href="reference/ttwf-reftest-flex-align-content-end-ref.xht">=</a> </td>
         <td></td>
-        <td>align-content proprety - flex-end
+        <td>align-content property - flex-end
           <ul class="assert">
             <li>Statement describing what the test case is asserting</li>
           </ul>
@@ -1606,9 +1612,9 @@
       <tr id="ttwf-reftest-flex-align-content-space-around-8.4" class="primary">
         <td><strong>
             <a href="ttwf-reftest-flex-align-content-space-around.xht">ttwf-reftest-flex-align-content-space-around</a></strong></td>
-        <td><a href="reference/ttwf-reftest-flex-align-content-end-ref.xht">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-align-content-space-around-ref.xht">=</a> </td>
         <td></td>
-        <td>align-content proprety - flex-end
+        <td>align-content property - space-around
           <ul class="assert">
             <li>Statement describing what the test case is asserting</li>
           </ul>
@@ -1617,9 +1623,9 @@
       <tr id="ttwf-reftest-flex-align-content-space-between-8.4" class="primary">
         <td><strong>
             <a href="ttwf-reftest-flex-align-content-space-between.xht">ttwf-reftest-flex-align-content-space-between</a></strong></td>
-        <td><a href="reference/ttwf-reftest-flex-align-content-end-ref.xht">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-align-content-space-between-ref.xht">=</a> </td>
         <td></td>
-        <td>align-content proprety - flex-end
+        <td>align-content property - space-between
           <ul class="assert">
             <li>Statement describing what the test case is asserting</li>
           </ul>
@@ -1628,9 +1634,9 @@
       <tr id="ttwf-reftest-flex-align-content-start-8.4" class="primary">
         <td><strong>
             <a href="ttwf-reftest-flex-align-content-start.xht">ttwf-reftest-flex-align-content-start</a></strong></td>
-        <td><a href="reference/ttwf-reftest-flex-align-content-end-ref.xht">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-align-content-start-ref.xht">=</a> </td>
         <td></td>
-        <td>align-content proprety - flex-end
+        <td>align-content property - flex-start
           <ul class="assert">
             <li>Statement describing what the test case is asserting</li>
           </ul>
@@ -1776,10 +1782,10 @@
         </td>
       </tr>
     </tbody>
-    <tbody id="s8.5.#cross-axis-baseline">
+    <tbody id="s8.5.#cross_axis-baseline">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s8.5.#main-axis-baseline">
+    <tbody id="s8.5.#main_axis-baseline">
       <!-- 0 tests -->
     </tbody>
   </table>
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-9.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-9.xht
index 4eb9bb6d64b..176fa40ff48 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-9.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-9.xht
@@ -13,7 +13,7 @@
  <body>
 
   <h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
-  <h2>Flex Layout Algorithm (58 tests)</h2>
+  <h2>Flex Layout Algorithm (61 tests)</h2>
   <table width="100%">
     <col id="test-column"></col>
     <col id="refs-column"></col>
@@ -31,7 +31,7 @@
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s9">+</a>
         <a href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">9 Flex Layout Algorithm</a></th></tr>
-      <!-- 46 tests -->
+      <!-- 49 tests -->
       <tr id="autoheight-flexbox-001-9" class="">
         <td>
             <a href="autoheight-flexbox-001.xht">autoheight-flexbox-001</a></td>
@@ -447,6 +447,30 @@
         <td>Testing sizing of an auto-sized vertical flex container with min-width and max-width constraints
         </td>
       </tr>
+      <tr id="flexbox-writing-mode-007-9" class="primary">
+        <td><strong>
+            <a href="flexbox-writing-mode-007.xht">flexbox-writing-mode-007</a></strong></td>
+        <td><a href="reference/flexbox-writing-mode-007-ref.xht">=</a> </td>
+        <td></td>
+        <td>Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode
+        </td>
+      </tr>
+      <tr id="flexbox-writing-mode-008-9" class="primary">
+        <td><strong>
+            <a href="flexbox-writing-mode-008.xht">flexbox-writing-mode-008</a></strong></td>
+        <td><a href="reference/flexbox-writing-mode-008-ref.xht">=</a> </td>
+        <td></td>
+        <td>Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode
+        </td>
+      </tr>
+      <tr id="flexbox-writing-mode-009-9" class="primary">
+        <td><strong>
+            <a href="flexbox-writing-mode-009.xht">flexbox-writing-mode-009</a></strong></td>
+        <td><a href="reference/flexbox-writing-mode-009-ref.xht">=</a> </td>
+        <td></td>
+        <td>Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode
+        </td>
+      </tr>
       <tr id="row-flexbox-break-9" class="ahem">
         <td>
             <a href="row-flexbox-break.xht">row-flexbox-break</a></td>
@@ -486,6 +510,9 @@
     <tbody id="s9.2.#algo-main-item">
       <!-- 0 tests -->
     </tbody>
+    <tbody id="s9.2.#example-5ea64ac4">
+      <!-- 0 tests -->
+    </tbody>
     <tbody id="s9.2.#flex-base-size">
       <!-- 0 tests -->
     </tbody>
@@ -690,16 +717,16 @@
         <a href="http://www.w3.org/TR/css-flexbox-1/#intrinsic-sizes">9.9 Intrinsic Sizes</a></th></tr>
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s9.9.#max-content-cross-size">
+    <tbody id="s9.9.#max_content-cross-size">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s9.9.#max-content-main-size">
+    <tbody id="s9.9.#max_content-main-size">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s9.9.#min-content-cross-size">
+    <tbody id="s9.9.#min_content-cross-size">
       <!-- 0 tests -->
     </tbody>
-    <tbody id="s9.9.#min-content-main-size">
+    <tbody id="s9.9.#min_content-main-size">
       <!-- 0 tests -->
     </tbody>
   </table>
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-container-margin.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-container-margin.xht
deleted file mode 100644
index 4e2b5d8e963..00000000000
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-container-margin.xht
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml"><head>
-<title>CSS Test: flex-container-margin-not-collapse-with-content-margin</title>
-<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu" />
-<link href="http://dev.w3.org/csswg/css-flexbox-1/#item-margins" rel="help" />
-<link href="reference/flex-container-margin-ref.xht" rel="match" />
-<meta content="The margins of adjacent flex items do not collapse." name="assert" />
-<style>
-    .flex-container{
-        display: flex;
-        margin:20px;
-        background: #333;
-    }
-    .flex-item{
-        width:50px;
-        height:50px;
-        margin:20px;
-        background: #eee;
-    }
-</style>
-</head>
-<body>
-    <div class="flex-container">
-        <div class="flex-item"></div>
-        <div class="flex-item"></div>
-        <div class="flex-item"></div>
-    </div>
-
-
-</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-margin-no-collapse.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-margin-no-collapse.xht
index e732ad6805b..b0ff656e29e 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-margin-no-collapse.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-margin-no-collapse.xht
@@ -21,6 +21,7 @@
 			width: 100px;
 			height: 100px;
 			background-color: green;
+			flex: none;
 		}
 
 		#box1 {
@@ -49,4 +50,5 @@
 		<div class="box" id="box2"></div>
 	</div>
 
+
 </body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-001.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-001.xht
new file mode 100644
index 00000000000..57397b1db2e
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-001.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head>
+  <title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: horizontal-tb'</title>
+  <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
+  <link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction" rel="help" />
+  <link href="reference/flexbox-writing-mode-001-ref.xht" rel="match" />
+  <meta charset="utf-8" />
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      direction: ltr;
+      writing-mode: horizontal-tb;
+    }
+    .flexContainer &gt; * {
+      width: 20px;
+      height: 15px;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div style="flex-flow: row wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: row wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: row-reverse wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: row-reverse wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+  <div style="flex-flow: column wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: column wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: column-reverse wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: column-reverse wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-002.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-002.xht
new file mode 100644
index 00000000000..43b346bf277
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-002.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head>
+  <title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-rl'</title>
+  <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
+  <link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction" rel="help" />
+  <link href="reference/flexbox-writing-mode-002-ref.xht" rel="match" />
+  <meta charset="utf-8" />
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      direction: ltr;
+      writing-mode: vertical-rl;
+    }
+    .flexContainer &gt; * {
+      width: 20px;
+      height: 15px;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div style="flex-flow: row wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: row wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: row-reverse wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: row-reverse wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+  <div style="flex-flow: column wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: column wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: column-reverse wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: column-reverse wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-003.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-003.xht
new file mode 100644
index 00000000000..3a591cea980
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-003.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head>
+  <title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-lr'</title>
+  <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
+  <link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction" rel="help" />
+  <link href="reference/flexbox-writing-mode-003-ref.xht" rel="match" />
+  <meta charset="utf-8" />
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      direction: ltr;
+      writing-mode: vertical-lr;
+    }
+    .flexContainer &gt; * {
+      width: 20px;
+      height: 15px;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div style="flex-flow: row wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: row wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: row-reverse wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: row-reverse wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+  <div style="flex-flow: column wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: column wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: column-reverse wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: column-reverse wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-004.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-004.xht
new file mode 100644
index 00000000000..adfbab431b8
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-004.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head>
+  <title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: horizontal-tb'</title>
+  <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
+  <link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction" rel="help" />
+  <link href="reference/flexbox-writing-mode-004-ref.xht" rel="match" />
+  <meta charset="utf-8" />
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      direction: rtl;
+      writing-mode: horizontal-tb;
+    }
+    .flexContainer &gt; * {
+      width: 20px;
+      height: 15px;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div style="flex-flow: row wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: row wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: row-reverse wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: row-reverse wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+  <div style="flex-flow: column wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: column wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: column-reverse wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: column-reverse wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-005.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-005.xht
new file mode 100644
index 00000000000..3eee7a62f2b
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-005.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head>
+  <title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-rl'</title>
+  <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
+  <link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction" rel="help" />
+  <link href="reference/flexbox-writing-mode-005-ref.xht" rel="match" />
+  <meta charset="utf-8" />
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      direction: rtl;
+      writing-mode: vertical-rl;
+    }
+    .flexContainer &gt; * {
+      width: 20px;
+      height: 15px;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div style="flex-flow: row wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: row wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: row-reverse wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: row-reverse wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+  <div style="flex-flow: column wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: column wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: column-reverse wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: column-reverse wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-006.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-006.xht
new file mode 100644
index 00000000000..6719f1cfed7
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-006.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head>
+  <title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-lr'</title>
+  <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
+  <link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction" rel="help" />
+  <link href="reference/flexbox-writing-mode-006-ref.xht" rel="match" />
+  <meta charset="utf-8" />
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      direction: rtl;
+      writing-mode: vertical-lr;
+    }
+    .flexContainer &gt; * {
+      width: 20px;
+      height: 15px;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div style="flex-flow: row wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: row wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: row-reverse wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: row-reverse wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+  <div style="flex-flow: column wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: column wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: column-reverse wrap" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div style="flex-flow: column-reverse wrap-reverse" class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-007.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-007.xht
new file mode 100644
index 00000000000..6da4b02e24e
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-007.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head>
+  <title>CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title>
+  <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
+  <link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help" />
+  <link href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode" rel="help" />
+  <link href="reference/flexbox-writing-mode-007-ref.xht" rel="match" />
+  <meta charset="utf-8" />
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      writing-mode: horizontal-tb;
+      flex-flow: row wrap;
+    }
+    .flexContainer &gt; * {
+      width: 20px;
+      height: 15px;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+
+    /* Classes applied to flex container, to customize its children
+     * (which should not affect their sizing):
+     */
+    .kids_horizontal_tb &gt; * {
+      writing-mode: horizontal-tb;
+    }
+    .kids_vertical_lr &gt; * {
+      writing-mode: vertical-lr;
+    }
+    .kids_vertical_rl &gt; * {
+      writing-mode: vertical-rl;
+    }
+
+  </style>
+</head>
+<body>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_horizontal_tb">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_vertical_lr">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_vertical_rl">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-008.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-008.xht
new file mode 100644
index 00000000000..40cd0717f59
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-008.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head>
+  <title>CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title>
+  <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
+  <link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help" />
+  <link href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode" rel="help" />
+  <link href="reference/flexbox-writing-mode-008-ref.xht" rel="match" />
+  <meta charset="utf-8" />
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      writing-mode: vertical-lr;
+      flex-flow: row wrap;
+    }
+    .flexContainer &gt; * {
+      width: 20px;
+      height: 15px;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+
+    /* Classes applied to flex container, to customize its children
+     * (which should not affect their sizing):
+     */
+    .kids_horizontal_tb &gt; * {
+      writing-mode: horizontal-tb;
+    }
+    .kids_vertical_lr &gt; * {
+      writing-mode: vertical-lr;
+    }
+    .kids_vertical_rl &gt; * {
+      writing-mode: vertical-rl;
+    }
+
+  </style>
+</head>
+<body>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_horizontal_tb">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_vertical_lr">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_vertical_rl">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-009.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-009.xht
new file mode 100644
index 00000000000..81d43b61550
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-writing-mode-009.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head>
+  <title>CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title>
+  <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
+  <link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help" />
+  <link href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode" rel="help" />
+  <link href="reference/flexbox-writing-mode-009-ref.xht" rel="match" />
+  <meta charset="utf-8" />
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      writing-mode: vertical-rl;
+      flex-flow: row wrap;
+    }
+    .flexContainer &gt; * {
+      width: 20px;
+      height: 15px;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+
+    /* Classes applied to flex container, to customize its children
+     * (which should not affect their sizing):
+     */
+    .kids_horizontal_tb &gt; * {
+      writing-mode: horizontal-tb;
+    }
+    .kids_vertical_lr &gt; * {
+      writing-mode: vertical-lr;
+    }
+    .kids_vertical_rl &gt; * {
+      writing-mode: vertical-rl;
+    }
+
+  </style>
+</head>
+<body>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_horizontal_tb">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_vertical_lr">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_vertical_rl">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/order_value.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/order_value.xht
index cc993fa4687..a73bd67fc11 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/order_value.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/order_value.xht
@@ -16,8 +16,8 @@
 	order: -1;
       }
     </style>
-    <script src='/resources/testharness.js"'></script>
-    <script src='/resources/testharnessreport.js"'></script>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
   </head>
   <body>
     <div id="log"></div>
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-container-margin-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-container-margin-ref.xht
deleted file mode 100644
index 38187fe38ca..00000000000
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-container-margin-ref.xht
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml"><head>
-<title>CSS Test: flex-container-margin-not-collapse-with-content-margin</title>
-<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu" />
-<style>
-    .flex-container{
-        display:block;
-        margin:20px;
-        background: #333;
-        line-height: 0px;
-    }
-    .flex-item{
-        display: inline-block;
-        width:50px;
-        height:50px;
-        margin:20px 20px;
-        background: #eee;
-    }
-    .flex-item.first{
-        margin-left:20px;
-    }
-    .flex-item.last{
-        margin-right: 20px;
-    }
-</style>
-</head>
-<body>
-    <div class="flex-container">
-        <div class="flex-item first"></div><div class="flex-item"></div><div class="flex-item last"></div>
-    </div>
-
-
-</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-001-ref.xht
new file mode 100644
index 00000000000..3dd9c2f6a0b
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-001-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head>
+  <title>CSS Reftest Reference</title>
+  <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
+  <meta charset="utf-8" />
+  <style>
+    .flexContainer {
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      /* Testcase has direction: ltr; */
+      /* Testcase has writing-mode: horizontal-tb; */
+    }
+    .flexContainer &gt; * {
+      width: 20px;
+      height: 15px;
+      float: left;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- row wrap -->
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- row wrap-reverse -->
+    <div class="item3"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap -->
+    <div class="item2"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap-reverse -->
+    <div class="item4"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item1"></div>
+  </div>
+
+  <div class="flexContainer"><!-- column wrap -->
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- column wrap-reverse -->
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap -->
+    <div class="item2"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap-reverse -->
+    <div class="item4"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item1"></div>
+  </div>
+
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-002-ref.xht
new file mode 100644
index 00000000000..dfcf6f299d3
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-002-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head>
+  <title>CSS Reftest Reference</title>
+  <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
+  <meta charset="utf-8" />
+  <style>
+    .flexContainer {
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      /* Testcase has direction: ltr; */
+      /* Testcase has writing-mode: vertical-rl; */
+    }
+    .flexContainer &gt; * {
+      width: 20px;
+      height: 15px;
+      float: left;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- row wrap -->
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- row wrap-reverse -->
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap -->
+    <div class="item4"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item1"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap-reverse -->
+    <div class="item2"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item3"></div>
+  </div>
+
+  <div class="flexContainer"><!-- column wrap -->
+    <div class="item2"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- column wrap-reverse -->
+    <div class="item4"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item1"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap -->
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap-reverse -->
+    <div class="item3"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item2"></div>
+  </div>
+
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-003-ref.xht
new file mode 100644
index 00000000000..06ec4b44c7a
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-003-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head>
+  <title>CSS Reftest Reference</title>
+  <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
+  <meta charset="utf-8" />
+  <style>
+    .flexContainer {
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      /* Testcase has direction: ltr; */
+      /* Testcase has writing-mode: vertical-lr; */
+    }
+    .flexContainer &gt; * {
+      width: 20px;
+      height: 15px;
+      float: left;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- row wrap -->
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- row wrap-reverse -->
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap -->
+    <div class="item2"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap-reverse -->
+    <div class="item4"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item1"></div>
+  </div>
+
+  <div class="flexContainer"><!-- column wrap -->
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- column wrap-reverse -->
+    <div class="item3"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap -->
+    <div class="item2"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap-reverse -->
+    <div class="item4"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item1"></div>
+  </div>
+
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-004-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-004-ref.xht
new file mode 100644
index 00000000000..c097c0de621
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-004-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head>
+  <title>CSS Reftest Reference</title>
+  <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
+  <meta charset="utf-8" />
+  <style>
+    .flexContainer {
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      /* Testcase has direction: rtl; */
+      /* Testcase has writing-mode: horizontal-tb; */
+    }
+    .flexContainer &gt; * {
+      width: 20px;
+      height: 15px;
+      float: left;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- row wrap -->
+    <div class="item2"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- row wrap-reverse -->
+    <div class="item4"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item1"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap -->
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap-reverse -->
+    <div class="item3"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item2"></div>
+  </div>
+
+  <div class="flexContainer"><!-- column wrap -->
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- column wrap-reverse -->
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap -->
+    <div class="item4"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item1"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap-reverse -->
+    <div class="item2"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item3"></div>
+  </div>
+
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-005-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-005-ref.xht
new file mode 100644
index 00000000000..c6e566c1be0
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-005-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head>
+  <title>CSS Reftest Reference</title>
+  <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
+  <meta charset="utf-8" />
+  <style>
+    .flexContainer {
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      /* Testcase has direction: rtl; */
+      /* Testcase has writing-mode: vertical-rl; */
+    }
+    .flexContainer &gt; * {
+      width: 20px;
+      height: 15px;
+      float: left;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- row wrap -->
+    <div class="item4"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item1"></div>
+  </div>
+  <div class="flexContainer"><!-- row wrap-reverse -->
+    <div class="item2"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap -->
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap-reverse -->
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+
+  <div class="flexContainer"><!-- column wrap -->
+    <div class="item4"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item1"></div>
+  </div>
+  <div class="flexContainer"><!-- column wrap-reverse -->
+    <div class="item2"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap -->
+    <div class="item3"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap-reverse -->
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-006-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-006-ref.xht
new file mode 100644
index 00000000000..da554ffeed6
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-006-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head>
+  <title>CSS Reftest Reference</title>
+  <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
+  <meta charset="utf-8" />
+  <style>
+    .flexContainer {
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      /* Testcase has direction: rtl; */
+      /* Testcase has writing-mode: vertical-lr; */
+    }
+    .flexContainer &gt; * {
+      width: 20px;
+      height: 15px;
+      float: left;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- row wrap -->
+    <div class="item2"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- row wrap-reverse -->
+    <div class="item4"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item1"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap -->
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap-reverse -->
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+
+  <div class="flexContainer"><!-- column wrap -->
+    <div class="item3"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- column wrap-reverse -->
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap -->
+    <div class="item4"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item1"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap-reverse -->
+    <div class="item2"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item3"></div>
+  </div>
+
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-007-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-007-ref.xht
new file mode 100644
index 00000000000..8d93f8a2e32
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-007-ref.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head>
+  <title>CSS Reftest Reference</title>
+  <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
+  <meta charset="utf-8" />
+  <style>
+    .flexContainer {
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+    }
+    .flexContainer &gt; * {
+      width: 20px;
+      height: 15px;
+      float: left;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-008-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-008-ref.xht
new file mode 100644
index 00000000000..fd584eaec58
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-008-ref.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head>
+  <title>CSS Reftest Reference</title>
+  <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
+  <meta charset="utf-8" />
+  <style>
+    .flexContainer {
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+    }
+    .flexContainer &gt; * {
+      width: 20px;
+      height: 15px;
+      float: left;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-009-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-009-ref.xht
new file mode 100644
index 00000000000..2753f654518
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-writing-mode-009-ref.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head>
+  <title>CSS Reftest Reference</title>
+  <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
+  <meta charset="utf-8" />
+  <style>
+    .flexContainer {
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+    }
+    .flexContainer &gt; * {
+      width: 20px;
+      height: 15px;
+      float: left;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer">
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-center-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-center-ref.xht
index 2006d61565f..d3d3cd72266 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-center-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-center-ref.xht
@@ -1,6 +1,6 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"><head>
-    <title>CSS Flexible Box Test: align-content proprety - center</title>
+    <title>CSS Flexible Box Test: align-content property - center</title>
     <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
     <style type="text/css">
         .container {
@@ -26,7 +26,7 @@
     </style>
 </head>
 <body>
-    <p>The test passed if you see a 2*2 table.</p>
+    <p>The test passed if you see a centered 2*2 table.</p>
     <div class="container">
       <span>first</span>
       <span>second</span>
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-end-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-end-ref.xht
index 317a6b35f01..8d1576c78af 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-end-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-end-ref.xht
@@ -1,6 +1,6 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"><head>
-    <title>CSS Flexible Box Test: align-content proprety - flex-end</title>
+    <title>CSS Flexible Box Test: align-content property - flex-end</title>
     <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
     <style type="text/css">
         .container {
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-space-between-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-space-between-ref.xht
new file mode 100644
index 00000000000..3ff6255d21d
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-space-between-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head>
+    <title>CSS Flexible Box Test: align-content property - space-between</title>
+    <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
+    <style type="text/css">
+        .container {
+        position: relative;
+        height: 14em;
+        width: 20em;
+        background: red;
+        margin: 1em;
+        border: 1px solid black;
+        }
+	.first, .second {
+	margin-bottom: 112px;
+	}
+        span {
+        height: 2em;
+        display: inline-block;
+        background: green;
+        color: white;
+        margin: 1em;
+        width: 8em;
+        float: left;
+        }
+    </style>
+</head>
+<body>
+    <p>The test passed if you see a 2*2 table and all the cells are spaced equally apart.</p>
+    <div class="container">
+      <span class="first">first</span>
+      <span class="second">second</span>
+      <span>third</span>
+      <span>forth</span>
+    </div>
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-start-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-start-ref.xht
new file mode 100644
index 00000000000..77ab3099ac0
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-start-ref.xht
@@ -0,0 +1,35 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head>
+    <title>CSS Flexible Box Test: align-content property - flex-start</title>
+    <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
+    <style type="text/css">
+        .container {
+	position: relative;
+	height: 14em;
+	width: 20em;
+	background: red;
+	margin: 1em;
+	border: 1px solid black;
+        }
+	span {
+	height: 2em;
+	display: inline-block;
+	background: green;
+	color: white;
+	margin: 1em;
+	width: 8em;
+	float: left;
+	}
+    </style>
+</head>
+<body>
+    <p>The test passed if you see a 2*2 table and all the cells are at the top of the container.</p>
+    <div class="container">
+      <span>first</span>
+      <span>second</span>
+      <span>third</span>
+      <span>forth</span>
+    </div>
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-direction-column-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-direction-column-reverse-ref.xht
new file mode 100644
index 00000000000..dbebba77d51
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-direction-column-reverse-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head>
+    <title>CSS Flexible Box Test: flex-direction proprety - column-reverse</title>
+    <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
+    <style type="text/css">
+        /* Positioned container allows for the self-describing statement to still 
+           be visible in the case of failure */
+        .container {
+	position: relative;
+	background: red;
+	margin: 1em 0;
+	border: 1px solid black;
+        }
+	span ~ span {
+	margin: 2em 1em 1em;
+	}
+	span {
+	display: block;
+	background: green;
+	color: white;
+	margin: 1em;
+	width: 8em;
+	}
+    </style>
+</head>
+<body>
+    <p>The test passed if you see all the cells are arraged vertically and reversed.</p>
+    <div class="container">
+      <span>forth</span>
+      <span>third</span>
+      <span>second</span>
+      <span>first</span>
+    </div>
+
+
+</body></html>
\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-direction-row-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-direction-row-reverse-ref.xht
index 7817c57e510..88a3a6222ce 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-direction-row-reverse-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-direction-row-reverse-ref.xht
@@ -6,7 +6,6 @@
         .container {
 	position: relative;
 	display: flex;
-	flex-direction: row-reverse;
 	background: red;
 	margin: 1em 0;
 	border: 1px solid black;
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-inline-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-wrap-ref.xht
index d55e5c26256..92f5a9f6156 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-inline-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-wrap-ref.xht
@@ -1,26 +1,35 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"><head>
-    <title>CSS Flexible Box Test: display proprety - inline-flex</title>
+    <title>CSS Flexible Box Test: flex-wrap proprety - wrap</title>
     <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
     <style type="text/css">
         /* Positioned container allows for the self-describing statement to still 
            be visible in the case of failure */
         .container {
 	position: relative;
+	background: red;
+	margin: 1em 0;
+	border: 1px solid black;
+	width: 20em;
+	height: 6.5em;
         }
-	.greenSquare {
+	span {
 	display: inline-block;
-	margin-top: -200px;
 	background: green;
-        }
+	color: white;
+	margin: 1em;
+	width: 8em;
+	float: left;
+	}
     </style>
 </head>
 <body>
-    <p>The test passed if you see a green block which its text is 'Success!
-'.</p>
+    <p>The test passed if you see a 2 * 2 table on the page.</p>
     <div class="container">
-      <!-- This is the square that should not be visible if the test passes -->
-      <div class="greenSquare">Success!</div>
+      <span>first</span>
+      <span>second</span>
+      <span>third</span>
+      <span>forth</span>
     </div>
 
 
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest-toc.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest-toc.xht
index 7267c7e88cf..64653047780 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest-toc.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest-toc.xht
@@ -584,14 +584,6 @@
         <td rowspan="1"></td>
       </tr>
     </tbody>
-    <tbody id="flex-container-margin" class="">
-      <tr>
-        <td rowspan="1" title="flex-container-margin-not-collapse-with-content-margin">
-          <a href="flex-container-margin.xht">flex-container-margin</a></td>
-        <td><a href="reference/flex-container-margin-ref.xht">=</a> </td>
-        <td rowspan="1"></td>
-      </tr>
-    </tbody>
     <tbody id="flex-direction" class="">
       <tr>
         <td rowspan="1" title="flex flow direction">
@@ -2056,6 +2048,78 @@
         <td rowspan="1"></td>
       </tr>
     </tbody>
+    <tbody id="flexbox-writing-mode-001" class="">
+      <tr>
+        <td rowspan="1" title="Try various flex-flow values, with 'direction: ltr' and 'writing-mode: horizontal-tb'">
+          <a href="flexbox-writing-mode-001.xht">flexbox-writing-mode-001</a></td>
+        <td><a href="reference/flexbox-writing-mode-001-ref.xht">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="flexbox-writing-mode-002" class="">
+      <tr>
+        <td rowspan="1" title="Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-rl'">
+          <a href="flexbox-writing-mode-002.xht">flexbox-writing-mode-002</a></td>
+        <td><a href="reference/flexbox-writing-mode-002-ref.xht">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="flexbox-writing-mode-003" class="">
+      <tr>
+        <td rowspan="1" title="Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-lr'">
+          <a href="flexbox-writing-mode-003.xht">flexbox-writing-mode-003</a></td>
+        <td><a href="reference/flexbox-writing-mode-003-ref.xht">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="flexbox-writing-mode-004" class="">
+      <tr>
+        <td rowspan="1" title="Try various flex-flow values, with 'direction: rtl' and 'writing-mode: horizontal-tb'">
+          <a href="flexbox-writing-mode-004.xht">flexbox-writing-mode-004</a></td>
+        <td><a href="reference/flexbox-writing-mode-004-ref.xht">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="flexbox-writing-mode-005" class="">
+      <tr>
+        <td rowspan="1" title="Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-rl'">
+          <a href="flexbox-writing-mode-005.xht">flexbox-writing-mode-005</a></td>
+        <td><a href="reference/flexbox-writing-mode-005-ref.xht">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="flexbox-writing-mode-006" class="">
+      <tr>
+        <td rowspan="1" title="Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-lr'">
+          <a href="flexbox-writing-mode-006.xht">flexbox-writing-mode-006</a></td>
+        <td><a href="reference/flexbox-writing-mode-006-ref.xht">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="flexbox-writing-mode-007" class="">
+      <tr>
+        <td rowspan="1" title="Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode">
+          <a href="flexbox-writing-mode-007.xht">flexbox-writing-mode-007</a></td>
+        <td><a href="reference/flexbox-writing-mode-007-ref.xht">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="flexbox-writing-mode-008" class="">
+      <tr>
+        <td rowspan="1" title="Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode">
+          <a href="flexbox-writing-mode-008.xht">flexbox-writing-mode-008</a></td>
+        <td><a href="reference/flexbox-writing-mode-008-ref.xht">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="flexbox-writing-mode-009" class="">
+      <tr>
+        <td rowspan="1" title="Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode">
+          <a href="flexbox-writing-mode-009.xht">flexbox-writing-mode-009</a></td>
+        <td><a href="reference/flexbox-writing-mode-009-ref.xht">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
     <tbody id="flexbox_absolute-atomic" class="">
       <tr>
         <td rowspan="1" title="flexbox | abspos atomic flexitems">
@@ -3802,7 +3866,7 @@
     </tbody>
     <tbody id="ttwf-reftest-flex-align-content-center" class="">
       <tr>
-        <td rowspan="1" title="align-content proprety - center">
+        <td rowspan="1" title="align-content property - center">
           <a href="ttwf-reftest-flex-align-content-center.xht">ttwf-reftest-flex-align-content-center</a></td>
         <td><a href="reference/ttwf-reftest-flex-align-content-center-ref.xht">=</a> </td>
         <td rowspan="1"></td>
@@ -3810,7 +3874,7 @@
     </tbody>
     <tbody id="ttwf-reftest-flex-align-content-end" class="">
       <tr>
-        <td rowspan="1" title="align-content proprety - flex-end">
+        <td rowspan="1" title="align-content property - flex-end">
           <a href="ttwf-reftest-flex-align-content-end.xht">ttwf-reftest-flex-align-content-end</a></td>
         <td><a href="reference/ttwf-reftest-flex-align-content-end-ref.xht">=</a> </td>
         <td rowspan="1"></td>
@@ -3818,25 +3882,25 @@
     </tbody>
     <tbody id="ttwf-reftest-flex-align-content-space-around" class="">
       <tr>
-        <td rowspan="1" title="align-content proprety - flex-end">
+        <td rowspan="1" title="align-content property - space-around">
           <a href="ttwf-reftest-flex-align-content-space-around.xht">ttwf-reftest-flex-align-content-space-around</a></td>
-        <td><a href="reference/ttwf-reftest-flex-align-content-end-ref.xht">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-align-content-space-around-ref.xht">=</a> </td>
         <td rowspan="1"></td>
       </tr>
     </tbody>
     <tbody id="ttwf-reftest-flex-align-content-space-between" class="">
       <tr>
-        <td rowspan="1" title="align-content proprety - flex-end">
+        <td rowspan="1" title="align-content property - space-between">
           <a href="ttwf-reftest-flex-align-content-space-between.xht">ttwf-reftest-flex-align-content-space-between</a></td>
-        <td><a href="reference/ttwf-reftest-flex-align-content-end-ref.xht">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-align-content-space-between-ref.xht">=</a> </td>
         <td rowspan="1"></td>
       </tr>
     </tbody>
     <tbody id="ttwf-reftest-flex-align-content-start" class="">
       <tr>
-        <td rowspan="1" title="align-content proprety - flex-end">
+        <td rowspan="1" title="align-content property - flex-start">
           <a href="ttwf-reftest-flex-align-content-start.xht">ttwf-reftest-flex-align-content-start</a></td>
-        <td><a href="reference/ttwf-reftest-flex-align-content-end-ref.xht">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-align-content-start-ref.xht">=</a> </td>
         <td rowspan="1"></td>
       </tr>
     </tbody>
@@ -3860,7 +3924,7 @@
       <tr>
         <td rowspan="1" title="flex-direction proprety - column-reverse">
           <a href="ttwf-reftest-flex-direction-column-reverse.xht">ttwf-reftest-flex-direction-column-reverse</a></td>
-        <td><a href="reference/ttwf-reftest-flex-direction-column-ref.xht">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-direction-column-reverse-ref.xht">=</a> </td>
         <td rowspan="1"></td>
       </tr>
     </tbody>
@@ -3884,7 +3948,7 @@
       <tr>
         <td rowspan="1" title="flex-wrap proprety - wrap">
           <a href="ttwf-reftest-flex-wrap.xht">ttwf-reftest-flex-wrap</a></td>
-        <td><a href="reference/ttwf-reftest-flex-inline-ref.xht">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-wrap-ref.xht">=</a> </td>
         <td rowspan="1"></td>
       </tr>
     </tbody>
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest.list b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest.list
index 3a01817404c..f4687c773ca 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest.list
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest.list
@@ -69,7 +69,6 @@ flex-basis-006.xht == reference/ref-filled-green-100px-square.xht
 flex-basis-007.xht == reference/ref-filled-green-100px-square.xht
 flex-basis-008.xht == reference/ref-filled-green-100px-square.xht
 flex-box-wrap.xht == reference/flex-box-wrap-ref.xht
-flex-container-margin.xht == reference/flex-container-margin-ref.xht
 flex-direction.xht == reference/flex-direction.xht
 flex-direction-modify.xht == reference/flex-direction-modify.xht
 flex-direction-with-element-insert.xht == reference/flex-direction-with-element-insert.xht
@@ -253,6 +252,15 @@ flexbox-whitespace-handling-002.xht == reference/flexbox-whitespace-handling-002
 flexbox-with-pseudo-elements-001.xht == reference/flexbox-with-pseudo-elements-001-ref.xht
 flexbox-with-pseudo-elements-002.xht == reference/flexbox-with-pseudo-elements-002-ref.xht
 flexbox-with-pseudo-elements-003.xht == reference/flexbox-with-pseudo-elements-003-ref.xht
+flexbox-writing-mode-001.xht == reference/flexbox-writing-mode-001-ref.xht
+flexbox-writing-mode-002.xht == reference/flexbox-writing-mode-002-ref.xht
+flexbox-writing-mode-003.xht == reference/flexbox-writing-mode-003-ref.xht
+flexbox-writing-mode-004.xht == reference/flexbox-writing-mode-004-ref.xht
+flexbox-writing-mode-005.xht == reference/flexbox-writing-mode-005-ref.xht
+flexbox-writing-mode-006.xht == reference/flexbox-writing-mode-006-ref.xht
+flexbox-writing-mode-007.xht == reference/flexbox-writing-mode-007-ref.xht
+flexbox-writing-mode-008.xht == reference/flexbox-writing-mode-008-ref.xht
+flexbox-writing-mode-009.xht == reference/flexbox-writing-mode-009-ref.xht
 flexbox_absolute-atomic.xht == reference/flexbox_absolute-atomic-ref.xht
 flexbox_align-content-center.xht == reference/flexbox_align-content-center-ref.xht
 flexbox_align-content-flexend.xht == reference/flexbox_align-content-flexend-ref.xht
@@ -473,14 +481,14 @@ regions-flexbox-004.xht == reference/regions-flexbox-002-ref.xht
 row-flexbox-break.xht == reference/row-flexbox-break-ref.xht
 ttwf-reftest-flex-align-content-center.xht == reference/ttwf-reftest-flex-align-content-center-ref.xht
 ttwf-reftest-flex-align-content-end.xht == reference/ttwf-reftest-flex-align-content-end-ref.xht
-ttwf-reftest-flex-align-content-space-around.xht == reference/ttwf-reftest-flex-align-content-end-ref.xht
-ttwf-reftest-flex-align-content-space-between.xht == reference/ttwf-reftest-flex-align-content-end-ref.xht
-ttwf-reftest-flex-align-content-start.xht == reference/ttwf-reftest-flex-align-content-end-ref.xht
+ttwf-reftest-flex-align-content-space-around.xht == reference/ttwf-reftest-flex-align-content-space-around-ref.xht
+ttwf-reftest-flex-align-content-space-between.xht == reference/ttwf-reftest-flex-align-content-space-between-ref.xht
+ttwf-reftest-flex-align-content-start.xht == reference/ttwf-reftest-flex-align-content-start-ref.xht
 ttwf-reftest-flex-base.xht == reference/ttwf-reftest-flex-base-ref.xht
 ttwf-reftest-flex-direction-column.xht == reference/ttwf-reftest-flex-direction-column-ref.xht
-ttwf-reftest-flex-direction-column-reverse.xht == reference/ttwf-reftest-flex-direction-column-ref.xht
+ttwf-reftest-flex-direction-column-reverse.xht == reference/ttwf-reftest-flex-direction-column-reverse-ref.xht
 ttwf-reftest-flex-direction-row-reverse.xht == reference/ttwf-reftest-flex-direction-row-reverse-ref.xht
 ttwf-reftest-flex-order.xht == reference/ttwf-reftest-flex-order-ref.xht
-ttwf-reftest-flex-wrap.xht == reference/ttwf-reftest-flex-inline-ref.xht
+ttwf-reftest-flex-wrap.xht == reference/ttwf-reftest-flex-wrap-ref.xht
 ttwf-reftest-flex-wrap-reverse.xht == reference/ttwf-reftest-flex-wrap-reverse-ref.xht
 visibility-regions-in-flexbox.xht == reference/visibility-regions-in-flexbox-ref.xht
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/toc.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/toc.xht
index 813acb27f5e..9823b1c7b97 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/toc.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/toc.xht
@@ -37,12 +37,12 @@
     <tbody id="s4">
       <tr><th><a href="chapter-4.xht">Chapter 4 - 
         Flex Items</a></th>
-      <td>(58 Tests)</td></tr>
+      <td>(57 Tests)</td></tr>
     </tbody>
     <tbody id="s5">
       <tr><th><a href="chapter-5.xht">Chapter 5 - 
         Ordering and Orientation</a></th>
-      <td>(123 Tests)</td></tr>
+      <td>(129 Tests)</td></tr>
     </tbody>
     <tbody id="s6">
       <tr><th><a href="chapter-6.xht">Chapter 6 - 
@@ -62,7 +62,7 @@
     <tbody id="s9">
       <tr><th><a href="chapter-9.xht">Chapter 9 - 
         Flex Layout Algorithm</a></th>
-      <td>(58 Tests)</td></tr>
+      <td>(61 Tests)</td></tr>
     </tbody>
     <tbody id="s10">
       <tr><th><a href="chapter-10.xht">Chapter 10 - 
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-center.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-center.xht
index 938f06357f9..27130febf9e 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-center.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-center.xht
@@ -1,6 +1,6 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"><head>
-    <title>CSS Flexible Box Test: align-content proprety - center</title>
+    <title>CSS Flexible Box Test: align-content property - center</title>
     <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
     <link href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" rel="help" />
     <link href="reference/ttwf-reftest-flex-align-content-center-ref.xht" rel="match" />
@@ -29,7 +29,7 @@
     </style>
 </head>
 <body>
-    <p>The test passed if you see a 2*2 table.</p>
+    <p>The test passed if you see a centered 2*2 table.</p>
     <div class="container">
       <span>first</span>
       <span>second</span>
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-end.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-end.xht
index fc36d46f8af..ffd2e97f29d 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-end.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-end.xht
@@ -1,6 +1,6 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"><head>
-    <title>CSS Flexible Box Test: align-content proprety - flex-end</title>
+    <title>CSS Flexible Box Test: align-content property - flex-end</title>
     <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
     <link href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" rel="help" />
     <link href="reference/ttwf-reftest-flex-align-content-end-ref.xht" rel="match" />
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-space-around.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-space-around.xht
index c4eef3dedcb..c5a4fce24de 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-space-around.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-space-around.xht
@@ -1,9 +1,9 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"><head>
-    <title>CSS Flexible Box Test: align-content proprety - flex-end</title>
+    <title>CSS Flexible Box Test: align-content property - space-around</title>
     <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
     <link href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" rel="help" />
-    <link href="reference/ttwf-reftest-flex-align-content-end-ref.xht" rel="match" />
+    <link href="reference/ttwf-reftest-flex-align-content-space-around-ref.xht" rel="match" />
     <meta content="Statement describing what the test case is asserting" name="assert" />
     <style type="text/css">
         .container {
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-space-between.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-space-between.xht
index 10c3dcc6cf1..622301739eb 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-space-between.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-space-between.xht
@@ -1,9 +1,9 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"><head>
-    <title>CSS Flexible Box Test: align-content proprety - flex-end</title>
+    <title>CSS Flexible Box Test: align-content property - space-between</title>
     <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
     <link href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" rel="help" />
-    <link href="reference/ttwf-reftest-flex-align-content-end-ref.xht" rel="match" />
+    <link href="reference/ttwf-reftest-flex-align-content-space-between-ref.xht" rel="match" />
     <meta content="Statement describing what the test case is asserting" name="assert" />
     <style type="text/css">
         .container {
@@ -29,7 +29,7 @@
     </style>
 </head>
 <body>
-    <p>The test passed if you see a 2*2 table and all the cells are at the bottom of container.</p>
+    <p>The test passed if you see a 2*2 table and all the cells are spaced equally apart.</p>
     <div class="container">
       <span>first</span>
       <span>second</span>
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-start.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-start.xht
index 3e67a1e9525..5014c497b9f 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-start.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-align-content-start.xht
@@ -1,9 +1,9 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"><head>
-    <title>CSS Flexible Box Test: align-content proprety - flex-end</title>
+    <title>CSS Flexible Box Test: align-content property - flex-start</title>
     <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
     <link href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" rel="help" />
-    <link href="reference/ttwf-reftest-flex-align-content-end-ref.xht" rel="match" />
+    <link href="reference/ttwf-reftest-flex-align-content-start-ref.xht" rel="match" />
     <meta content="Statement describing what the test case is asserting" name="assert" />
     <style type="text/css">
         .container {
@@ -29,7 +29,7 @@
     </style>
 </head>
 <body>
-    <p>The test passed if you see a 2*2 table and all the cells are at the bottom of container.</p>
+    <p>The test passed if you see a 2*2 table and all the cells are at the top of the container.</p>
     <div class="container">
       <span>first</span>
       <span>second</span>
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-direction-column-reverse.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-direction-column-reverse.xht
index 2c72416e3b2..652d3d4bb0d 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-direction-column-reverse.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-direction-column-reverse.xht
@@ -3,7 +3,7 @@
     <title>CSS Flexible Box Test: flex-direction proprety - column-reverse</title>
     <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
     <link href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" rel="help" />
-    <link href="reference/ttwf-reftest-flex-direction-column-ref.xht" rel="match" />
+    <link href="reference/ttwf-reftest-flex-direction-column-reverse-ref.xht" rel="match" />
     <meta content="Statement describing what the test case is asserting" name="assert" />
     <style type="text/css">
         /* Positioned container allows for the self-describing statement to still 
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-wrap.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-wrap.xht
index e76a503f7bf..db14e539c73 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-wrap.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/ttwf-reftest-flex-wrap.xht
@@ -3,7 +3,7 @@
     <title>CSS Flexible Box Test: flex-wrap proprety - wrap</title>
     <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
     <link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-wrap" rel="help" />
-    <link href="reference/ttwf-reftest-flex-inline-ref.xht" rel="match" />
+    <link href="reference/ttwf-reftest-flex-wrap-ref.xht" rel="match" />
     <meta content="Statement describing what the test case is asserting" name="assert" />
     <style type="text/css">
         /* Positioned container allows for the self-describing statement to still