Update CSS tests to revision 2baa72daab8bf37e3e910a9fd311a1eaa5b0f4a8

48 files changed, 1874 insertions, 257 deletions

diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-1.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-1.htm
index 992e0cd38a8..2425f6e51a0 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-1.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-1.htm
@@ -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/html/chapter-10.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-10.htm
index 0d46b72648a..3d1d6522c08 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-10.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-10.htm
@@ -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/html/chapter-2.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-2.htm
index 2df7d492d6e..a1d552fc6e2 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-2.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-2.htm
@@ -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/html/chapter-4.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-4.htm
index 4e1b86b35ec..9ae15820783 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-4.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-4.htm
@@ -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 id="refs-column">
@@ -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.htm">flex-container-margin</a></strong></td>
-        <td><a href="reference/flex-container-margin-ref.htm">=</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.htm">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/html/chapter-5.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-5.htm
index 88a4104439e..24563ee1354 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-5.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-5.htm
@@ -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 id="refs-column">
@@ -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.htm">ttwf-reftest-flex-direction-column-reverse</a></strong></td>
-        <td><a href="reference/ttwf-reftest-flex-direction-column-ref.htm">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-direction-column-reverse-ref.htm">=</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.htm">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.htm">flexbox-writing-mode-001</a></strong></td>
+        <td><a href="reference/flexbox-writing-mode-001-ref.htm">=</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.htm">flexbox-writing-mode-002</a></strong></td>
+        <td><a href="reference/flexbox-writing-mode-002-ref.htm">=</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.htm">flexbox-writing-mode-003</a></strong></td>
+        <td><a href="reference/flexbox-writing-mode-003-ref.htm">=</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.htm">flexbox-writing-mode-004</a></strong></td>
+        <td><a href="reference/flexbox-writing-mode-004-ref.htm">=</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.htm">flexbox-writing-mode-005</a></strong></td>
+        <td><a href="reference/flexbox-writing-mode-005-ref.htm">=</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.htm">flexbox-writing-mode-006</a></strong></td>
+        <td><a href="reference/flexbox-writing-mode-006-ref.htm">=</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.htm">ttwf-reftest-flex-wrap</a></strong></td>
-        <td><a href="reference/ttwf-reftest-flex-inline-ref.htm">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-wrap-ref.htm">=</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.htm">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/html/chapter-6.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-6.htm
index 375db7567e0..bba4524bf92 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-6.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-6.htm
@@ -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/html/chapter-7.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-7.htm
index 26d68e4561a..887f80c478b 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-7.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-7.htm
@@ -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.htm">flexbox_flex-auto</a></strong></td>
         <td><a href="reference/flexbox_flex-auto-ref.htm">=</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.htm">flexbox_flex-initial</a></strong></td>
         <td><a href="reference/flexbox_flex-initial-ref.htm">=</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.htm">flexbox_flex-initial-2</a></strong></td>
         <td><a href="reference/flexbox_flex-initial-2-ref.htm">=</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.htm">flexbox_flex-natural</a></strong></td>
         <td><a href="reference/flexbox_flex-natural-ref.htm">=</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.htm">flexbox_flex-none</a></strong></td>
         <td><a href="reference/flexbox_flex-none-ref.htm">=</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.htm">autoheight-regions-in-fixed-sized-flexbox-001</a></td>
         <td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-001-ref.htm">=</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.htm">autoheight-regions-in-fixed-sized-flexbox-002</a></td>
         <td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-002-ref.htm">=</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.htm">css-flexbox-img-expand-evenly</a></strong></td>
         <td><a href="reference/css-flexbox-img-expand-evenly-ref.htm">=</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.htm">flex-grow-001</a></strong></td>
         <td><a href="reference/flex-grow-001-ref.htm">=</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.htm">flex-grow-002</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-grow-003</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-grow-004</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-grow-005</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-grow-006</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">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.htm">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.htm">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.htm">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.htm">flex-shrink-001</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-shrink-002</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-shrink-003</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-shrink-004</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-shrink-005</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-shrink-006</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-shrink-007</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">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.htm">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.htm">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.htm">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.htm">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.htm">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.htm">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.htm">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.htm">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.htm">flexbox_flex-basis</a></strong></td>
         <td><a href="reference/flexbox_flex-basis-ref.htm">=</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.htm">flexbox_flex-basis-shrink</a></strong></td>
         <td><a href="reference/flexbox_flex-basis-shrink-ref.htm">=</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.htm">flexbox_flex-natural-mixed-basis</a></strong></td>
         <td><a href="reference/flexbox_flex-natural-mixed-basis-ref.htm">=</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.htm">flexbox_flex-natural-mixed-basis-auto</a></strong></td>
         <td><a href="reference/flexbox_flex-natural-mixed-basis-auto-ref.htm">=</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.htm">flexbox_flex-natural-variable-auto-basis</a></strong></td>
         <td><a href="reference/flexbox_flex-natural-variable-auto-basis-ref.htm">=</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.htm">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.htm">flex-basis-001</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-basis-002</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-basis-003</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-basis-004</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-basis-005</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-basis-006</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-basis-007</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-basis-008</a></strong></td>
         <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flexbox_flex-natural-variable-zero-basis</a></strong></td>
         <td><a href="reference/flexbox_flex-natural-variable-zero-basis-ref.htm">=</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/html/chapter-8.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-8.htm
