Adding upstream version 86.0.1.upstream/86.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-28 14:29:10 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-28 14:29:10 +0000
commit: 2aa4a82499d4becd2284cdb482213d541b8804dd (patch)
tree: b80bf8bf13c3766139fbacc530efd0dd9d54394c /layout/reftests/webkit-box
parent: Initial commit. (diff)
download: firefox-2aa4a82499d4becd2284cdb482213d541b8804dd.tar.xz
firefox-2aa4a82499d4becd2284cdb482213d541b8804dd.zip
38 files changed, 3429 insertions, 0 deletions
diff --git a/layout/reftests/webkit-box/reftest.list b/layout/reftests/webkit-box/reftest.list
new file mode 100644
index 0000000000..247ec32348
--- /dev/null
+++ b/layout/reftests/webkit-box/reftest.list
@@ -0,0 +1,50 @@
+# This directory contains tests for "display: -webkit-box" and associated
+# CSS properties.
+
+# Tests for abspos children inside of a -webkit-box:
+== webkit-box-abspos-children-1.html webkit-box-abspos-children-1-ref.html
+
+# Tests for anonymous flex item formation inside of a "-webkit-box":
+# Note: some of these tests are marked as failing, because we don't match
+# WebKit/Blink on them.  (The reference case represents the WebKit/Blink
+# rendering.) We could probably make them pass by implementing some quirks, if
+# it turns out that the web depends on WebKit/Blink's behavior in these cases.
+random-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) == webkit-box-anon-flex-items-1a.html webkit-box-anon-flex-items-1-ref.html # Bug 1392106
+random-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) == webkit-box-anon-flex-items-1b.html webkit-box-anon-flex-items-1-ref.html # Bug 1392106
+fails == webkit-box-anon-flex-items-2.html webkit-box-anon-flex-items-2-ref.html
+fails == webkit-box-anon-flex-items-3.html webkit-box-anon-flex-items-3-ref.html
+
+# Tests for "-webkit-box" & "-webkit-inline-box" as display values:
+== webkit-display-values-1.html webkit-display-values-1-ref.html
+
+# Tests for "-webkit-box-align" (cross-axis alignment):
+== webkit-box-align-horiz-1a.html webkit-box-align-horiz-1-ref.html
+== webkit-box-align-horiz-1b.html webkit-box-align-horiz-1-ref.html
+== webkit-box-align-vert-1.html webkit-box-align-vert-1-ref.html
+
+# Tests for "-webkit-box-direction":
+== webkit-box-direction-1.html webkit-box-direction-1-ref.html
+== webkit-box-direction-2.html webkit-box-direction-2-ref.html
+
+# Tests for "-webkit-box-flex" (flexibility of items)
+== webkit-box-flex-1.html webkit-box-flex-1-ref.html
+
+# Tests for "-webkit-box-ordinal-group"
+== webkit-box-ordinal-group-1.html webkit-box-ordinal-group-1-ref.html
+# XXXdholbert The following test fails because we accept "0" as a valid value
+# for -webkit-box-ordinal-group (unlike Chrome/Blink), because that's simply
+# how its aliased property (-moz-box-ordinal-group) behaves. This shouldn't
+# matter in practice; it could only cause trouble if sites accidentally depend
+# on the "0" value being rejected.
+fails == webkit-box-ordinal-group-2.html webkit-box-ordinal-group-2-ref.html
+== webkit-box-ordinal-group-3.html webkit-box-ordinal-group-3-ref.html
+
+# Tests for "-webkit-box-pack" (main-axis alignment):
+== webkit-box-pack-horiz-1a.html webkit-box-pack-horiz-1-ref.html
+== webkit-box-pack-horiz-1b.html webkit-box-pack-horiz-1-ref.html
+== webkit-box-pack-vert-1.html webkit-box-pack-vert-1-ref.html
+
+# Tests for "display: -webkit-box" container mixed with modern flex properties
+# (which shouldn't influence behavior of -webkit-box)
+== webkit-box-with-modern-css-1.html webkit-box-with-modern-css-1-ref.html
+== webkit-box-with-modern-css-2.html webkit-box-with-modern-css-2-ref.html
diff --git a/layout/reftests/webkit-box/webkit-box-abspos-children-1-ref.html b/layout/reftests/webkit-box/webkit-box-abspos-children-1-ref.html
new file mode 100644
index 0000000000..2bc8596dee
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-abspos-children-1-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- NOTE: This reference case uses the same markup as the testcase, except:
+      (1) This reference case uses modern flexbox CSS instead of -webkit-box.
+      (2) In the 2nd and 4th containers here (where the testcase makes the
+          *2nd* flex item abspos), this reference case simply uses no absolute
+          positioning at all, to produce the correct expected rendering
+          (with the 2nd flex item being positioned after the 1st, rather than
+          being superimposed on top of it).
+-->
+<html>
+<head>
+  <title>Reference: simple positioning of abspos children in -webkit-box</title>
+  <style>
+    .container {
+      border: 1px solid black;
+      width: 200px;
+    }
+    .box        { display: flex }
+    .inline-box { display: inline-flex }
+    .abs { position: absolute }
+    .a { border: 3px solid purple }
+    .b { border: 3px solid orange }
+</style>
+</head>
+<body>
+  <!-- Test abspos child in -webkit-box: -->
+  <div class="container box">
+    <div class="a abs">aa</div>
+    <div class="b">bbbb</div>
+  </div>
+  <div class="container box">
+    <div class="a">aa</div>
+    <div class="b">bbbb</div>
+  </div>
+
+  <!-- Test abspos child in -webkit-inline-box: -->
+  <div class="container inline-box">
+    <div class="a abs">aa</div>
+    <div class="b">bbbb</div>
+  </div>
+  <div class="container inline-box">
+    <div class="a">aa</div>
+    <div class="b">bbbb</div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-abspos-children-1.html b/layout/reftests/webkit-box/webkit-box-abspos-children-1.html
new file mode 100644
index 0000000000..ed448174cc
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-abspos-children-1.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Testcase: simple positioning of abspos children in -webkit-box</title>
+  <style>
+    .container {
+      border: 1px solid black;
+      width: 200px;
+    }
+    .box        { display: -webkit-box }
+    .inline-box { display: -webkit-inline-box }
+    .abs { position: absolute }
+    .a { border: 3px solid purple }
+    .b { border: 3px solid orange }
+</style>
+</head>
+<body>
+  <!-- Test abspos child in -webkit-box: -->
+  <div class="container box">
+    <div class="a abs">aa</div>
+    <div class="b">bbbb</div>
+  </div>
+  <div class="container box">
+    <div class="a">aa</div>
+    <div class="b abs">bbbb</div>
+  </div>
+
+  <!-- Test abspos child in -webkit-inline-box: -->
+  <div class="container inline-box">
+    <div class="a abs">aa</div>
+    <div class="b">bbbb</div>
+  </div>
+
+  <div class="container inline-box"
+       style="vertical-align: top">
+    <!-- XXXdholbert 'vertical-align' here is a hackaround for bug 1328792 -->
+    <div class="a">aa</div>
+    <div class="b abs">bbbb</div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-align-horiz-1-ref.html b/layout/reftests/webkit-box/webkit-box-align-horiz-1-ref.html
new file mode 100644
index 0000000000..2ee021a63e
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-align-horiz-1-ref.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Reference
+  </title>
+  <style>
+    .box {
+      display: flex;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > *:nth-child(1) {
+      background: turquoise;
+      /* auto width */
+      height: 1em;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+      font-size: 50%;
+      width: 2em;
+      /* auto height */
+    }
+
+    .bastart    { align-items: flex-start; }
+    .bacenter   { align-items: center;     }
+    .baend      { align-items: flex-end;   }
+    .babaseline { align-items: baseline;   }
+    .bastretch  { align-items: stretch;    }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: Default -webkit-box-align -->
+  <!-- intrinsically sized -->
+  <div class="box">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- SECOND ROW:  -webkit-box-align: start -->
+  <!-- intrinsically sized -->
+  <div class="box bastart">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bastart" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bastart" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bastart" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- THIRD ROW:  -webkit-box-align: center -->
+  <!-- intrinsically sized -->
+  <div class="box bacenter">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bacenter" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bacenter" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bacenter" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FOURTH ROW:  -webkit-box-align: end -->
+  <!-- intrinsically sized -->
+  <div class="box baend">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box baend" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box baend" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box baend" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FIFTH ROW:  -webkit-box-align: baseline -->
+  <!-- intrinsically sized -->
+  <div class="box babaseline">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box babaseline" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box babaseline" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box babaseline" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+  <!-- SIXTH ROW:  -webkit-box-align: stretch -->
+  <!-- intrinsically sized -->
+  <div class="box bastretch">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bastretch" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bastretch" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bastretch" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-align-horiz-1a.html b/layout/reftests/webkit-box/webkit-box-align-horiz-1a.html
new file mode 100644
index 0000000000..eb2dc06f74
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-align-horiz-1a.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: horizontally-oriented "display: -webkit-box" container,
+    with all the various -webkit-box-align values.
+  </title>
+  <style>
+    .box {
+      display: -webkit-box;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > *:nth-child(1) {
+      background: turquoise;
+      /* auto width */
+      height: 1em;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+      font-size: 50%;
+      width: 2em;
+      /* auto height */
+    }
+
+    .bastart    { -webkit-box-align: start;    }
+    .bacenter   { -webkit-box-align: center;   }
+    .baend      { -webkit-box-align: end;      }
+    .babaseline { -webkit-box-align: baseline; }
+    .bastretch  { -webkit-box-align: stretch;  }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: Default -webkit-box-align -->
+  <!-- intrinsically sized -->
+  <div class="box">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- SECOND ROW:  -webkit-box-align: start -->
+  <!-- intrinsically sized -->
+  <div class="box bastart">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bastart" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bastart" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bastart" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- THIRD ROW:  -webkit-box-align: center -->
+  <!-- intrinsically sized -->
+  <div class="box bacenter">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bacenter" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bacenter" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bacenter" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FOURTH ROW:  -webkit-box-align: end -->
+  <!-- intrinsically sized -->
+  <div class="box baend">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box baend" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box baend" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box baend" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FIFTH ROW:  -webkit-box-align: baseline -->
+  <!-- intrinsically sized -->
+  <div class="box babaseline">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box babaseline" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box babaseline" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box babaseline" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+  <!-- SIXTH ROW:  -webkit-box-align: stretch -->
+  <!-- intrinsically sized -->
+  <div class="box bastretch">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bastretch" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bastretch" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bastretch" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-align-horiz-1b.html b/layout/reftests/webkit-box/webkit-box-align-horiz-1b.html
new file mode 100644
index 0000000000..9d200346d0
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-align-horiz-1b.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: horizontally-oriented "display: -webkit-box" container,
+    with all the various -webkit-box-align values.
+  </title>
+  <style>
+    .box {
+      display: -webkit-box;
+      -webkit-box-orient: horizontal;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > *:nth-child(1) {
+      background: turquoise;
+      /* auto width */
+      height: 1em;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+      font-size: 50%;
+      width: 2em;
+      /* auto height */
+    }
+
+    .bastart    { -webkit-box-align: start;    }
+    .bacenter   { -webkit-box-align: center;   }
+    .baend      { -webkit-box-align: end;      }
+    .babaseline { -webkit-box-align: baseline; }
+    .bastretch  { -webkit-box-align: stretch;  }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: Default -webkit-box-align -->
+  <!-- intrinsically sized -->
+  <div class="box">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- SECOND ROW:  -webkit-box-align: start -->
+  <!-- intrinsically sized -->
+  <div class="box bastart">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bastart" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bastart" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bastart" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- THIRD ROW:  -webkit-box-align: center -->
+  <!-- intrinsically sized -->
+  <div class="box bacenter">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bacenter" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bacenter" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bacenter" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FOURTH ROW:  -webkit-box-align: end -->
+  <!-- intrinsically sized -->
+  <div class="box baend">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box baend" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box baend" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box baend" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FIFTH ROW:  -webkit-box-align: baseline -->
+  <!-- intrinsically sized -->
+  <div class="box babaseline">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box babaseline" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box babaseline" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box babaseline" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+  <!-- SIXTH ROW:  -webkit-box-align: stretch -->
+  <!-- intrinsically sized -->
+  <div class="box bastretch">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bastretch" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bastretch" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bastretch" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-align-vert-1-ref.html b/layout/reftests/webkit-box/webkit-box-align-vert-1-ref.html
new file mode 100644
index 0000000000..f71af621b3
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-align-vert-1-ref.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Reference
+  </title>
+  <style>
+    .box {
+      display: flex;
+      flex-direction: column;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > *:nth-child(1) {
+      background: turquoise;
+      /* auto width */
+      height: 1em;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+      font-size: 50%;
+      width: 2em;
+      /* auto height */
+    }
+
+    .bastart    { align-items: flex-start; }
+    .bacenter   { align-items: center;     }
+    .baend      { align-items: flex-end;   }
+    .babaseline { align-items: baseline;   }
+    .bastretch  { align-items: stretch;    }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: Default -webkit-box-align -->
+  <!-- intrinsically sized -->
+  <div class="box">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- SECOND ROW:  -webkit-box-align: start -->
+  <!-- intrinsically sized -->
+  <div class="box bastart">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bastart" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bastart" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bastart" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- THIRD ROW:  -webkit-box-align: center -->
+  <!-- intrinsically sized -->
+  <div class="box bacenter">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bacenter" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bacenter" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bacenter" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FOURTH ROW:  -webkit-box-align: end -->
+  <!-- intrinsically sized -->
+  <div class="box baend">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box baend" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box baend" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box baend" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FIFTH ROW:  -webkit-box-align: baseline -->
+  <!-- intrinsically sized -->
+  <div class="box babaseline">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box babaseline" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box babaseline" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box babaseline" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+  <!-- SIXTH ROW:  -webkit-box-align: stretch -->
+  <!-- intrinsically sized -->
+  <div class="box bastretch">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bastretch" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bastretch" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bastretch" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-align-vert-1.html b/layout/reftests/webkit-box/webkit-box-align-vert-1.html
new file mode 100644
index 0000000000..63d4ff0b4d
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-align-vert-1.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: vertically-oriented "display: -webkit-box" container,
+    with all the various -webkit-box-align values.
+  </title>
+  <style>
+    .box {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > *:nth-child(1) {
+      background: turquoise;
+      /* auto width */
+      height: 1em;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+      font-size: 50%;
+      width: 2em;
+      /* auto height */
+    }
+
+    .bastart    { -webkit-box-align: start;    }
+    .bacenter   { -webkit-box-align: center;   }
+    .baend      { -webkit-box-align: end;      }
+    .babaseline { -webkit-box-align: baseline; }
+    .bastretch  { -webkit-box-align: stretch;  }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: Default -webkit-box-align -->
+  <!-- intrinsically sized -->
+  <div class="box">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- SECOND ROW:  -webkit-box-align: start -->
+  <!-- intrinsically sized -->
+  <div class="box bastart">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bastart" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bastart" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bastart" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- THIRD ROW:  -webkit-box-align: center -->
+  <!-- intrinsically sized -->
+  <div class="box bacenter">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bacenter" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bacenter" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bacenter" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FOURTH ROW:  -webkit-box-align: end -->
+  <!-- intrinsically sized -->
+  <div class="box baend">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box baend" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box baend" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box baend" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FIFTH ROW:  -webkit-box-align: baseline -->
+  <!-- intrinsically sized -->
+  <div class="box babaseline">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box babaseline" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box babaseline" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box babaseline" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+  <!-- SIXTH ROW:  -webkit-box-align: stretch -->
+  <!-- intrinsically sized -->
+  <div class="box bastretch">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bastretch" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bastretch" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bastretch" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-anon-flex-items-1-ref.html b/layout/reftests/webkit-box/webkit-box-anon-flex-items-1-ref.html
new file mode 100644
index 0000000000..cab3cc4cd9
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-anon-flex-items-1-ref.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>
+    Reference Case
+  </title>
+  <style>
+  .container {
+    display: flex;
+    justify-content: space-between;
+    width: 300px;
+    border: 1px solid black;
+    font: 10px sans-serif;
+    margin-bottom: 10px;
+  }
+  .container > * {
+    background: lightgray;
+  }
+
+  .fakeAnonWrapper {
+    background: none;
+  }
+  .fakeAnonWrapper > * {
+    background: lightgray;
+  }
+  .table {
+    display: table;
+  }
+  </style>
+</head>
+<body>
+<!-- We use an explicit div (with class "fakeAnonWrapper") here, to match the
+     anonymous div that the testcase is expected to generate around contiguous
+     runs of inline content. -->
+<div class="container">
+  <div class="fakeAnonWrapper">
+    a
+    <i>i</i><img src="bogus"><img src="bogus" alt="alt">
+    <canvas height="5" width="5"></canvas>
+    <video height="5" width="5"></video>
+    <div style="display:inline-block">ib</div>
+    <div style="display:inline-table">it</div>
+    z
+  </div>
+  <div>block</div>
+  <div>block</div>
+</div>
+
+<div class="container">
+  <div>block</div>
+  <div class="fakeAnonWrapper">
+    a
+    <i>i</i><img src="bogus"><img src="bogus" alt="alt">
+    <canvas height="5" width="5"></canvas>
+    <video height="5" width="5"></video>
+    <div style="display:inline-block">ib</div>
+    <div style="display:inline-table">it</div>
+    z
+  </div>
+  <div>block</div>
+</div>
+
+<div class="container">
+  <div>block</div>
+  <div>block</div>
+  <div class="fakeAnonWrapper">
+    a
+    <i>i</i><img src="bogus"><img src="bogus" alt="alt">
+    <canvas height="5" width="5"></canvas>
+    <video height="5" width="5"></video>
+    <div style="display:inline-block">ib</div>
+    <div style="display:inline-table">it</div>
+    z
+  </div>
+</div>
+
+<!-- We use explicit divs here for each anonymous wrapper-box that the testcase
+     is expected to produce (with class "fakeAnonWrapper", and also "table" if
+     it's expected to be a table wrapper)  -->
+<div class="container">
+  <div class="fakeAnonWrapper">a</div>
+  <div class="fakeAnonWrapper table">
+    <div style="display: table-cell">tc</div>
+    <div style="display: table-cell">tc</div>
+  </div>
+  <div class="fakeAnonWrapper">b</div>
+  <div class="fakeAnonWrapper table">
+    <div style="display: table-row">tr</div>
+    <div style="display: table-cell">tc</div>
+  </div>
+  <div class="fakeAnonWrapper">c</div>
+  <div class="fakeAnonWrapper table">
+    <div style="display: table-row">tr</div>
+    <div style="display: table-row-group">trg</div>
+  </div>
+  <div class="fakeAnonWrapper">d</div>
+  <table><tbody><tr><td>t</td></tr></tbody></table>
+  <div class="fakeAnonWrapper">e</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-anon-flex-items-1a.html b/layout/reftests/webkit-box/webkit-box-anon-flex-items-1a.html
new file mode 100644
index 0000000000..cb6d2c8d32
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-anon-flex-items-1a.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>
+    Test for contiguous inline content getting wrapped in a single block,
+    inside of -webkit-box.
+  </title>
+  <style>
+  .container {
+    display: -webkit-box;
+    -webkit-box-pack: justify;
+    width: 300px;
+    border: 1px solid black;
+    font: 10px sans-serif;
+    margin-bottom: 10px;
+  }
+  .container > * {
+    background: lightgray;
+  }
+  </style>
+</head>
+<body>
+<!-- The following containers each have a bunch of contiguous inline-level
+     content. In each case, all of the inline content ("a" through "z") should
+     get wrapped into a single anonymous block. -->
+<div class="container">
+  a
+  <i>i</i><img src="bogus"><img src="bogus" alt="alt">
+  <canvas height="5" width="5"></canvas>
+  <video height="5" width="5"></video>
+  <div style="display:inline-block">ib</div>
+  <div style="display:inline-table">it</div>
+  z
+  <div>block</div>
+  <div>block</div>
+</div>
+
+<div class="container">
+  <div>block</div>
+  a
+  <i>i</i><img src="bogus"><img src="bogus" alt="alt">
+  <canvas height="5" width="5"></canvas>
+  <video height="5" width="5"></video>
+  <div style="display:inline-block">ib</div>
+  <div style="display:inline-table">it</div>
+  z
+  <div>block</div>
+</div>
+
+<div class="container">
+  <div>block</div>
+  <div>block</div>
+  a
+  <i>i</i><img src="bogus"><img src="bogus" alt="alt">
+  <canvas height="5" width="5"></canvas>
+  <video height="5" width="5"></video>
+  <div style="display:inline-block">ib</div>
+  <div style="display:inline-table">it</div>
+  z
+</div>
+
+<!-- This container tests how flex items are formed when table parts are placed
+     directly inside of a -webkit-box, alongside inline-level content.
+     (Table-fixup should produce an anonymous table around each contiguous run
+     of table-parts, and we should get an anonymous block around each piece of
+     raw text.) -->
+<div class="container">
+  a
+  <div style="display: table-cell">tc</div>
+  <div style="display: table-cell">tc</div>
+  b
+  <div style="display: table-row">tr</div>
+  <div style="display: table-cell">tc</div>
+  c
+  <div style="display: table-row">tr</div>
+  <div style="display: table-row-group">trg</div>
+  d
+  <table><tbody><tr><td>t</td></tr></tbody></table>
+  e
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-anon-flex-items-1b.html b/layout/reftests/webkit-box/webkit-box-anon-flex-items-1b.html
new file mode 100644
index 0000000000..2a700e61e8
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-anon-flex-items-1b.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>
+    Test for contiguous inline content getting wrapped in a single block,
+    inside of -webkit-box with "overflow:hidden".
+  </title>
+  <style>
+  .container {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-pack: justify;
+    width: 300px;
+    border: 1px solid black;
+    font: 10px sans-serif;
+    margin-bottom: 10px;
+  }
+  .container > * {
+    background: lightgray;
+  }
+  </style>
+</head>
+<body>
+<!-- The following containers each have a bunch of contiguous inline-level
+     content. In each case, all of the inline content ("a" through "z") should
+     get wrapped into a single anonymous block. -->
+<div class="container">
+  a
+  <i>i</i><img src="bogus"><img src="bogus" alt="alt">
+  <canvas height="5" width="5"></canvas>
+  <video height="5" width="5"></video>
+  <div style="display:inline-block">ib</div>
+  <div style="display:inline-table">it</div>
+  z
+  <div>block</div>
+  <div>block</div>
+</div>
+
+<div class="container">
+  <div>block</div>
+  a
+  <i>i</i><img src="bogus"><img src="bogus" alt="alt">
+  <canvas height="5" width="5"></canvas>
+  <video height="5" width="5"></video>
+  <div style="display:inline-block">ib</div>
+  <div style="display:inline-table">it</div>
+  z
+  <div>block</div>
+</div>
+
+<div class="container">
+  <div>block</div>
+  <div>block</div>
+  a
+  <i>i</i><img src="bogus"><img src="bogus" alt="alt">
+  <canvas height="5" width="5"></canvas>
+  <video height="5" width="5"></video>
+  <div style="display:inline-block">ib</div>
+  <div style="display:inline-table">it</div>
+  z
+</div>
+
+<!-- This container tests how flex items are formed when table parts are placed
+     directly inside of a -webkit-box, alongside inline-level content.
+     (Table-fixup should produce an anonymous table around each contiguous run
+     of table-parts, and we should get an anonymous block around each piece of
+     raw text.) -->
+<div class="container">
+  a
+  <div style="display: table-cell">tc</div>
+  <div style="display: table-cell">tc</div>
+  b
+  <div style="display: table-row">tr</div>
+  <div style="display: table-cell">tc</div>
+  c
+  <div style="display: table-row">tr</div>
+  <div style="display: table-row-group">trg</div>
+  d
+  <table><tbody><tr><td>t</td></tr></tbody></table>
+  e
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-anon-flex-items-2-ref.html b/layout/reftests/webkit-box/webkit-box-anon-flex-items-2-ref.html
new file mode 100644
index 0000000000..d220271d56
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-anon-flex-items-2-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>
+    Reference Case
+  </title>
+  <style>
+  .container {
+    display: flex;
+    justify-content: space-between;
+    width: 300px;
+    border: 1px solid black;
+    font: 10px sans-serif;
+  }
+  span {
+    background: lightgray;
+  }
+  </style>
+</head>
+<body>
+<!-- We use an explicit div here, to match the anonymous div that the testcase
+     is expected to generate around contiguous runs of inline content. -->
+<div class="container">
+  <div>
+    raw text
+    <span>start</span>
+  </div>
+  <div>BLOCK</div>
+  <div>
+    <span>end</span>
+    raw text
+  </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-anon-flex-items-2.html b/layout/reftests/webkit-box/webkit-box-anon-flex-items-2.html
new file mode 100644
index 0000000000..1684a60b66
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-anon-flex-items-2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>
+    Test for how block-in-inline splits behave inside of -webkit-box.
+  </title>
+  <style>
+  .container {
+    display: -webkit-box;
+    -webkit-box-pack: justify;
+    width: 300px;
+    border: 1px solid black;
+    font: 10px sans-serif;
+  }
+  .container > * {
+    background: lightgray;
+  }
+  </style>
+</head>
+<body>
+<div class="container">
+  raw text
+  <span>start<div>BLOCK</div>end</span>
+  raw text
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-anon-flex-items-3-ref.html b/layout/reftests/webkit-box/webkit-box-anon-flex-items-3-ref.html
new file mode 100644
index 0000000000..7e098f9ecc
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-anon-flex-items-3-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>
+    Reference Case
+  </title>
+  <style>
+  .container {
+    display: flex;
+    justify-content: space-between;
+    width: 300px;
+    border: 1px solid black;
+  }
+  .wspWrapper {
+    white-space: pre;
+  }
+  </style>
+</head>
+<body>
+<!-- We use an explicit div here, to match the anonymous div that the testcase
+     is expected to generate around the whitespace. -->
+<div class="container">
+  <div>a</div>
+  <div class="wspWrapper">   </div>
+  <div>b</div>
+  <div>c</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-anon-flex-items-3.html b/layout/reftests/webkit-box/webkit-box-anon-flex-items-3.html
new file mode 100644
index 0000000000..9a355f1469
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-anon-flex-items-3.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>
+    Test for whether whitespace gets wrapped in an anonymous box,
+    inside of -webkit-box.
+  </title>
+  <style>
+  .container {
+    display: -webkit-box;
+    -webkit-box-pack: justify;
+    width: 300px;
+    border: 1px solid black;
+    white-space: pre;
+  }
+  </style>
+</head>
+<body>
+  <!-- Note the space characters between the first and second divs here: -->
+  <div class="container"><div>a</div>   <div>b</div><div>c</div></div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-direction-1-ref.html b/layout/reftests/webkit-box/webkit-box-direction-1-ref.html
new file mode 100644
index 0000000000..4ef84affa2
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-direction-1-ref.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Reference
+  </title>
+  <style>
+    .box {
+      display: flex;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > *:nth-child(1) {
+      background: turquoise;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+    }
+
+    .rtl { direction: rtl; }
+
+    .horizNormal {
+      flex-direction: row;
+    }
+    .horizReverse {
+      flex-direction: row-reverse;
+    }
+    .vertNormal {
+      flex-direction: column;
+    }
+    .vertReverse {
+      flex-direction: column-reverse;
+    }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: '-webkit-box-orient: horizontal', default 'direction' -->
+  <div class="box horizNormal">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box horizReverse">
+    <div>a</div><div>b</div>
+  </div>
+
+  <br>
+
+  <!-- SECOND ROW: '-webkit-box-orient: horizontal', 'direction: rtl' -->
+  <div class="box horizNormal rtl">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box horizReverse rtl">
+    <div>a</div><div>b</div>
+  </div>
+
+  <br>
+
+  <!-- THIRD ROW: '-webkit-box-orient: vertical', default 'direction' -->
+  <div class="box vertNormal">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box vertReverse">
+    <div>a</div><div>b</div>
+  </div>
+
+  <br>
+
+  <!-- FOURTH ROW: '-webkit-box-orient: vertical', 'direction: rtl' -->
+  <div class="box vertNormal rtl">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box vertReverse rtl">
+    <div>a</div><div>b</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-direction-1.html b/layout/reftests/webkit-box/webkit-box-direction-1.html
new file mode 100644
index 0000000000..ca45019be6
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-direction-1.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: "-webkit-box-direction" property
+    in a -webkit-box with default writing-mode
+  </title>
+  <style>
+    .box {
+      display: -webkit-box;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > *:nth-child(1) {
+      background: turquoise;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+    }
+
+    .rtl { direction: rtl; }
+
+    .horizNormal {
+      -webkit-box-orient: horizontal;
+      -webkit-box-direction: normal;
+    }
+    .horizReverse {
+      -webkit-box-orient: horizontal;
+      -webkit-box-direction: reverse;
+    }
+    .vertNormal {
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+    }
+    .vertReverse {
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: reverse;
+    }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: '-webkit-box-orient: horizontal', default 'direction' -->
+  <div class="box horizNormal">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box horizReverse">
+    <div>a</div><div>b</div>
+  </div>
+
+  <br>
+
+  <!-- SECOND ROW: '-webkit-box-orient: horizontal', 'direction: rtl' -->
+  <div class="box horizNormal rtl">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box horizReverse rtl">
+    <div>a</div><div>b</div>
+  </div>
+
+  <br>
+
+  <!-- THIRD ROW: '-webkit-box-orient: vertical', default 'direction' -->
+  <div class="box vertNormal">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box vertReverse">
+    <div>a</div><div>b</div>
+  </div>
+
+  <br>
+
+  <!-- FOURTH ROW: '-webkit-box-orient: vertical', 'direction: rtl' -->
+  <div class="box vertNormal rtl">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box vertReverse rtl">
+    <div>a</div><div>b</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-direction-2-ref.html b/layout/reftests/webkit-box/webkit-box-direction-2-ref.html
new file mode 100644
index 0000000000..8a2a0f6a19
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-direction-2-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Reference
+  </title>
+  <style>
+    .box {
+      display: flex;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > *:nth-child(1) {
+      background: turquoise;
+      margin: 2px 4px 6px 8px;
+      border: 1px solid blue;
+      padding: 4px 3px 2px 1px;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+      margin: 9px 3px 7px 5px;
+      border: 2px solid purple;
+      padding: 6px 7px 8px 9px;
+    }
+
+    .rtl { direction: rtl; }
+
+    .horizNormal {
+      flex-direction: row;
+    }
+    .horizReverse {
+      flex-direction: row-reverse;
+    }
+    .vertNormal {
+      flex-direction: column;
+    }
+    .vertReverse {
+      flex-direction: column-reverse;
+    }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: '-webkit-box-orient: horizontal', default 'direction' -->
+  <div class="box horizNormal">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box horizReverse">
+    <div>a</div><div>b</div>
+  </div>
+
+  <br>
+
+  <!-- SECOND ROW: '-webkit-box-orient: horizontal', 'direction: rtl' -->
+  <div class="box horizNormal rtl">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box horizReverse rtl">
+    <div>a</div><div>b</div>
+  </div>
+
+  <br>
+
+  <!-- THIRD ROW: '-webkit-box-orient: vertical', default 'direction' -->
+  <div class="box vertNormal">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box vertReverse">
+    <div>a</div><div>b</div>
+  </div>
+
+  <br>
+
+  <!-- FOURTH ROW: '-webkit-box-orient: vertical', 'direction: rtl' -->
+  <div class="box vertNormal rtl">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box vertReverse rtl">
+    <div>a</div><div>b</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-direction-2.html b/layout/reftests/webkit-box/webkit-box-direction-2.html
new file mode 100644
index 0000000000..287e5e1e26
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-direction-2.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: "-webkit-box-direction" property
+    in a -webkit-box with default writing-mode
+    and some margin/border/padding on flex items
+  </title>
+  <style>
+    .box {
+      display: -webkit-box;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > *:nth-child(1) {
+      background: turquoise;
+      margin: 2px 4px 6px 8px;
+      border: 1px solid blue;
+      padding: 4px 3px 2px 1px;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+      margin: 9px 3px 7px 5px;
+      border: 2px solid purple;
+      padding: 6px 7px 8px 9px;
+    }
+
+    .rtl { direction: rtl; }
+
+    .horizNormal {
+      -webkit-box-orient: horizontal;
+      -webkit-box-direction: normal;
+    }
+    .horizReverse {
+      -webkit-box-orient: horizontal;
+      -webkit-box-direction: reverse;
+    }
+    .vertNormal {
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+    }
+    .vertReverse {
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: reverse;
+    }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: '-webkit-box-orient: horizontal', default 'direction' -->
+  <div class="box horizNormal">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box horizReverse">
+    <div>a</div><div>b</div>
+  </div>
+
+  <br>
+
+  <!-- SECOND ROW: '-webkit-box-orient: horizontal', 'direction: rtl' -->
+  <div class="box horizNormal rtl">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box horizReverse rtl">
+    <div>a</div><div>b</div>
+  </div>
+
+  <br>
+
+  <!-- THIRD ROW: '-webkit-box-orient: vertical', default 'direction' -->
+  <div class="box vertNormal">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box vertReverse">
+    <div>a</div><div>b</div>
+  </div>
+
+  <br>
+
+  <!-- FOURTH ROW: '-webkit-box-orient: vertical', 'direction: rtl' -->
+  <div class="box vertNormal rtl">
+    <div>a</div><div>b</div>
+  </div>
+  <div class="box vertReverse rtl">
+    <div>a</div><div>b</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-flex-1-ref.html b/layout/reftests/webkit-box/webkit-box-flex-1-ref.html
new file mode 100644
index 0000000000..646d6a54b5
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-flex-1-ref.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Reference
+  </title>
+  <style>
+    .box {
+      display: flex;
+      border: 1px solid black;
+      margin: 5px 20px;
+      width: 100px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > * {
+      /* Modern flexbox (used in this reference case) allows everything to
+         shrink by default, but -webkit-box does not, so we have to turn that
+         feature off to make an accurate reference case. */
+      flex-shrink: 0;
+    }
+
+    .box > *:nth-child(1) { background: turquoise; }
+    .box > *:nth-child(2) { background: salmon;    }
+    .box > *:nth-child(3) { background: yellow;    }
+
+    .huge { width: 120px }
+    .bf1 { flex: 1 1 auto }
+    .bf3 { flex: 3 3 auto }
+
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: Default -webkit-box-flex -->
+  <div class="box">
+    <div>a</div>
+  </div>
+
+  <div class="box">
+    <div>a</div><div>b</div>
+  </div>
+
+  <div class="box">
+    <div class="huge">a</div>
+  </div>
+
+  <br>
+
+  <!-- SECOND ROW: One item has nonzero -webkit-box-flex -->
+  <div class="box">
+    <div class="bf1">a</div>
+  </div>
+
+  <div class="box">
+    <div>a</div><div class="bf1">b</div>
+  </div>
+
+  <div class="box">
+    <div class="huge bf1">a</div>
+  </div>
+
+  <br>
+
+  <!-- THIRD ROW: Two items have nonzero (equal) -webkit-box-flex -->
+  <div class="box">
+    <div class="bf1">a</div><div class="bf1">b</div>
+  </div>
+
+  <div class="box">
+    <div class="bf1">a</div><div>b</div><div class="bf1">c</div>
+  </div>
+
+  <div class="box">
+    <div class="huge bf1">a</div>
+    <div>b</div>
+    <div class="huge bf1">c</div>
+  </div>
+
+  <br>
+
+  <!-- FOURTH ROW: Non-equal nonzero -webkit-box-flex values -->
+  <div class="box">
+    <div class="bf1">a</div><div class="bf3">b</div>
+  </div>
+
+  <div class="box">
+    <div class="bf3">a</div><div class="bf1">b</div>
+  </div>
+
+  <div class="box">
+    <div class="huge bf1">a</div>
+    <div class="huge bf3">b</div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-flex-1.html b/layout/reftests/webkit-box/webkit-box-flex-1.html
new file mode 100644
index 0000000000..10f2c63e32
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-flex-1.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: "-webkit-box-flex" in a "display: -webkit-box" container
+  </title>
+  <style>
+    .box {
+      display: -webkit-box;
+      border: 1px solid black;
+      margin: 5px 20px;
+      width: 100px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > *:nth-child(1) { background: turquoise; }
+    .box > *:nth-child(2) { background: salmon;    }
+    .box > *:nth-child(3) { background: yellow;    }
+
+    .huge { width: 120px }
+    .bf1 { -webkit-box-flex: 1 }
+    .bf3 { -webkit-box-flex: 3 }
+
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: Default -webkit-box-flex -->
+  <div class="box">
+    <div>a</div>
+  </div>
+
+  <div class="box">
+    <div>a</div><div>b</div>
+  </div>
+
+  <div class="box">
+    <div class="huge">a</div>
+  </div>
+
+  <br>
+
+  <!-- SECOND ROW: One item has nonzero -webkit-box-flex -->
+  <div class="box">
+    <div class="bf1">a</div>
+  </div>
+
+  <div class="box">
+    <div>a</div><div class="bf1">b</div>
+  </div>
+
+  <div class="box">
+    <div class="huge bf1">a</div>
+  </div>
+
+  <br>
+
+  <!-- THIRD ROW: Two items have nonzero (equal) -webkit-box-flex -->
+  <div class="box">
+    <div class="bf1">a</div><div class="bf1">b</div>
+  </div>
+
+  <div class="box">
+    <div class="bf1">a</div><div>b</div><div class="bf1">c</div>
+  </div>
+
+  <div class="box">
+    <div class="huge bf1">a</div>
+    <div>b</div>
+    <div class="huge bf1">c</div>
+  </div>
+
+  <br>
+
+  <!-- FOURTH ROW: Non-equal nonzero -webkit-box-flex values -->
+  <div class="box">
+    <div class="bf1">a</div><div class="bf3">b</div>
+  </div>
+
+  <div class="box">
+    <div class="bf3">a</div><div class="bf1">b</div>
+  </div>
+
+  <div class="box">
+    <div class="huge bf1">a</div>
+    <div class="huge bf3">b</div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-ordinal-group-1-ref.html b/layout/reftests/webkit-box/webkit-box-ordinal-group-1-ref.html
new file mode 100644
index 0000000000..e69c4d37a7
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-ordinal-group-1-ref.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Reference
+  </title>
+  <style>
+    .box {
+      display: flex;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+    }
+    br { clear: both; }
+
+    .box > * {
+      border: 1px dotted purple;
+    }
+  </style>
+</head>
+<body>
+  <!-- First row: initial value mixed with single specified values -->
+  <div class="box">
+    <div>*</div>
+    <div class="bogOne">1a</div>
+    <div>*</div>
+    <div class="bogOne">1b</div>
+    <div>*</div>
+  </div>
+
+  <div class="box">
+    <div>*</div>
+    <div>*</div>
+    <div>*</div>
+    <div class="bogTwo">2a</div>
+    <div class="bogTwo">2b</div>
+  </div>
+
+  <div class="box">
+    <div>*</div>
+    <div>*</div>
+    <div>*</div>
+    <div class="bogNine">9a</div>
+    <div class="bogNine">9b</div>
+  </div>
+
+  <br>
+
+  <!-- Second row: various mixes of specified values -->
+  <div class="box">
+    <div>*</div>
+    <div class="bogOne">1</div>
+    <div class="bogTwo">2</div>
+    <div class="bogNine">9</div>
+  </div>
+
+  <div class="box">
+    <div class="bogOne">1</div>
+    <div>*</div>
+    <div class="bogTwo">2</div>
+    <div class="bogNine">9</div>
+  </div>
+
+  <div class="box">
+    <div class="bogOne">1</div>
+    <div>*</div>
+    <div class="bogTwo">2a</div>
+    <div class="bogTwo">2b</div>
+    <div class="bogNine">9</div>
+  </div>
+
+  <div class="box">
+    <div class="bogOne">1</div>
+    <div class="bogTwo">2a</div>
+    <div class="bogTwo">2b</div>
+    <div class="bogNine">9a</div>
+    <div class="bogNine">9b</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-ordinal-group-1.html b/layout/reftests/webkit-box/webkit-box-ordinal-group-1.html
new file mode 100644
index 0000000000..58a6447536
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-ordinal-group-1.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: -webkit-box-ordinal-group inside a -webkit-box
+  </title>
+  <style>
+    .box {
+      display: -webkit-box;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+    }
+    br { clear: both; }
+
+    .box > * {
+      border: 1px dotted purple;
+    }
+
+    .bogOne  { -webkit-box-ordinal-group: 1; }
+    .bogTwo  { -webkit-box-ordinal-group: 2; }
+    .bogNine { -webkit-box-ordinal-group: 9; }
+  </style>
+</head>
+<body>
+  <!-- First row: initial value mixed with single specified values -->
+  <div class="box">
+    <div>*</div>
+    <div class="bogOne">1a</div>
+    <div>*</div>
+    <div class="bogOne">1b</div>
+    <div>*</div>
+  </div>
+
+  <div class="box">
+    <div>*</div>
+    <div class="bogTwo">2a</div>
+    <div>*</div>
+    <div class="bogTwo">2b</div>
+    <div>*</div>
+  </div>
+
+  <div class="box">
+    <div>*</div>
+    <div class="bogNine">9a</div>
+    <div>*</div>
+    <div class="bogNine">9b</div>
+    <div>*</div>
+  </div>
+
+  <br>
+
+  <!-- Second row: various mixes of specified values -->
+  <div class="box">
+    <div>*</div>
+    <div class="bogOne">1</div>
+    <div class="bogTwo">2</div>
+    <div class="bogNine">9</div>
+  </div>
+
+  <div class="box">
+    <div class="bogNine">9</div>
+    <div class="bogTwo">2</div>
+    <div class="bogOne">1</div>
+    <div>*</div>
+  </div>
+
+  <div class="box">
+    <div class="bogTwo">2a</div>
+    <div class="bogNine">9</div>
+    <div class="bogTwo">2b</div>
+    <div class="bogOne">1</div>
+    <div>*</div>
+  </div>
+
+  <div class="box">
+    <div class="bogTwo">2a</div>
+    <div class="bogNine">9a</div>
+    <div class="bogNine">9b</div>
+    <div class="bogTwo">2b</div>
+    <div class="bogOne">1</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-ordinal-group-2-ref.html b/layout/reftests/webkit-box/webkit-box-ordinal-group-2-ref.html
new file mode 100644
index 0000000000..c548d5e2d4
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-ordinal-group-2-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Reference
+  </title>
+  <style>
+    .box {
+      display: flex;
+      border: 1px solid black;
+      margin: 5px 20px;
+    }
+
+    .box > * {
+      border: 1px dotted purple;
+    }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <div>1</div>
+    <div>0</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-ordinal-group-2.html b/layout/reftests/webkit-box/webkit-box-ordinal-group-2.html
new file mode 100644
index 0000000000..bfdde3d80a
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-ordinal-group-2.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: -webkit-box-ordinal-group:0 inside a -webkit-box
+  </title>
+  <style>
+    .box {
+      display: -webkit-box;
+      border: 1px solid black;
+      margin: 5px 20px;
+    }
+
+    .box > * {
+      border: 1px dotted purple;
+    }
+
+    .bogZero { -webkit-box-ordinal-group: 0; }
+    .bogOne  { -webkit-box-ordinal-group: 1; }
+  </style>
+</head>
+<body>
+  <!-- -webkit-box-ordinal-group is strictly positive in Blink & WebKit. 0 is
+       rejected as an invalid value. So, the bogZero element below should
+       end up with the initial value (1) and should *not* be sorted out of its
+       DOM position in the final rendering. -->
+  <div class="box">
+    <div class="bogOne">1</div>
+    <div class="bogZero">0</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-ordinal-group-3-ref.html b/layout/reftests/webkit-box/webkit-box-ordinal-group-3-ref.html
new file mode 100644
index 0000000000..2129070ac6
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-ordinal-group-3-ref.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Reference
+  </title>
+  <style>
+    .box {
+      display: flex;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+    }
+    br { clear: both; }
+
+    .box > * {
+      border: 1px dotted purple;
+    }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <div>*</div>
+    <div>10</div>
+    <div>A</div>
+  </div>
+  <div class="box">
+    <div>*</div>
+    <div>10</div>
+    <div>B</div>
+  </div>
+  <div class="box">
+    <div>*</div>
+    <div>10</div>
+    <div>C</div>
+  </div>
+
+  <br>
+
+  <div class="box">
+    <div>*</div>
+    <div>10</div>
+    <div>D</div>
+  </div>
+  <div class="box">
+    <div>*</div>
+    <div>10</div>
+    <div>E</div>
+  </div>
+  <div class="box">
+    <div>*</div>
+    <div>10</div>
+    <div>F</div>
+  </div>
+
+  <br>
+
+  <div class="box">
+    <div>A</div>
+    <div>B</div>
+  </div>
+  <div class="box">
+    <div>A</div>
+    <div>C</div>
+  </div>
+  <div class="box">
+    <div>A</div>
+    <div>D</div>
+  </div>
+  <div class="box">
+    <div>A</div>
+    <div>E</div>
+  </div>
+  <div class="box">
+    <div>A</div>
+    <div>F</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-ordinal-group-3.html b/layout/reftests/webkit-box/webkit-box-ordinal-group-3.html
new file mode 100644
index 0000000000..3455365da0
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-ordinal-group-3.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: -webkit-box-ordinal-group with huge values inside a -webkit-box
+  </title>
+  <style>
+    .box {
+      display: -webkit-box;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+    }
+    br { clear: both; }
+
+    .box > * {
+      border: 1px dotted purple;
+    }
+
+    .bogTen   { -webkit-box-ordinal-group: 10; }
+    .bogHugeA { -webkit-box-ordinal-group: 2147483646; /* 2^31 - 2 */ }
+    .bogHugeB {
+      /* NOTE: This is INT32_MAX, so we may not be able to distinguish this
+         from anything larger than it (if we represent it internally in a
+         32-bit signed integer). However, it's still worth testing larger
+         values against e.g. 10 to be sure they don't overflow into
+         negative territory. */
+      -webkit-box-ordinal-group: 2147483647; /* 2^31 - 1 */ }
+
+    .bogHugeC { -webkit-box-ordinal-group: 4294967294; /* 2^32 - 2 */ }
+    .bogHugeD { -webkit-box-ordinal-group: 4294967295; /* 2^32 - 1 */ }
+    .bogHugeE { -webkit-box-ordinal-group: 4294967296; /* 2^32     */ }
+    .bogHugeF { -webkit-box-ordinal-group: 8589934592; /* 2^33     */ }
+  </style>
+</head>
+<body>
+  <!-- Test each huge value to see if it sorts after smaller values.
+       (The divs with huge values should sort to the right.) -->
+  <div class="box">
+    <div class="bogHugeA">A</div>
+    <div class="bogTen">10</div>
+    <div>*</div>
+  </div>
+  <div class="box">
+    <div class="bogHugeB">B</div>
+    <div class="bogTen">10</div>
+    <div>*</div>
+  </div>
+  <div class="box">
+    <div class="bogHugeC">C</div>
+    <div class="bogTen">10</div>
+    <div>*</div>
+  </div>
+
+  <br>
+
+  <div class="box">
+    <div class="bogHugeD">D</div>
+    <div class="bogTen">10</div>
+    <div>*</div>
+  </div>
+  <div class="box">
+    <div class="bogHugeE">E</div>
+    <div class="bogTen">10</div>
+    <div>*</div>
+  </div>
+  <div class="box">
+    <div class="bogHugeE">F</div>
+    <div class="bogTen">10</div>
+    <div>*</div>
+  </div>
+
+  <br>
+
+  <!-- Test that 'bogHugeA' sorts to the left of larger huge values. It's
+       less than INT32_MAX, so it's reasonable to expect that it can be
+       compared correctly against (possibly-clamped) larger values) -->
+  <div class="box">
+    <div class="bogHugeB">B</div>
+    <div class="bogHugeA">A</div>
+  </div>
+  <div class="box">
+    <div class="bogHugeC">C</div>
+    <div class="bogHugeA">A</div>
+  </div>
+  <div class="box">
+    <div class="bogHugeD">D</div>
+    <div class="bogHugeA">A</div>
+  </div>
+  <div class="box">
+    <div class="bogHugeE">E</div>
+    <div class="bogHugeA">A</div>
+  </div>
+  <div class="box">
+    <div class="bogHugeF">F</div>
+    <div class="bogHugeA">A</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-pack-horiz-1-ref.html b/layout/reftests/webkit-box/webkit-box-pack-horiz-1-ref.html
new file mode 100644
index 0000000000..1fe5090aff
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-pack-horiz-1-ref.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Reference
+  </title>
+  <style>
+    .box {
+      display: flex;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > *:nth-child(1) {
+      background: turquoise;
+      /* auto width */
+      height: 1em;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+      font-size: 50%;
+      width: 2em;
+      /* auto height */
+    }
+
+    .bpstart   { justify-content: flex-start;    }
+    .bpcenter  { justify-content: center;        }
+    .bpend     { justify-content: flex-end;      }
+    .bpjustify { justify-content: space-between; }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: Default -webkit-box-pack -->
+  <!-- intrinsically sized -->
+  <div class="box">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- SECOND ROW:  -webkit-box-pack: start -->
+  <!-- intrinsically sized -->
+  <div class="box bpstart">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpstart" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpstart" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpstart" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- THIRD ROW:  -webkit-box-pack: center -->
+  <!-- intrinsically sized -->
+  <div class="box bpcenter">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpcenter" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpcenter" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpcenter" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FOURTH ROW:  -webkit-box-pack: end -->
+  <!-- intrinsically sized -->
+  <div class="box bpend">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpend" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpend" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpend" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FIFTH ROW:  -webkit-box-pack: justify -->
+  <!-- intrinsically sized -->
+  <div class="box bpjustify">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpjustify" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpjustify" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpjustify" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-pack-horiz-1a.html b/layout/reftests/webkit-box/webkit-box-pack-horiz-1a.html
new file mode 100644
index 0000000000..8a1330154e
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-pack-horiz-1a.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: horizontally-oriented "display: -webkit-box" container,
+    with all the various -webkit-box-pack values.
+  </title>
+  <style>
+    .box {
+      display: -webkit-box;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > *:nth-child(1) {
+      background: turquoise;
+      /* auto width */
+      height: 1em;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+      font-size: 50%;
+      width: 2em;
+      /* auto height */
+    }
+
+    .bpstart   { -webkit-box-pack: start;   }
+    .bpcenter  { -webkit-box-pack: center;  }
+    .bpend     { -webkit-box-pack: end;     }
+    .bpjustify { -webkit-box-pack: justify; }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: Default -webkit-box-pack -->
+  <!-- intrinsically sized -->
+  <div class="box">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- SECOND ROW:  -webkit-box-pack: start -->
+  <!-- intrinsically sized -->
+  <div class="box bpstart">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpstart" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpstart" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpstart" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- THIRD ROW:  -webkit-box-pack: center -->
+  <!-- intrinsically sized -->
+  <div class="box bpcenter">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpcenter" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpcenter" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpcenter" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FOURTH ROW:  -webkit-box-pack: end -->
+  <!-- intrinsically sized -->
+  <div class="box bpend">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpend" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpend" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpend" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FIFTH ROW:  -webkit-box-pack: justify -->
+  <!-- intrinsically sized -->
+  <div class="box bpjustify">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpjustify" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpjustify" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpjustify" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-pack-horiz-1b.html b/layout/reftests/webkit-box/webkit-box-pack-horiz-1b.html
new file mode 100644
index 0000000000..0332ab12e5
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-pack-horiz-1b.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: horizontally-oriented "display: -webkit-box" container,
+    with all the various -webkit-box-pack values.
+  </title>
+  <style>
+    .box {
+      display: -webkit-box;
+      -webkit-box-orient: horizontal;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > *:nth-child(1) {
+      background: turquoise;
+      /* auto width */
+      height: 1em;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+      font-size: 50%;
+      width: 2em;
+      /* auto height */
+    }
+
+    .bpstart   { -webkit-box-pack: start;   }
+    .bpcenter  { -webkit-box-pack: center;  }
+    .bpend     { -webkit-box-pack: end;     }
+    .bpjustify { -webkit-box-pack: justify; }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: Default -webkit-box-pack -->
+  <!-- intrinsically sized -->
+  <div class="box">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- SECOND ROW:  -webkit-box-pack: start -->
+  <!-- intrinsically sized -->
+  <div class="box bpstart">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpstart" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpstart" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpstart" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- THIRD ROW:  -webkit-box-pack: center -->
+  <!-- intrinsically sized -->
+  <div class="box bpcenter">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpcenter" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpcenter" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpcenter" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FOURTH ROW:  -webkit-box-pack: end -->
+  <!-- intrinsically sized -->
+  <div class="box bpend">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpend" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpend" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpend" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FIFTH ROW:  -webkit-box-pack: justify -->
+  <!-- intrinsically sized -->
+  <div class="box bpjustify">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpjustify" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpjustify" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpjustify" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-pack-vert-1-ref.html b/layout/reftests/webkit-box/webkit-box-pack-vert-1-ref.html
new file mode 100644
index 0000000000..ed8fe20b3e
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-pack-vert-1-ref.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Reference
+  </title>
+  <style>
+    .box {
+      display: flex;
+      flex-direction: column;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > *:nth-child(1) {
+      background: turquoise;
+      /* auto width */
+      height: 1em;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+      font-size: 50%;
+      width: 2em;
+      /* auto height */
+    }
+
+    .bpstart   { justify-content: flex-start;    }
+    .bpcenter  { justify-content: center;        }
+    .bpend     { justify-content: flex-end;      }
+    .bpjustify { justify-content: space-between; }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: Default -webkit-box-pack -->
+  <!-- intrinsically sized -->
+  <div class="box">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- SECOND ROW:  -webkit-box-pack: start -->
+  <!-- intrinsically sized -->
+  <div class="box bpstart">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpstart" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpstart" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpstart" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- THIRD ROW:  -webkit-box-pack: center -->
+  <!-- intrinsically sized -->
+  <div class="box bpcenter">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpcenter" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpcenter" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpcenter" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FOURTH ROW:  -webkit-box-pack: end -->
+  <!-- intrinsically sized -->
+  <div class="box bpend">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpend" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpend" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpend" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FIFTH ROW:  -webkit-box-pack: justify -->
+  <!-- intrinsically sized -->
+  <div class="box bpjustify">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpjustify" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpjustify" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpjustify" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-pack-vert-1.html b/layout/reftests/webkit-box/webkit-box-pack-vert-1.html
new file mode 100644
index 0000000000..41b5273431
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-pack-vert-1.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: vertically-oriented "display: -webkit-box" container,
+    with all the various -webkit-box-pack values.
+  </title>
+  <style>
+    .box {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      border: 1px solid black;
+      margin: 5px 20px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+    .box > *:nth-child(1) {
+      background: turquoise;
+      /* auto width */
+      height: 1em;
+    }
+    .box > *:nth-child(2) {
+      background: salmon;
+      font-size: 50%;
+      width: 2em;
+      /* auto height */
+    }
+
+    .bpstart   { -webkit-box-pack: start;   }
+    .bpcenter  { -webkit-box-pack: center;  }
+    .bpend     { -webkit-box-pack: end;     }
+    .bpjustify { -webkit-box-pack: justify; }
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: Default -webkit-box-pack -->
+  <!-- intrinsically sized -->
+  <div class="box">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- SECOND ROW:  -webkit-box-pack: start -->
+  <!-- intrinsically sized -->
+  <div class="box bpstart">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpstart" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpstart" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpstart" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- THIRD ROW:  -webkit-box-pack: center -->
+  <!-- intrinsically sized -->
+  <div class="box bpcenter">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpcenter" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpcenter" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpcenter" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FOURTH ROW:  -webkit-box-pack: end -->
+  <!-- intrinsically sized -->
+  <div class="box bpend">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpend" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpend" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpend" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+  <!-- FIFTH ROW:  -webkit-box-pack: justify -->
+  <!-- intrinsically sized -->
+  <div class="box bpjustify">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra width -->
+  <div class="box bpjustify" style="width: 36px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height -->
+  <div class="box bpjustify" style="height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+
+  <!-- explicit size, extra height and width -->
+  <div class="box bpjustify" style="width: 36px; height: 40px">
+    <div>a</div><div>b</div>
+  </div>
+  <br>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-with-modern-css-1-ref.html b/layout/reftests/webkit-box/webkit-box-with-modern-css-1-ref.html
new file mode 100644
index 0000000000..8b62ef9154
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-with-modern-css-1-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Reference
+  </title>
+  <style>
+    .box {
+      display: flex;
+      border: 1px solid black;
+      margin: 5px 20px;
+      width: 100px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+
+    .box > *:nth-child(1) { background: turquoise; }
+    .box > *:nth-child(2) { background: salmon;    }
+
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW -->
+  <div class="box">
+    <div>a</div>
+    <div>b</div>
+  </div>
+
+  <div class="box">
+    <div>a</div>
+    <div>b</div>
+  </div>
+
+  <br>
+
+  <!-- SECOND ROW -->
+  <div class="box">
+    <div>a</div>
+    <div>b</div>
+  </div>
+
+  <div class="box">
+    <div>a</div>
+    <div>b</div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-with-modern-css-1.html b/layout/reftests/webkit-box/webkit-box-with-modern-css-1.html
new file mode 100644
index 0000000000..897306bece
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-with-modern-css-1.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: "flex-basis" and "flex" shouldn't impact child sizing inside of
+    horizontal "display: -webkit-box" container
+  </title>
+  <style>
+    .box {
+      display: -webkit-box;
+      border: 1px solid black;
+      margin: 5px 20px;
+      width: 100px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+
+    .box > *:nth-child(1) { background: turquoise; }
+    .box > *:nth-child(2) { background: salmon;    }
+
+    .mw0 {
+      /* Used in some children here, to disable modern-flexbox's
+         "implied-minimum-size" feature, so that it can't inadvertantly
+         be the thing that makes our rendering match the reference . */
+      min-width: 0;
+    }
+
+    br { clear: both; }
+
+    /* The point of this testcase is to verify that none of the modern-flexbox
+       styles below have any effect on the rendering. (This is worth checking
+       because we coopt our modern-flexbox implementation in our emulation of
+       legacy -webkit-box behavior.) */
+    .fb0 { flex-basis: 0; }
+    .f1  { flex: 1;  /* This shorthand sets flex-grow:1; flex-basis: 0 */ }
+
+    .fb30px   { flex-basis: 30px; }
+    .f1_30px  { flex: 1 30px;     }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: flex-basis is 0 -->
+  <div class="box">
+    <div class="fb0">a</div>
+    <div class="fb0 mw0">b</div>
+  </div>
+
+  <div class="box">
+    <div class="f1">a</div>
+    <div class="f1 mw0">b</div>
+  </div>
+
+  <br>
+
+  <!-- SECOND ROW: flex-basis is 30px -->
+  <div class="box">
+    <div class="fb30px">a</div>
+    <div class="fb30px mw0">b</div>
+  </div>
+
+  <div class="box">
+    <div class="f1_30px">a</div>
+    <div class="f1_30px mw0">b</div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-with-modern-css-2-ref.html b/layout/reftests/webkit-box/webkit-box-with-modern-css-2-ref.html
new file mode 100644
index 0000000000..1042d2ff0e
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-with-modern-css-2-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Reference
+  </title>
+  <style>
+    .box {
+      display: flex;
+      flex-direction: column;
+      border: 1px solid black;
+      margin: 5px 20px;
+      height: 100px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+
+    .box > *:nth-child(1) { background: turquoise; }
+    .box > *:nth-child(2) { background: salmon;    }
+
+    br { clear: both; }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW -->
+  <div class="box">
+    <div>a</div>
+    <div>b</div>
+  </div>
+
+  <div class="box">
+    <div>a</div>
+    <div>b</div>
+  </div>
+
+  <br>
+
+  <!-- SECOND ROW -->
+  <div class="box">
+    <div>a</div>
+    <div>b</div>
+  </div>
+
+  <div class="box">
+    <div>a</div>
+    <div>b</div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-box-with-modern-css-2.html b/layout/reftests/webkit-box/webkit-box-with-modern-css-2.html
new file mode 100644
index 0000000000..e148dc7ef2
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-box-with-modern-css-2.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: "flex-basis" and "flex" shouldn't impact child sizing inside of
+    vertical "display: -webkit-box" container
+  </title>
+  <style>
+    .box {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      border: 1px solid black;
+      margin: 5px 20px;
+      height: 100px;
+      float: left; /* For testing in "rows" */
+      font: 10px serif;
+    }
+
+    .box > *:nth-child(1) { background: turquoise; }
+    .box > *:nth-child(2) { background: salmon;    }
+
+    .mh0 {
+      /* Used in some children here, to disable modern-flexbox's
+         "implied-minimum-size" feature, so that it can't inadvertantly
+         be the thing that makes our rendering match the reference . */
+      min-height: 0;
+    }
+
+    br { clear: both; }
+
+    /* The point of this testcase is to verify that none of the modern-flexbox
+       styles below have any effect on the rendering. (This is worth checking
+       because we coopt our modern-flexbox implementation in our emulation of
+       legacy -webkit-box behavior.) */
+    .fb0 { flex-basis: 0; }
+    .f1  { flex: 1;  /* This shorthand sets flex-grow:1; flex-basis: 0 */ }
+
+    .fb30px   { flex-basis: 30px; }
+    .f1_30px  { flex: 1 30px;     }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: flex-basis is 0 -->
+  <div class="box">
+    <div class="fb0">a</div>
+    <div class="fb0 mh0">b</div>
+  </div>
+
+  <div class="box">
+    <div class="f1">a</div>
+    <div class="f1 mh0">b</div>
+  </div>
+
+  <br>
+
+  <!-- SECOND ROW: flex-basis is 30px -->
+  <div class="box">
+    <div class="fb30px">a</div>
+    <div class="fb30px mh0">b</div>
+  </div>
+
+  <div class="box">
+    <div class="f1_30px">a</div>
+    <div class="f1_30px mh0">b</div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-display-values-1-ref.html b/layout/reftests/webkit-box/webkit-display-values-1-ref.html
new file mode 100644
index 0000000000..b3cb4b443d
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-display-values-1-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Reference
+  </title>
+  <style>
+    div {
+      border: 1px solid black;
+      width: 50px;
+      height: 20px;
+      justify-content: center;
+    }
+  </style>
+</head>
+<body>
+  <div style="display: flex;">a</div>
+  <div style="display: flex;">b</div>
+  <div style="display: flex;">c</div>
+  <br>
+  <div style="display: inline-flex;">d</div>
+  <div style="display: inline-flex;">e</div>
+  <div style="display: inline-flex;">f</div>
+</body>
+</html>
diff --git a/layout/reftests/webkit-box/webkit-display-values-1.html b/layout/reftests/webkit-box/webkit-display-values-1.html
new file mode 100644
index 0000000000..f2477b361b
--- /dev/null
+++ b/layout/reftests/webkit-box/webkit-display-values-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: -webkit-box & -webkit-inline-box as "display" values
+  </title>
+  <style>
+    div {
+      border: 1px solid black;
+      width: 50px;
+      height: 20px;
+      /* Lets us see whether 'display:-webkit-box' styling worked:*/
+      -webkit-box-pack: center;
+    }
+  </style>
+</head>
+<body>
+  <!-- -webkit-box, possibly mixed with -moz-box: -->
+  <div style="display: -webkit-box;">a</div>
+
+  <div style="display: -webkit-box;
+              display: -moz-box;">b</div>
+
+  <div style="display: -moz-box;
+              display: -webkit-box;">c</div>
+  <br>
+
+  <!-- -webkit-inline-box, possibly mixed with -moz-inline-box: -->
+  <div style="display: -webkit-inline-box;">d</div>
+
+  <div style="display: -webkit-inline-box;
+              display: -moz-inline-box;">e</div>
+
+  <div style="display: -moz-inline-box;
+              display: -webkit-inline-box;">f</div>
+</body>
+</html>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-28 14:29:10 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-28 14:29:10 +0000
commit	2aa4a82499d4becd2284cdb482213d541b8804dd (patch)
tree	b80bf8bf13c3766139fbacc530efd0dd9d54394c /layout/reftests/webkit-box
parent	Initial commit. (diff)
download	firefox-2aa4a82499d4becd2284cdb482213d541b8804dd.tar.xz firefox-2aa4a82499d4becd2284cdb482213d541b8804dd.zip