Bug 1267462 part 3: Add more reftests for flex items with text & orthogonal flows (as modified copies of previous patch's test). r=mats
authorDaniel Holbert <dholbert@cs.stanford.edu>
Thu, 08 Feb 2018 13:01:23 -0800
changeset 752931 05619c4f4a701f7e949af34eb5736101c819a1a4
parent 752930 19aed0c8a84855b70af0c7fe74ac5af0cc07ab3b
child 752932 2a4fea53334eb5aaf173559a56a704d3bab59f52
push id98429
push usermak77@bonardo.net
push dateFri, 09 Feb 2018 10:14:12 +0000
reviewersmats
bugs1267462
milestone60.0a1
Bug 1267462 part 3: Add more reftests for flex items with text & orthogonal flows (as modified copies of previous patch's test). r=mats This patch includes two tests with a row-oriented vertical-writing-mode flex container, and one test with a column-oriented flex container. (And then the next patch in this series will add some more column-oriented variants as copies of this patch's last test.) Note: All of the tests in this patch *already* pass (unlike other tests added in this bug), so they don't have a 'fails' annotation in reftest.list. MozReview-Commit-ID: oaMvhjxv16
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html
layout/reftests/w3c-css/submitted/flexbox/reftest.list
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html
@@ -7,86 +7,89 @@
 <head>
   <title>CSS Reftest Reference</title>
   <meta charset="utf-8">
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <style>
   .container {
     display: block;
+    float: left;
     border: 2px solid purple;
     padding: 2px;
     margin-bottom: 2em;
-    height: 150px;
-    width: 500px;
+    height: 500px;
+    width: 150px;
   }
 
   span {
     display: block;
     background: lightgrey;
     border: 2px solid black;
     /* If browser supports it, signal the inline direction with border color: */
     border-block-start-color: orange;
     border-inline-start-color: lime;
 
     margin: 11px 13px 17px 7px;
     inline-size: 6px;
+
+    /* This really floats to top ('logical left'), since all the containers
+       have a vertical writing mode. */
+    float: left;
   }
 
   .small { font: 12px Ahem; }
   .big   { font: 20px Ahem; }
 
   .hl  { writing-mode: horizontal-tb;  direction: ltr; }
   .hr  { writing-mode: horizontal-tb;  direction: rtl; }
   .vl  { writing-mode: vertical-lr;    direction: ltr; }
   .vr  { writing-mode: vertical-rl;    direction: ltr; }
   .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
   .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
 
-  .container > .hl, .container > .hr {
-    /* In the testcase, these items are stretched vertically
+
+  .container > .vl,     .container > .vr,
+  .container > .vl_rtl, .container > .vr_rtl {
+    /* In the testcase, these items are stretched horizontally
        via the default "align-self:stretch" behavior, and because
-       they have a height of "auto".
-       (The rest of the items have a non-auto height from "inline-size"
-       and their vertical writing-mode, so those ones do not stretch.) */
-    height: 118px;
+       they have a width of "auto".
+       (The rest of the items have a non-auto width from "inline-size"
+       and their horizontal writing-mode, so those ones do not stretch.) */
+    width: 126px;
   }
-
-  .container.hl > * { float: left; }
-  .container.hr > * { float: right; }
-
   </style>
 </head>
 <body>
 
-<div class="container hl">
+<div class="container vl">
   <span class="hl small">a b c</span>
   <span class="hl big">d e</span>
   <span class="hr small">a b c</span>
   <span class="hr big">d e</span>
   <span class="vl small">a b c</span>
   <span class="vl big">d e</span>
 </div>
-<div class="container hl">
+<div class="container vl">
   <span class="vr small">a b c</span>
   <span class="vr big">d e</span>
   <span class="vl_rtl small">a b c</span>
   <span class="vl_rtl big">d e</span>
   <span class="vr_rtl small">a b c</span>
   <span class="vr_rtl big">d e</span>
 </div>
-<div class="container hr">
+<div class="container vr">
   <span class="hl small">a b c</span>
   <span class="hl big">d e</span>
   <span class="hr small">a b c</span>
   <span class="hr big">d e</span>
   <span class="vl small">a b c</span>
   <span class="vl big">d e</span>
 </div>
-<div class="container hr">
+<div class="container vr">
   <span class="vr small">a b c</span>
   <span class="vr big">d e</span>
   <span class="vl_rtl small">a b c</span>
   <span class="vl_rtl big">d e</span>
   <span class="vr_rtl small">a b c</span>
   <span class="vr_rtl big">d e</span>
 </div>
 
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html
@@ -2,33 +2,34 @@
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html>
 <head>
   <title>
     CSS Test: Testing a mix of flex items with various values for
-    'writing-mode' / 'direction' in a horizontal row-oriented flex container.
+    'writing-mode' / 'direction' in a vertical row-oriented flex container.
   </title>
   <meta charset="utf-8">
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
   <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
-  <link rel="match" href="flexbox-writing-mode-010-ref.html">
+  <link rel="match" href="flexbox-writing-mode-011-ref.html">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <style>
   .container {
     display: flex;
     flex-direction: row;
+    float: left;
     border: 2px solid purple;
     padding: 2px;
     margin-bottom: 2em;
-    height: 150px;
-    width: 500px;
+    height: 500px;
+    width: 150px;
   }
 
   span {
     display: block;
     background: lightgrey;
     border: 2px solid black;
     /* If browser supports it, signal the inline direction with border color: */
     border-block-start-color: orange;
@@ -46,41 +47,41 @@
   .vl  { writing-mode: vertical-lr;    direction: ltr; }
   .vr  { writing-mode: vertical-rl;    direction: ltr; }
   .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
   .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
   </style>
 </head>
 <body>
 
-<div class="container hl">
+<div class="container vl">
   <span class="hl small">a b c</span>
   <span class="hl big">d e</span>
   <span class="hr small">a b c</span>
   <span class="hr big">d e</span>
   <span class="vl small">a b c</span>
   <span class="vl big">d e</span>
 </div>
-<div class="container hl">
+<div class="container vl">
   <span class="vr small">a b c</span>
   <span class="vr big">d e</span>
   <span class="vl_rtl small">a b c</span>
   <span class="vl_rtl big">d e</span>
   <span class="vr_rtl small">a b c</span>
   <span class="vr_rtl big">d e</span>
 </div>
-<div class="container hr">
+<div class="container vr">
   <span class="hl small">a b c</span>
   <span class="hl big">d e</span>
   <span class="hr small">a b c</span>
   <span class="hr big">d e</span>
   <span class="vl small">a b c</span>
   <span class="vl big">d e</span>
 </div>
-<div class="container hr">
+<div class="container vr">
   <span class="vr small">a b c</span>
   <span class="vr big">d e</span>
   <span class="vl_rtl small">a b c</span>
   <span class="vl_rtl big">d e</span>
   <span class="vr_rtl small">a b c</span>
   <span class="vr_rtl big">d e</span>
 </div>
 
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html
@@ -7,86 +7,89 @@
 <head>
   <title>CSS Reftest Reference</title>
   <meta charset="utf-8">
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <style>
   .container {
     display: block;
+    float: left;
     border: 2px solid purple;
     padding: 2px;
     margin-bottom: 2em;
-    height: 150px;
-    width: 500px;
+    height: 500px;
+    width: 150px;
   }
 
   span {
     display: block;
     background: lightgrey;
     border: 2px solid black;
     /* If browser supports it, signal the inline direction with border color: */
     border-block-start-color: orange;
     border-inline-start-color: lime;
 
     margin: 11px 13px 17px 7px;
     inline-size: 6px;
+
+    /* This really floats to top ('logical left'), since all the containers
+       have a vertical writing mode. */
+    float: right;
   }
 
   .small { font: 12px Ahem; }
   .big   { font: 20px Ahem; }
 
   .hl  { writing-mode: horizontal-tb;  direction: ltr; }
   .hr  { writing-mode: horizontal-tb;  direction: rtl; }
   .vl  { writing-mode: vertical-lr;    direction: ltr; }
   .vr  { writing-mode: vertical-rl;    direction: ltr; }
   .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
   .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
 
-  .container > .hl, .container > .hr {
-    /* In the testcase, these items are stretched vertically
+
+  .container > .vl,     .container > .vr,
+  .container > .vl_rtl, .container > .vr_rtl {
+    /* In the testcase, these items are stretched horizontally
        via the default "align-self:stretch" behavior, and because
-       they have a height of "auto".
-       (The rest of the items have a non-auto height from "inline-size"
-       and their vertical writing-mode, so those ones do not stretch.) */
-    height: 118px;
+       they have a width of "auto".
+       (The rest of the items have a non-auto width from "inline-size"
+       and their horizontal writing-mode, so those ones do not stretch.) */
+    width: 126px;
   }
-
-  .container.hl > * { float: left; }
-  .container.hr > * { float: right; }
-
   </style>
 </head>
 <body>
 
-<div class="container hl">
+<div class="container vl_rtl">
   <span class="hl small">a b c</span>
   <span class="hl big">d e</span>
   <span class="hr small">a b c</span>
   <span class="hr big">d e</span>
   <span class="vl small">a b c</span>
   <span class="vl big">d e</span>
 </div>
-<div class="container hl">
+<div class="container vl_rtl">
   <span class="vr small">a b c</span>
   <span class="vr big">d e</span>
   <span class="vl_rtl small">a b c</span>
   <span class="vl_rtl big">d e</span>
   <span class="vr_rtl small">a b c</span>
   <span class="vr_rtl big">d e</span>
 </div>
-<div class="container hr">
+<div class="container vr_rtl">
   <span class="hl small">a b c</span>
   <span class="hl big">d e</span>
   <span class="hr small">a b c</span>
   <span class="hr big">d e</span>
   <span class="vl small">a b c</span>
   <span class="vl big">d e</span>
 </div>
-<div class="container hr">
+<div class="container vr_rtl">
   <span class="vr small">a b c</span>
   <span class="vr big">d e</span>
   <span class="vl_rtl small">a b c</span>
   <span class="vl_rtl big">d e</span>
   <span class="vr_rtl small">a b c</span>
   <span class="vr_rtl big">d e</span>
 </div>
 
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html
@@ -2,33 +2,35 @@
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html>
 <head>
   <title>
     CSS Test: Testing a mix of flex items with various values for
-    'writing-mode' / 'direction' in a horizontal row-oriented flex container.
+    'writing-mode' / 'direction' in a vertical row-oriented flex container
+    with 'direction' flipped.
   </title>
   <meta charset="utf-8">
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
   <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
-  <link rel="match" href="flexbox-writing-mode-010-ref.html">
+  <link rel="match" href="flexbox-writing-mode-012-ref.html">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <style>
   .container {
     display: flex;
     flex-direction: row;
+    float: left;
     border: 2px solid purple;
     padding: 2px;
     margin-bottom: 2em;
-    height: 150px;
-    width: 500px;
+    height: 500px;
+    width: 150px;
   }
 
   span {
     display: block;
     background: lightgrey;
     border: 2px solid black;
     /* If browser supports it, signal the inline direction with border color: */
     border-block-start-color: orange;
@@ -46,41 +48,41 @@
   .vl  { writing-mode: vertical-lr;    direction: ltr; }
   .vr  { writing-mode: vertical-rl;    direction: ltr; }
   .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
   .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
   </style>
 </head>
 <body>
 
-<div class="container hl">
+<div class="container vl_rtl">
   <span class="hl small">a b c</span>
   <span class="hl big">d e</span>
   <span class="hr small">a b c</span>
   <span class="hr big">d e</span>
   <span class="vl small">a b c</span>
   <span class="vl big">d e</span>
 </div>
-<div class="container hl">
+<div class="container vl_rtl">
   <span class="vr small">a b c</span>
   <span class="vr big">d e</span>
   <span class="vl_rtl small">a b c</span>
   <span class="vl_rtl big">d e</span>
   <span class="vr_rtl small">a b c</span>
   <span class="vr_rtl big">d e</span>
 </div>
-<div class="container hr">
+<div class="container vr_rtl">
   <span class="hl small">a b c</span>
   <span class="hl big">d e</span>
   <span class="hr small">a b c</span>
   <span class="hr big">d e</span>
   <span class="vl small">a b c</span>
   <span class="vl big">d e</span>
 </div>
-<div class="container hr">
+<div class="container vr_rtl">
   <span class="vr small">a b c</span>
   <span class="vr big">d e</span>
   <span class="vl_rtl small">a b c</span>
   <span class="vl_rtl big">d e</span>
   <span class="vr_rtl small">a b c</span>
   <span class="vr_rtl big">d e</span>
 </div>
 
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html
@@ -7,88 +7,92 @@
 <head>
   <title>CSS Reftest Reference</title>
   <meta charset="utf-8">
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <style>
   .container {
     display: block;
+    float: left;
     border: 2px solid purple;
     padding: 2px;
     margin-bottom: 2em;
-    height: 150px;
-    width: 500px;
+    height: 500px;
+    width: 150px;
   }
 
   span {
     display: block;
     background: lightgrey;
     border: 2px solid black;
     /* If browser supports it, signal the inline direction with border color: */
     border-block-start-color: orange;
     border-inline-start-color: lime;
 
     margin: 11px 13px 17px 7px;
     inline-size: 6px;
   }
 
+  nocollapse {
+    /* special element to disable margin-collapsing */
+    display: block;
+    overflow: hidden;
+    height: 0;
+  }
   .small { font: 12px Ahem; }
   .big   { font: 20px Ahem; }
 
   .hl  { writing-mode: horizontal-tb;  direction: ltr; }
   .hr  { writing-mode: horizontal-tb;  direction: rtl; }
   .vl  { writing-mode: vertical-lr;    direction: ltr; }
   .vr  { writing-mode: vertical-rl;    direction: ltr; }
   .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
   .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
 
-  .container > .hl, .container > .hr {
-    /* In the testcase, these items are stretched vertically
+  .container > .vl,     .container > .vr,
+  .container > .vl_rtl, .container > .vr_rtl {
+    /* In the testcase, these items are stretched horizontally
        via the default "align-self:stretch" behavior, and because
-       they have a height of "auto".
-       (The rest of the items have a non-auto height from "inline-size"
-       and their vertical writing-mode, so those ones do not stretch.) */
-    height: 118px;
+       they have a width of "auto".
+       (The rest of the items have a non-auto width from "inline-size"
+       and their horizontal writing-mode, so those ones do not stretch.) */
+    width: 126px;
   }
-
-  .container.hl > * { float: left; }
-  .container.hr > * { float: right; }
-
   </style>
 </head>
 <body>
 
 <div class="container hl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
+  <span class="hl big">d e</span>        <nocollapse></nocollapse>
+  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
+  <span class="hr big">d e</span>        <nocollapse></nocollapse>
+  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
+  <span class="vl big">d e</span>        <nocollapse></nocollapse>
 </div>
 <div class="container hl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
+  <span class="vr big">d e</span>        <nocollapse></nocollapse>
+  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
+  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
+  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
+  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
 </div>
 <div class="container hr">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
+  <span class="hl big">d e</span>        <nocollapse></nocollapse>
+  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
+  <span class="hr big">d e</span>        <nocollapse></nocollapse>
+  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
+  <span class="vl big">d e</span>        <nocollapse></nocollapse>
 </div>
 <div class="container hr">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
+  <span class="vr big">d e</span>        <nocollapse></nocollapse>
+  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
+  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
+  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
+  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
 </div>
 
 </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html
@@ -2,33 +2,34 @@
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html>
 <head>
   <title>
     CSS Test: Testing a mix of flex items with various values for
-    'writing-mode' / 'direction' in a horizontal row-oriented flex container.
+    'writing-mode' / 'direction' in a horizontal column-oriented flex container.
   </title>
   <meta charset="utf-8">
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
   <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
-  <link rel="match" href="flexbox-writing-mode-010-ref.html">
+  <link rel="match" href="flexbox-writing-mode-013-ref.html">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <style>
   .container {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
+    float: left;
     border: 2px solid purple;
     padding: 2px;
     margin-bottom: 2em;
-    height: 150px;
-    width: 500px;
+    height: 500px;
+    width: 150px;
   }
 
   span {
     display: block;
     background: lightgrey;
     border: 2px solid black;
     /* If browser supports it, signal the inline direction with border color: */
     border-block-start-color: orange;
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -218,16 +218,19 @@ fails == flexbox-min-height-auto-002b.ht
 == flexbox-writing-mode-003.html flexbox-writing-mode-003-ref.html
 == flexbox-writing-mode-004.html flexbox-writing-mode-004-ref.html
 == flexbox-writing-mode-005.html flexbox-writing-mode-005-ref.html
 == flexbox-writing-mode-006.html flexbox-writing-mode-006-ref.html
 == flexbox-writing-mode-007.html flexbox-writing-mode-007-ref.html
 == flexbox-writing-mode-008.html flexbox-writing-mode-008-ref.html
 == flexbox-writing-mode-009.html flexbox-writing-mode-009-ref.html
 fails == flexbox-writing-mode-010.html flexbox-writing-mode-010-ref.html # bug 1267462
+fuzzy(1,16) == flexbox-writing-mode-011.html flexbox-writing-mode-011-ref.html
+== flexbox-writing-mode-012.html flexbox-writing-mode-012-ref.html
+== flexbox-writing-mode-013.html flexbox-writing-mode-013-ref.html
 
 # Single-line size clamping
 == flexbox-single-line-clamp-1.html flexbox-single-line-clamp-1-ref.html
 == flexbox-single-line-clamp-2.html flexbox-single-line-clamp-2-ref.html
 == flexbox-single-line-clamp-3.html flexbox-single-line-clamp-3-ref.html
 
 # Flexbox as an absolute containing block.
 == position-absolute-containing-block-001.html position-absolute-containing-block-001-ref.html