index fe8170068f5..f3033d6ddc5 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-8.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-8.htm
@@ -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.htm">ttwf-reftest-flex-align-content-center</a></strong></td>
         <td><a href="reference/ttwf-reftest-flex-align-content-center-ref.htm">=</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.htm">ttwf-reftest-flex-align-content-end</a></strong></td>
         <td><a href="reference/ttwf-reftest-flex-align-content-end-ref.htm">=</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.htm">ttwf-reftest-flex-align-content-space-around</a></strong></td>
-        <td><a href="reference/ttwf-reftest-flex-align-content-end-ref.htm">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-align-content-space-around-ref.htm">=</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.htm">ttwf-reftest-flex-align-content-space-between</a></strong></td>
-        <td><a href="reference/ttwf-reftest-flex-align-content-end-ref.htm">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-align-content-space-between-ref.htm">=</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.htm">ttwf-reftest-flex-align-content-start</a></strong></td>
-        <td><a href="reference/ttwf-reftest-flex-align-content-end-ref.htm">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-align-content-start-ref.htm">=</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/html/chapter-9.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-9.htm
index 73e61768d68..4e37168de3d 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-9.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-9.htm
@@ -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 id="refs-column">
@@ -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.htm">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.htm">flexbox-writing-mode-007</a></strong></td>
+        <td><a href="reference/flexbox-writing-mode-007-ref.htm">=</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.htm">flexbox-writing-mode-008</a></strong></td>
+        <td><a href="reference/flexbox-writing-mode-008-ref.htm">=</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.htm">flexbox-writing-mode-009</a></strong></td>
+        <td><a href="reference/flexbox-writing-mode-009-ref.htm">=</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.htm">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/html/flex-container-margin.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-container-margin.htm
deleted file mode 100644
index 0efb58875f4..00000000000
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-container-margin.htm
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html><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.htm" 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/html/flex-margin-no-collapse.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-margin-no-collapse.htm
index 52a576a08e0..e9e310c9337 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-margin-no-collapse.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-margin-no-collapse.htm
@@ -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/html/flexbox-writing-mode-001.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-writing-mode-001.htm
new file mode 100644
index 00000000000..01a817b33d4
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-writing-mode-001.htm
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html><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.htm" 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 > * {
+      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/html/flexbox-writing-mode-002.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-writing-mode-002.htm
new file mode 100644
index 00000000000..8f481dc7307
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-writing-mode-002.htm
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html><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.htm" 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 > * {
+      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/html/flexbox-writing-mode-003.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-writing-mode-003.htm
new file mode 100644
index 00000000000..796aaf7f0a2
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-writing-mode-003.htm
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html><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.htm" 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 > * {
+      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/html/flexbox-writing-mode-004.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-writing-mode-004.htm
new file mode 100644
index 00000000000..3decf9d3468
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-writing-mode-004.htm
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html><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.htm" 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 > * {
+      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/html/flexbox-writing-mode-005.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-writing-mode-005.htm
new file mode 100644
index 00000000000..7c85552f89f
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-writing-mode-005.htm
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html><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.htm" 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 > * {
+      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/html/flexbox-writing-mode-006.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-writing-mode-006.htm
new file mode 100644
index 00000000000..b9f2e59b581
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-writing-mode-006.htm
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html><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.htm" 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 > * {
+      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/html/flexbox-writing-mode-007.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-writing-mode-007.htm
new file mode 100644
index 00000000000..a12f326594d
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-writing-mode-007.htm
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html><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.htm" 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 > * {
+      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 > * {
+      writing-mode: horizontal-tb;
+    }
+    .kids_vertical_lr > * {
+      writing-mode: vertical-lr;
+    }
+    .kids_vertical_rl > * {
+      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/html/flexbox-writing-mode-008.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-writing-mode-008.htm
new file mode 100644
index 00000000000..e43a1aef04b
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-writing-mode-008.htm
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html><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.htm" 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 > * {
+      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 > * {
+      writing-mode: horizontal-tb;
+    }
+    .kids_vertical_lr > * {
+      writing-mode: vertical-lr;
+    }
+    .kids_vertical_rl > * {
+      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/html/flexbox-writing-mode-009.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-writing-mode-009.htm
new file mode 100644
index 00000000000..bd1bf7a5ba4
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-writing-mode-009.htm
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html><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.htm" 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 > * {
+      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 > * {
+      writing-mode: horizontal-tb;
+    }
+    .kids_vertical_lr > * {
+      writing-mode: vertical-lr;
+    }
+    .kids_vertical_rl > * {
+      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/html/order_value.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/order_value.htm
index ed2a3f542d8..b76fe6e3fbd 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/order_value.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/order_value.htm
@@ -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/html/reference/flex-container-margin-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-container-margin-ref.htm
deleted file mode 100644
index 56a313ef692..00000000000
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-container-margin-ref.htm
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html><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/html/reference/flexbox-writing-mode-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-001-ref.htm
new file mode 100644
index 00000000000..6876c011344
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-001-ref.htm
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html><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 > * {
+      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/html/reference/flexbox-writing-mode-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-002-ref.htm
new file mode 100644
index 00000000000..840c6d12635
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-002-ref.htm
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html><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 > * {
+      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/html/reference/flexbox-writing-mode-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-003-ref.htm
new file mode 100644
index 00000000000..a5bbe7f835a
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-003-ref.htm
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html><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 > * {
+      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/html/reference/flexbox-writing-mode-004-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-004-ref.htm
new file mode 100644
index 00000000000..b4e0bce88fc
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-004-ref.htm
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html><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 > * {
+      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/html/reference/flexbox-writing-mode-005-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-005-ref.htm
new file mode 100644
index 00000000000..c47859bc125
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-005-ref.htm
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html><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 > * {
+      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/html/reference/flexbox-writing-mode-006-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-006-ref.htm
new file mode 100644
index 00000000000..1980326188a
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-006-ref.htm
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html><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 > * {
+      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/html/reference/flexbox-writing-mode-007-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-007-ref.htm
new file mode 100644
index 00000000000..328f6053937
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-007-ref.htm
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html><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 > * {
+      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/html/reference/flexbox-writing-mode-008-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-008-ref.htm
new file mode 100644
index 00000000000..d6ea2201750
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-008-ref.htm
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html><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 > * {
+      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/html/reference/flexbox-writing-mode-009-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-009-ref.htm
new file mode 100644
index 00000000000..fd53f223283
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-009-ref.htm
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+--><html><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 > * {
+      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/html/reference/ttwf-reftest-flex-align-content-center-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-align-content-center-ref.htm
index 7be0d724035..e1ba92af993 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-align-content-center-ref.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-align-content-center-ref.htm
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html><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/html/reference/ttwf-reftest-flex-align-content-end-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-align-content-end-ref.htm
index 065be45c30a..3ac12caf6b9 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-align-content-end-ref.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-align-content-end-ref.htm
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html><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/html/reference/ttwf-reftest-flex-align-content-space-between-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-align-content-space-between-ref.htm
new file mode 100644
index 00000000000..575e4e66ed2
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-align-content-space-between-ref.htm
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html><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/html/reference/ttwf-reftest-flex-align-content-start-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-align-content-start-ref.htm
new file mode 100644
index 00000000000..e8434c65d8a
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-align-content-start-ref.htm
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html><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/html/reference/ttwf-reftest-flex-direction-column-reverse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-direction-column-reverse-ref.htm
new file mode 100644
index 00000000000..1d807baa768
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-direction-column-reverse-ref.htm
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html><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/html/reference/ttwf-reftest-flex-direction-row-reverse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-direction-row-reverse-ref.htm
index f77e64aa25a..d5c70cccceb 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-direction-row-reverse-ref.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-direction-row-reverse-ref.htm
@@ -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/html/reference/ttwf-reftest-flex-inline-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-wrap-ref.htm
index 486357b487e..b43f36234a2 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-inline-ref.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-wrap-ref.htm
@@ -1,26 +1,35 @@
 <!DOCTYPE html>
 <html><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/html/reftest-toc.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest-toc.htm
index 8226b3515c1..ce821bae82d 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest-toc.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest-toc.htm
@@ -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.htm">flex-container-margin</a></td>
-        <td><a href="reference/flex-container-margin-ref.htm">=</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.htm">flexbox-writing-mode-001</a></td>
+        <td><a href="reference/flexbox-writing-mode-001-ref.htm">=</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.htm">flexbox-writing-mode-002</a></td>
+        <td><a href="reference/flexbox-writing-mode-002-ref.htm">=</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.htm">flexbox-writing-mode-003</a></td>
+        <td><a href="reference/flexbox-writing-mode-003-ref.htm">=</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.htm">flexbox-writing-mode-004</a></td>
+        <td><a href="reference/flexbox-writing-mode-004-ref.htm">=</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.htm">flexbox-writing-mode-005</a></td>
+        <td><a href="reference/flexbox-writing-mode-005-ref.htm">=</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.htm">flexbox-writing-mode-006</a></td>
+        <td><a href="reference/flexbox-writing-mode-006-ref.htm">=</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.htm">flexbox-writing-mode-007</a></td>
+        <td><a href="reference/flexbox-writing-mode-007-ref.htm">=</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.htm">flexbox-writing-mode-008</a></td>
+        <td><a href="reference/flexbox-writing-mode-008-ref.htm">=</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.htm">flexbox-writing-mode-009</a></td>
+        <td><a href="reference/flexbox-writing-mode-009-ref.htm">=</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.htm">ttwf-reftest-flex-align-content-center</a></td>
         <td><a href="reference/ttwf-reftest-flex-align-content-center-ref.htm">=</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.htm">ttwf-reftest-flex-align-content-end</a></td>
         <td><a href="reference/ttwf-reftest-flex-align-content-end-ref.htm">=</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.htm">ttwf-reftest-flex-align-content-space-around</a></td>
-        <td><a href="reference/ttwf-reftest-flex-align-content-end-ref.htm">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-align-content-space-around-ref.htm">=</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.htm">ttwf-reftest-flex-align-content-space-between</a></td>
-        <td><a href="reference/ttwf-reftest-flex-align-content-end-ref.htm">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-align-content-space-between-ref.htm">=</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.htm">ttwf-reftest-flex-align-content-start</a></td>
-        <td><a href="reference/ttwf-reftest-flex-align-content-end-ref.htm">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-align-content-start-ref.htm">=</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.htm">ttwf-reftest-flex-direction-column-reverse</a></td>
-        <td><a href="reference/ttwf-reftest-flex-direction-column-ref.htm">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-direction-column-reverse-ref.htm">=</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.htm">ttwf-reftest-flex-wrap</a></td>
-        <td><a href="reference/ttwf-reftest-flex-inline-ref.htm">=</a> </td>
+        <td><a href="reference/ttwf-reftest-flex-wrap-ref.htm">=</a> </td>
         <td rowspan="1"></td>
       </tr>
     </tbody>
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest.list b/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest.list
index 53d3e3226c9..23f8f94a7fd 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest.list
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest.list
@@ -69,7 +69,6 @@ flex-basis-006.htm == reference/ref-filled-green-100px-square.htm
 flex-basis-007.htm == reference/ref-filled-green-100px-square.htm
 flex-basis-008.htm == reference/ref-filled-green-100px-square.htm
 flex-box-wrap.htm == reference/flex-box-wrap-ref.htm
-flex-container-margin.htm == reference/flex-container-margin-ref.htm
 flex-direction.htm == reference/flex-direction.htm
 flex-direction-modify.htm == reference/flex-direction-modify.htm
 flex-direction-with-element-insert.htm == reference/flex-direction-with-element-insert.htm
@@ -253,6 +252,15 @@ flexbox-whitespace-handling-002.htm == reference/flexbox-whitespace-handling-002
 flexbox-with-pseudo-elements-001.htm == reference/flexbox-with-pseudo-elements-001-ref.htm
 flexbox-with-pseudo-elements-002.htm == reference/flexbox-with-pseudo-elements-002-ref.htm
 flexbox-with-pseudo-elements-003.htm == reference/flexbox-with-pseudo-elements-003-ref.htm
+flexbox-writing-mode-001.htm == reference/flexbox-writing-mode-001-ref.htm
+flexbox-writing-mode-002.htm == reference/flexbox-writing-mode-002-ref.htm
+flexbox-writing-mode-003.htm == reference/flexbox-writing-mode-003-ref.htm
+flexbox-writing-mode-004.htm == reference/flexbox-writing-mode-004-ref.htm
+flexbox-writing-mode-005.htm == reference/flexbox-writing-mode-005-ref.htm
+flexbox-writing-mode-006.htm == reference/flexbox-writing-mode-006-ref.htm
+flexbox-writing-mode-007.htm == reference/flexbox-writing-mode-007-ref.htm
+flexbox-writing-mode-008.htm == reference/flexbox-writing-mode-008-ref.htm
+flexbox-writing-mode-009.htm == reference/flexbox-writing-mode-009-ref.htm
 flexbox_absolute-atomic.htm == reference/flexbox_absolute-atomic-ref.htm
 flexbox_align-content-center.htm == reference/flexbox_align-content-center-ref.htm
 flexbox_align-content-flexend.htm == reference/flexbox_align-content-flexend-ref.htm
@@ -473,14 +481,14 @@ regions-flexbox-004.htm == reference/regions-flexbox-002-ref.htm
 row-flexbox-break.htm == reference/row-flexbox-break-ref.htm
 ttwf-reftest-flex-align-content-center.htm == reference/ttwf-reftest-flex-align-content-center-ref.htm
 ttwf-reftest-flex-align-content-end.htm == reference/ttwf-reftest-flex-align-content-end-ref.htm
-ttwf-reftest-flex-align-content-space-around.htm == reference/ttwf-reftest-flex-align-content-end-ref.htm
-ttwf-reftest-flex-align-content-space-between.htm == reference/ttwf-reftest-flex-align-content-end-ref.htm
-ttwf-reftest-flex-align-content-start.htm == reference/ttwf-reftest-flex-align-content-end-ref.htm
+ttwf-reftest-flex-align-content-space-around.htm == reference/ttwf-reftest-flex-align-content-space-around-ref.htm
+ttwf-reftest-flex-align-content-space-between.htm == reference/ttwf-reftest-flex-align-content-space-between-ref.htm
+ttwf-reftest-flex-align-content-start.htm == reference/ttwf-reftest-flex-align-content-start-ref.htm
 ttwf-reftest-flex-base.htm == reference/ttwf-reftest-flex-base-ref.htm
 ttwf-reftest-flex-direction-column.htm == reference/ttwf-reftest-flex-direction-column-ref.htm
-ttwf-reftest-flex-direction-column-reverse.htm == reference/ttwf-reftest-flex-direction-column-ref.htm
+ttwf-reftest-flex-direction-column-reverse.htm == reference/ttwf-reftest-flex-direction-column-reverse-ref.htm
 ttwf-reftest-flex-direction-row-reverse.htm == reference/ttwf-reftest-flex-direction-row-reverse-ref.htm
 ttwf-reftest-flex-order.htm == reference/ttwf-reftest-flex-order-ref.htm
-ttwf-reftest-flex-wrap.htm == reference/ttwf-reftest-flex-inline-ref.htm
+ttwf-reftest-flex-wrap.htm == reference/ttwf-reftest-flex-wrap-ref.htm
 ttwf-reftest-flex-wrap-reverse.htm == reference/ttwf-reftest-flex-wrap-reverse-ref.htm
 visibility-regions-in-flexbox.htm == reference/visibility-regions-in-flexbox-ref.htm
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/toc.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/toc.htm
index f385da0f715..6871b57b83b 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/toc.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/toc.htm
@@ -37,12 +37,12 @@
     <tbody id="s4">
       <tr><th><a href="chapter-4.htm">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.htm">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.htm">Chapter 6 - 
@@ -62,7 +62,7 @@
     <tbody id="s9">
       <tr><th><a href="chapter-9.htm">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.htm">Chapter 10 - 
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-align-content-center.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-align-content-center.htm
index fb8d214f6a9..b507b45c1f3 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-align-content-center.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-align-content-center.htm
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html><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.htm" 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/html/ttwf-reftest-flex-align-content-end.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-align-content-end.htm
index 7567178f187..059b4ee835c 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-align-content-end.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-align-content-end.htm
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html><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.htm" rel="match">
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-align-content-space-around.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-align-content-space-around.htm
index 6fd1386e9de..b8718eb4365 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-align-content-space-around.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-align-content-space-around.htm
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html><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.htm" rel="match">
+    <link href="reference/ttwf-reftest-flex-align-content-space-around-ref.htm" 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/html/ttwf-reftest-flex-align-content-space-between.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-align-content-space-between.htm
index 72a69ca3034..1449c7c681f 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-align-content-space-between.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-align-content-space-between.htm
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html><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.htm" rel="match">
+    <link href="reference/ttwf-reftest-flex-align-content-space-between-ref.htm" 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/html/ttwf-reftest-flex-align-content-start.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-align-content-start.htm
index 2f1a3f4ed09..1a75946d73c 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-align-content-start.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-align-content-start.htm
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html><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.htm" rel="match">
+    <link href="reference/ttwf-reftest-flex-align-content-start-ref.htm" 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/html/ttwf-reftest-flex-direction-column-reverse.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-direction-column-reverse.htm
index c7fa8c2db69..2ab2054ef40 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-direction-column-reverse.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-direction-column-reverse.htm
@@ -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.htm" rel="match">
+    <link href="reference/ttwf-reftest-flex-direction-column-reverse-ref.htm" 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/html/ttwf-reftest-flex-wrap.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-wrap.htm
index a08e4e521c0..00be034f651 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-wrap.htm
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/ttwf-reftest-flex-wrap.htm
@@ -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.htm" rel="match">
+    <link href="reference/ttwf-reftest-flex-wrap-ref.htm" 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