summaryrefslogtreecommitdiffstats
path: root/layout/reftests/webkit-box
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/webkit-box')
-rw-r--r--layout/reftests/webkit-box/reftest.list50
-rw-r--r--layout/reftests/webkit-box/webkit-box-abspos-children-1-ref.html47
-rw-r--r--layout/reftests/webkit-box/webkit-box-abspos-children-1.html42
-rw-r--r--layout/reftests/webkit-box/webkit-box-align-horiz-1-ref.html172
-rw-r--r--layout/reftests/webkit-box/webkit-box-align-horiz-1a.html173
-rw-r--r--layout/reftests/webkit-box/webkit-box-align-horiz-1b.html174
-rw-r--r--layout/reftests/webkit-box/webkit-box-align-vert-1-ref.html173
-rw-r--r--layout/reftests/webkit-box/webkit-box-align-vert-1.html174
-rw-r--r--layout/reftests/webkit-box/webkit-box-anon-flex-items-1-ref.html101
-rw-r--r--layout/reftests/webkit-box/webkit-box-anon-flex-items-1a.html82
-rw-r--r--layout/reftests/webkit-box/webkit-box-anon-flex-items-1b.html83
-rw-r--r--layout/reftests/webkit-box/webkit-box-anon-flex-items-2-ref.html35
-rw-r--r--layout/reftests/webkit-box/webkit-box-anon-flex-items-2.html27
-rw-r--r--layout/reftests/webkit-box/webkit-box-anon-flex-items-3-ref.html29
-rw-r--r--layout/reftests/webkit-box/webkit-box-anon-flex-items-3.html22
-rw-r--r--layout/reftests/webkit-box/webkit-box-direction-1-ref.html82
-rw-r--r--layout/reftests/webkit-box/webkit-box-direction-1.html87
-rw-r--r--layout/reftests/webkit-box/webkit-box-direction-2-ref.html88
-rw-r--r--layout/reftests/webkit-box/webkit-box-direction-2.html94
-rw-r--r--layout/reftests/webkit-box/webkit-box-flex-1-ref.html101
-rw-r--r--layout/reftests/webkit-box/webkit-box-flex-1.html94
-rw-r--r--layout/reftests/webkit-box/webkit-box-ordinal-group-1-ref.html84
-rw-r--r--layout/reftests/webkit-box/webkit-box-ordinal-group-1.html88
-rw-r--r--layout/reftests/webkit-box/webkit-box-ordinal-group-2-ref.html29
-rw-r--r--layout/reftests/webkit-box/webkit-box-ordinal-group-2.html36
-rw-r--r--layout/reftests/webkit-box/webkit-box-ordinal-group-3-ref.html83
-rw-r--r--layout/reftests/webkit-box/webkit-box-ordinal-group-3.html103
-rw-r--r--layout/reftests/webkit-box/webkit-box-pack-horiz-1-ref.html150
-rw-r--r--layout/reftests/webkit-box/webkit-box-pack-horiz-1a.html151
-rw-r--r--layout/reftests/webkit-box/webkit-box-pack-horiz-1b.html152
-rw-r--r--layout/reftests/webkit-box/webkit-box-pack-vert-1-ref.html151
-rw-r--r--layout/reftests/webkit-box/webkit-box-pack-vert-1.html152
-rw-r--r--layout/reftests/webkit-box/webkit-box-with-modern-css-1-ref.html53
-rw-r--r--layout/reftests/webkit-box/webkit-box-with-modern-css-1.html71
-rw-r--r--layout/reftests/webkit-box/webkit-box-with-modern-css-2-ref.html54
-rw-r--r--layout/reftests/webkit-box/webkit-box-with-modern-css-2.html72
-rw-r--r--layout/reftests/webkit-box/webkit-display-values-1-ref.html29
-rw-r--r--layout/reftests/webkit-box/webkit-display-values-1.html41
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..7fe30b1d49
--- /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.
+== webkit-box-anon-flex-items-1a.html webkit-box-anon-flex-items-1-ref.html
+== webkit-box-anon-flex-items-1b.html webkit-box-anon-flex-items-1-ref.html
+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>