From e46011bcc317a399b56780604648709a7d1f6d20 Mon Sep 17 00:00:00 2001
From: roytam1 <roytam@gmail.com>
Date: Thu, 29 Sep 2022 15:18:00 +0800
Subject: [PATCH] Revert "Issue #1986 - Add in reftests for new behavior."

This reverts commit cf5dfc5e7d31d607ecc3b125b570a95343e9b00d.
---
 .../flexbox-basic-block-horiz-001v.xhtml      |  73 ----------
 .../flexbox-basic-block-vert-001v.xhtml       |  75 ----------
 .../flexbox-basic-canvas-horiz-001v.xhtml     | 105 --------------
 .../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 ------------------
 .../flexbox/flexbox-mbp-horiz-002v.xhtml      |  86 ------------
 .../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 deletions(-)
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001v.xhtml
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001v.xhtml
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001v.xhtml
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001v.xhtml
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001v.html
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002v.html
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003v.html
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004v.html
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006v.html
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002v.xhtml
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003v.xhtml
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html
 delete mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html
 delete 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
deleted file mode 100644
index f1dfdfdb86..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001v.xhtml
+++ /dev/null
@@ -1,73 +0,0 @@
-<?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
deleted file mode 100644
index da943dfc56..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001v.xhtml
+++ /dev/null
@@ -1,75 +0,0 @@
-<?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
deleted file mode 100644
index ad623d77f7..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001v.xhtml
+++ /dev/null
@@ -1,105 +0,0 @@
-<?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
deleted file mode 100644
index 057f63ae62..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001v.xhtml
+++ /dev/null
@@ -1,107 +0,0 @@
-<?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
deleted file mode 100644
index 4cc910b9e2..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001v.html
+++ /dev/null
@@ -1,128 +0,0 @@
-<!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
deleted file mode 100644
index 0df92f9954..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002v.html
+++ /dev/null
@@ -1,128 +0,0 @@
-<!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
deleted file mode 100644
index cb9275fd8c..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003v.html
+++ /dev/null
@@ -1,128 +0,0 @@
-<!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
deleted file mode 100644
index 01c5271c45..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004v.html
+++ /dev/null
@@ -1,128 +0,0 @@
-<!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
deleted file mode 100644
index ed1dcace0f..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html
+++ /dev/null
@@ -1,129 +0,0 @@
-<!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
deleted file mode 100644
index 8c12fad8c7..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006v.html
+++ /dev/null
@@ -1,129 +0,0 @@
-<!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
deleted file mode 100644
index a02e3406c9..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002v.xhtml
+++ /dev/null
@@ -1,86 +0,0 @@
-<?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
deleted file mode 100644
index 8baef30227..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003v.xhtml
+++ /dev/null
@@ -1,88 +0,0 @@
-<?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
deleted file mode 100644
index e488416412..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<!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
deleted file mode 100644
index 55c50e850f..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<!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
deleted file mode 100644
index 8b926490b6..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html
+++ /dev/null
@@ -1,97 +0,0 @@
-<!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
deleted file mode 100644
index 6114e19275..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<!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
deleted file mode 100644
index c03358be42..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html
+++ /dev/null
@@ -1,97 +0,0 @@
-<!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
deleted file mode 100644
index a7b05f178d..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<!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
deleted file mode 100644
index 2a27003a5c..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html
+++ /dev/null
@@ -1,98 +0,0 @@
-<!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
deleted file mode 100644
index a5d483c442..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<!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
deleted file mode 100644
index 4e4f5904a1..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html
+++ /dev/null
@@ -1,96 +0,0 @@
-<!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
deleted file mode 100644
index 1a5443279a..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<!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
deleted file mode 100644
index a236ca11d5..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html
+++ /dev/null
@@ -1,96 +0,0 @@
-<!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
deleted file mode 100644
index af1f9b8456..0000000000
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<!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>