From 2fc5e3ad7d2b09a32e79cb201e405f57329c297e Mon Sep 17 00:00:00 2001
From: Jeremy Andrews <athenian200@outlook.com>
Date: Thu, 18 Aug 2022 13:27:43 -0500
Subject: Issue #1986 - Add in reftests for new behavior.

Almost forgot to do this. This is in case we need to revisit this for
regressions in the future and the tests are not available online. Never know
when they might come in handy again.
---
 .../flexbox/flexbox-basic-block-horiz-001v.xhtml   |  73 ++++++++++++
 .../flexbox/flexbox-basic-block-vert-001v.xhtml    |  75 ++++++++++++
 .../flexbox/flexbox-basic-canvas-horiz-001v.xhtml  | 105 +++++++++++++++++
 .../flexbox/flexbox-basic-canvas-vert-001v.xhtml   | 107 +++++++++++++++++
 .../flexbox/flexbox-intrinsic-ratio-001v.html      | 128 ++++++++++++++++++++
 .../flexbox/flexbox-intrinsic-ratio-002v.html      | 128 ++++++++++++++++++++
 .../flexbox/flexbox-intrinsic-ratio-003v.html      | 128 ++++++++++++++++++++
 .../flexbox/flexbox-intrinsic-ratio-004v.html      | 128 ++++++++++++++++++++
 .../flexbox/flexbox-intrinsic-ratio-005v.html      | 129 +++++++++++++++++++++
 .../flexbox/flexbox-intrinsic-ratio-006v.html      | 129 +++++++++++++++++++++
 .../submitted/flexbox/flexbox-mbp-horiz-002v.xhtml |  86 ++++++++++++++
 .../submitted/flexbox/flexbox-mbp-horiz-003v.xhtml |  88 ++++++++++++++
 .../flexbox/flexbox-writing-mode-010-ref.html      |  94 +++++++++++++++
 .../flexbox/flexbox-writing-mode-010.html          |  88 ++++++++++++++
 .../flexbox/flexbox-writing-mode-011-ref.html      |  97 ++++++++++++++++
 .../flexbox/flexbox-writing-mode-011.html          |  89 ++++++++++++++
 .../flexbox/flexbox-writing-mode-012-ref.html      |  97 ++++++++++++++++
 .../flexbox/flexbox-writing-mode-012.html          |  90 ++++++++++++++
 .../flexbox/flexbox-writing-mode-013-ref.html      |  98 ++++++++++++++++
 .../flexbox/flexbox-writing-mode-013.html          |  89 ++++++++++++++
 .../flexbox/flexbox-writing-mode-014-ref.html      |  96 +++++++++++++++
 .../flexbox/flexbox-writing-mode-014.html          |  88 ++++++++++++++
 .../flexbox/flexbox-writing-mode-015-ref.html      |  96 +++++++++++++++
 .../flexbox/flexbox-writing-mode-015.html          |  89 ++++++++++++++
 24 files changed, 2415 insertions(+)
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001v.xhtml
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001v.xhtml
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001v.xhtml
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001v.xhtml
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001v.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002v.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003v.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004v.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006v.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002v.xhtml
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003v.xhtml
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html

diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001v.xhtml
new file mode 100644
index 0000000000..f1dfdfdb86
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001v.xhtml
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with blocks as flex items in a horizontal flex container, with
+     various "flex" values and various combinations of the items
+     and with various writing-modes on the items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+      CSS Test: Testing flexbox layout algorithm property on block flex items in a horizontal flex container
+      (with various writing-modes on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-block-horiz-001-ref.xhtml"/>
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        font-size: 10px;
+        display: flex;
+      }
+      div.a {
+        flex: 1 0 30px;
+        background: lightgreen;
+        writing-mode: vertical-lr;
+      }
+      div.b {
+        flex: 2 0 20px;
+        background: yellow;
+        writing-mode: vertical-rl;
+      }
+      div.c {
+        flex: 3 0 40px;
+        background: orange;
+        writing-mode: sideways-lr;
+      }
+      div.flexNone {
+        flex: none;
+        background: pink;
+        writing-mode: vertical-lr;
+      }
+      div.flexBasis {
+        flex: 0 0 20px;
+        background: gray;
+        writing-mode: sideways-rl;
+      }
+      div.spacer {
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001v.xhtml
new file mode 100644
index 0000000000..da943dfc56
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001v.xhtml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with blocks as flex items in a vertical flex container, with
+     various "flex" values and various combinations of the items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+      CSS Test: Testing flexbox layout algorithm property on block flex items in a vertical flex container
+      (with various writing-modes on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-block-vert-001-ref.xhtml"/>
+    <style>
+      div { width: 50px; }
+      div.flexbox {
+        float: left;
+        border: 1px dashed blue;
+        height: 200px;
+        font-size: 10px;
+        display: flex;
+        flex-direction: column;
+      }
+      div.a {
+        flex: 1 0 30px;
+        background: lightgreen;
+        writing-mode: vertical-lr;
+      }
+      div.b {
+        flex: 2 0 20px;
+        background: yellow;
+        writing-mode: vertical-rl;
+      }
+      div.c {
+        flex: 3 0 40px;
+        background: orange;
+        writing-mode: sideways-lr;
+      }
+      div.flexNone {
+        flex: none;
+        background: pink;
+        writing-mode: vertical-lr;
+      }
+      div.flexBasis {
+        flex: 0 0 20px;
+        background: gray;
+        writing-mode: sideways-rl;
+      }
+      div.spacer {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001v.xhtml
new file mode 100644
index 0000000000..ad623d77f7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001v.xhtml
@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that canvas elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+      CSS Test: Testing flexbox layout algorithm property on canvas flex items in a horizontal flex container
+      (with a vertical writing-mode on the canvas flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-canvas-horiz-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      canvas {
+        min-width: 0;
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+        writing-mode: vertical-lr;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <canvas/>
+    </div>
+
+    <!-- B) Text and a canvas (ensure they aren't merged into one flex item) -->
+    <div class="flexbox">
+      some words <canvas/>
+    </div>
+
+    <!-- C) Two canvas elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <canvas style="flex: 5"/>
+      <canvas style="flex: 3"/>
+    </div>
+
+    <!-- D) Two canvas elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <canvas style="width: 33px; flex: 2 auto"/>
+      <canvas style="width: 13px; flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <canvas style="width: 150px; flex: 1 4 auto"/>
+      <canvas style="width: 100px; flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-width -->
+    <!-- Same as (D), except we've added a max-width on the second element.
+      -->
+    <div class="flexbox">
+      <canvas style="width: 33px; flex: 2 auto"/>
+      <canvas style="width: 13px; max-width: 90px; flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-width -->
+    <!-- Same as (C), except we've added a min-width on the second element.
+      -->
+    <div class="flexbox">
+      <canvas style="width: 33px; flex: 2 auto"/>
+      <canvas style="width: 13px; min-width: 150px; flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001v.xhtml
new file mode 100644
index 0000000000..057f63ae62
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001v.xhtml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that canvas elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+      CSS Test: Testing flexbox layout algorithm property on canvas flex items in a vertical flex container
+      (with a vertical writing-mode on the canvas flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-canvas-vert-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        height: 200px;
+        background: lightgreen;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        float: left;
+        margin-right: 10px;
+        font: 8px monospace;
+      }
+      canvas {
+        width: 20px;
+        height: 10px;
+        min-height: 0;
+        border: 1px dotted green;
+        writing-mode: vertical-lr;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <canvas/>
+    </div>
+
+    <!-- B) Text and a canvas (ensure they aren't merged into one flex item) -->
+    <div class="flexbox">
+      a b <canvas/>
+    </div>
+
+    <!-- C) Two canvas elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <canvas style="flex: 5"/>
+      <canvas style="flex: 3"/>
+    </div>
+
+    <!-- D) Two canvas elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <canvas style="height: 33px; flex: 2 auto"/>
+      <canvas style="height: 13px; flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <canvas style="height: 150px; flex: 1 4 auto"/>
+      <canvas style="height: 100px; flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-height -->
+    <!-- Same as (D), except we've added a max-height on the second element.
+      -->
+    <div class="flexbox">
+      <canvas style="height: 33px; flex: 2 auto"/>
+      <canvas style="height: 13px; max-height: 90px; flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-height -->
+    <!-- Same as (C), except we've added a min-height on the second element.
+      -->
+    <div class="flexbox">
+      <canvas style="height: 33px; flex: 2 auto"/>
+      <canvas style="height: 13px; min-height: 150px; flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001v.html
new file mode 100644
index 0000000000..4cc910b9e2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001v.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flex item w/ intrinsic ratio
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <link rel="match" href="flexbox-intrinsic-ratio-001-ref.html">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: row;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        writing-mode: vertical-lr;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002v.html
new file mode 100644
index 0000000000..0df92f9954
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002v.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flex item w/ intrinsic ratio
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <link rel="match" href="flexbox-intrinsic-ratio-001-ref.html">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        writing-mode: vertical-lr;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003v.html
new file mode 100644
index 0000000000..cb9275fd8c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003v.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on stretched flex item w/ intrinsic ratio
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <link rel="match" href="flexbox-intrinsic-ratio-003-ref.html">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: row;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: stretch;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        writing-mode: vertical-rl;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004v.html
new file mode 100644
index 0000000000..01c5271c45
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004v.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on stretched flex item w/ intrinsic ratio
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <link rel="match" href="flexbox-intrinsic-ratio-004-ref.html">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: stretch;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        writing-mode: vertical-rl;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html
new file mode 100644
index 0000000000..ed1dcace0f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flexible flex item w/ intrinsic ratio
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <link rel="match" href="flexbox-intrinsic-ratio-005-ref.html">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: row;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        flex: 1;
+        writing-mode: vertical-lr;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 1 1 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006v.html
new file mode 100644
index 0000000000..8c12fad8c7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006v.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flexible flex item w/ intrinsic ratio
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <link rel="match" href="flexbox-intrinsic-ratio-006-ref.html">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        flex: 1;
+        writing-mode: vertical-lr;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 1 1 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002v.xhtml
new file mode 100644
index 0000000000..a02e3406c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002v.xhtml
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with margin/border/padding on flex items
+     and with various writing-modes on the items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+      CSS Test: Testing margins, borders, and padding on flex items in a horizontal flex container
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-mbp-horiz-002-ref.xhtml"/>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        font-size: 10px;
+        display: flex;
+      }
+      div.a {
+        flex: 1 0 9px;
+        background: lightgreen;
+        margin-left: 1px;
+        margin-right: 3px;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+        padding-left: 5px;
+        padding-right: 6px;
+        writing-mode: vertical-lr;
+      }
+      div.b {
+        flex: 2 0 1px;
+        background: yellow;
+        margin-left: 2px;
+        margin-right: 4px;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+        padding-left: 1px;
+        padding-right: 2px;
+        writing-mode: vertical-rl;
+      }
+      div.c {
+        flex: 3 0 40px;
+        background: orange;
+        writing-mode: sideways-lr;
+      }
+      div.flexNone {
+        flex: none;
+        background: pink;
+        writing-mode: vertical-lr;
+      }
+      div.flexBasis {
+        flex: 0 0 20px;
+        background: gray;
+        writing-mode: sideways-rl;
+      }
+      div.spacer {
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003v.xhtml
new file mode 100644
index 0000000000..8baef30227
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003v.xhtml
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with border/padding on a flex container and on its children -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+      CSS Test: Testing borders and padding on a horizontal flex container and its flex items
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-mbp-horiz-003-ref.xhtml"/>
+    <style>
+      div { height: 20px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        display: flex;
+        margin-bottom: 2px;
+      }
+
+      <!-- customizations for flex container border/padding -->
+      .borderA {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 6px;
+        border-right-width: 4px;
+        border-bottom-width: 2px;
+        border-left-width: 8px;
+      }
+
+      .borderB {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 4px;
+        border-right-width: 5px;
+        border-bottom-width: 6px;
+        border-left-width: 7px;
+      }
+
+      .paddingA {
+        padding: 4px 3px 2px 1px;
+      }
+
+      .paddingB {
+        padding: 8px 11px 14px 17px;
+      }
+
+      div.child1 {
+        flex: 1 0 24px;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+        writing-mode: vertical-rl;
+      }
+      div.child2 {
+        flex: 2 0 10px;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+        writing-mode: vertical-lr;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox borderA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderA paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderA paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html
new file mode 100644
index 0000000000..e488416412
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<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;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 150px;
+    width: 500px;
+  }
+
+  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;
+  }
+
+  .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
+       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;
+  }
+
+  .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>
+</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>
+</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>
+</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>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html
new file mode 100644
index 0000000000..55c50e850f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<!--
+     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.
+  </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="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: row;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 150px;
+    width: 500px;
+  }
+
+  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;
+  }
+
+  .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; }
+  </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>
+</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>
+</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>
+</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>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html
new file mode 100644
index 0000000000..8b926490b6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<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: 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 > .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 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;
+  }
+  </style>
+</head>
+<body>
+
+<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 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 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 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>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html
new file mode 100644
index 0000000000..6114e19275
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<!--
+     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 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-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: 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;
+  }
+
+  .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; }
+  </style>
+</head>
+<body>
+
+<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 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 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 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>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html
new file mode 100644
index 0000000000..c03358be42
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<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: 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 > .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 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;
+  }
+  </style>
+</head>
+<body>
+
+<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 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 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 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>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html
new file mode 100644
index 0000000000..a7b05f178d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<!--
+     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 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-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: 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;
+  }
+
+  .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; }
+  </style>
+</head>
+<body>
+
+<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 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 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 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>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html
new file mode 100644
index 0000000000..2a27003a5c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<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: 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 > .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 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;
+  }
+  </style>
+</head>
+<body>
+
+<div class="container hl">
+  <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>    <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>    <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>    <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>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html
new file mode 100644
index 0000000000..a5d483c442
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<!--
+     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 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-013-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    float: left;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    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;
+  }
+
+  .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; }
+  </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>
+</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>
+</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>
+</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>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html
new file mode 100644
index 0000000000..4e4f5904a1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<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;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 150px;
+    width: 500px;
+  }
+
+  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
+       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;
+  }
+  </style>
+</head>
+<body>
+
+<div class="container vl">
+  <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 vl">
+  <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 vr">
+  <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 vr">
+  <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>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html
new file mode 100644
index 0000000000..1a5443279a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<!--
+     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 vertical 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-014-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 150px;
+    width: 500px;
+  }
+
+  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;
+  }
+
+  .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; }
+  </style>
+</head>
+<body>
+
+<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 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 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 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>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html
new file mode 100644
index 0000000000..a236ca11d5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<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;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 150px;
+    width: 500px;
+  }
+
+  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
+       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;
+  }
+  </style>
+</head>
+<body>
+
+<div class="container vl_rtl">
+  <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 vl_rtl">
+  <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 vr_rtl">
+  <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 vr_rtl">
+  <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>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html
new file mode 100644
index 0000000000..af1f9b8456
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<!--
+     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 vertical column-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-015-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 150px;
+    width: 500px;
+  }
+
+  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;
+  }
+
+  .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; }
+  </style>
+</head>
+<body>
+
+<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 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 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 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>
+
+</body>
+</html>
-- 
cgit v1.2.3