summaryrefslogtreecommitdiffstats
path: root/layout/reftests/box
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/box')
-rw-r--r--layout/reftests/box/box-as-grid-or-flex-item-1-ref.html41
-rw-r--r--layout/reftests/box/box-as-grid-or-flex-item-1.html42
-rw-r--r--layout/reftests/box/flexbox-abspos-container-1-ref.html27
-rw-r--r--layout/reftests/box/flexbox-abspos-container-1a.html30
-rw-r--r--layout/reftests/box/flexbox-abspos-container-1b.html29
-rw-r--r--layout/reftests/box/flexbox-abspos-container-1c.html33
-rw-r--r--layout/reftests/box/flexbox-abspos-container-1d.html31
-rw-r--r--layout/reftests/box/flexbox-abspos-container-2-ref.html27
-rw-r--r--layout/reftests/box/flexbox-abspos-container-2.html31
-rw-r--r--layout/reftests/box/flexbox-attributes-no-box-horizontal-ref.xhtml41
-rw-r--r--layout/reftests/box/flexbox-attributes-no-box-horizontal.xhtml41
-rw-r--r--layout/reftests/box/flexbox-attributes-no-box-vertical-ref.xhtml41
-rw-r--r--layout/reftests/box/flexbox-attributes-no-box-vertical.xhtml41
-rw-r--r--layout/reftests/box/flexbox-attributes-no-input-horizontal-ref.xhtml36
-rw-r--r--layout/reftests/box/flexbox-attributes-no-input-horizontal.xhtml37
-rw-r--r--layout/reftests/box/flexbox-attributes-no-input-vertical-ref.xhtml35
-rw-r--r--layout/reftests/box/flexbox-attributes-no-input-vertical.xhtml35
-rw-r--r--layout/reftests/box/flexbox-child-is-abspos-container-1-ref.html29
-rw-r--r--layout/reftests/box/flexbox-child-is-abspos-container-1.html32
-rw-r--r--layout/reftests/box/flexbox-child-is-abspos-container-2-ref.html30
-rw-r--r--layout/reftests/box/flexbox-child-is-abspos-container-2.html34
-rw-r--r--layout/reftests/box/reftest.list13
22 files changed, 736 insertions, 0 deletions
diff --git a/layout/reftests/box/box-as-grid-or-flex-item-1-ref.html b/layout/reftests/box/box-as-grid-or-flex-item-1-ref.html
new file mode 100644
index 0000000000..d6b51e60bf
--- /dev/null
+++ b/layout/reftests/box/box-as-grid-or-flex-item-1-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<title>Reference for bug 1580302</title>
+<style>
+ .grid, .flex {
+ width: 60px;
+ height: 60px;
+ border: 1px solid black;
+ }
+ .grid { display: grid; }
+ .flex { display: flex; }
+ .fCol { flex-direction: column; }
+
+ .item {
+ background: lightblue;
+ }
+ .flexible {
+ flex: 1;
+ }
+</style>
+<body>
+ <!-- The item should fill the grid here (by virtue of the default-stretchy
+ behavior of justify-items and align-items): -->
+ <div class="grid">
+ <div class="item">e</div>
+ </div>
+
+ <!-- For the rest, the item should fill the flex container in the cross axis,
+ and if it's flexible, also fill the container in the main axis. -->
+ <div class="flex">
+ <div class="item">e</div>
+ </div>
+ <div class="flex">
+ <div class="item flexible">e</div>
+ </div>
+ <div class="flex fCol">
+ <div class="item">e</div>
+ </div>
+ <div class="flex fCol">
+ <div class="item flexible">e</div>
+ </div>
+</body>
diff --git a/layout/reftests/box/box-as-grid-or-flex-item-1.html b/layout/reftests/box/box-as-grid-or-flex-item-1.html
new file mode 100644
index 0000000000..6eacbd94a3
--- /dev/null
+++ b/layout/reftests/box/box-as-grid-or-flex-item-1.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<title>Test for bug 1580302</title>
+<style>
+ .grid, .flex {
+ width: 60px;
+ height: 60px;
+ border: 1px solid black;
+ }
+ .grid { display: grid; }
+ .flex { display: flex; }
+ .fCol { flex-direction: column; }
+
+ .item {
+ display: -moz-box;
+ background: lightblue;
+ }
+ .flexible {
+ flex: 1;
+ }
+</style>
+<body>
+ <!-- The item should fill the grid here (by virtue of justify-items/align-items
+ default behavior): -->
+ <div class="grid">
+ <div class="item">e</div>
+ </div>
+
+ <!-- For the rest, the item should fill the flex container in the cross axis,
+ and if it's flexible, also fill the container in the main axis. -->
+ <div class="flex">
+ <div class="item">e</div>
+ </div>
+ <div class="flex">
+ <div class="item flexible">e</div>
+ </div>
+ <div class="flex fCol">
+ <div class="item">e</div>
+ </div>
+ <div class="flex fCol">
+ <div class="item flexible">e</div>
+ </div>
+</body>
diff --git a/layout/reftests/box/flexbox-abspos-container-1-ref.html b/layout/reftests/box/flexbox-abspos-container-1-ref.html
new file mode 100644
index 0000000000..fbeaabf32a
--- /dev/null
+++ b/layout/reftests/box/flexbox-abspos-container-1-ref.html
@@ -0,0 +1,27 @@
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <head>
+ <style>
+ .relpos_parent {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ background: lightblue;
+ }
+ .abspos_child {
+ position: absolute;
+ left: 30px;
+ bottom: 10px;
+ width: 20px;
+ height: 20px;
+ background: purple;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="relpos_parent">
+ <div class="abspos_child"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/box/flexbox-abspos-container-1a.html b/layout/reftests/box/flexbox-abspos-container-1a.html
new file mode 100644
index 0000000000..1f6ee21a70
--- /dev/null
+++ b/layout/reftests/box/flexbox-abspos-container-1a.html
@@ -0,0 +1,30 @@
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- This testcase has a relatively-positioned -moz-box element, which should
+ form a containing block for its absolutely positioned child. -->
+<html>
+ <head>
+ <style>
+ .box { display: -moz-box }
+ .relpos_parent {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ background: lightblue;
+ }
+ .abspos_child {
+ position: absolute;
+ left: 30px;
+ bottom: 10px;
+ width: 20px;
+ height: 20px;
+ background: purple;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="box relpos_parent">
+ <div class="abspos_child"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/box/flexbox-abspos-container-1b.html b/layout/reftests/box/flexbox-abspos-container-1b.html
new file mode 100644
index 0000000000..b19072382a
--- /dev/null
+++ b/layout/reftests/box/flexbox-abspos-container-1b.html
@@ -0,0 +1,29 @@
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- This testcase is the same as the -1a version, but with -moz-inline-box. -->
+<html>
+ <head>
+ <style>
+ .box { display: -moz-inline-box }
+ .relpos_parent {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ background: lightblue;
+ }
+ .abspos_child {
+ position: absolute;
+ left: 30px;
+ bottom: 10px;
+ width: 20px;
+ height: 20px;
+ background: purple;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="box relpos_parent">
+ <div class="abspos_child"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/box/flexbox-abspos-container-1c.html b/layout/reftests/box/flexbox-abspos-container-1c.html
new file mode 100644
index 0000000000..553c9fc1b7
--- /dev/null
+++ b/layout/reftests/box/flexbox-abspos-container-1c.html
@@ -0,0 +1,33 @@
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- This testcase is the same as the -1a version, but with an additional
+ -moz-box wrapper, so that our relatively positioned box will never get a
+ call to Reflow. -->
+<html>
+ <head>
+ <style>
+ .box { display: -moz-box }
+ .relpos_parent {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ background: lightblue;
+ }
+ .abspos_child {
+ position: absolute;
+ left: 30px;
+ bottom: 10px;
+ width: 20px;
+ height: 20px;
+ background: purple;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="box">
+ <div class="box relpos_parent">
+ <div class="abspos_child"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/box/flexbox-abspos-container-1d.html b/layout/reftests/box/flexbox-abspos-container-1d.html
new file mode 100644
index 0000000000..78bb84fa75
--- /dev/null
+++ b/layout/reftests/box/flexbox-abspos-container-1d.html
@@ -0,0 +1,31 @@
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- This testcase is the same as the -1c version, but with -moz-inline-box. -->
+<html>
+ <head>
+ <style>
+ .box { display: -moz-inline-box }
+ .relpos_parent {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ background: lightblue;
+ }
+ .abspos_child {
+ position: absolute;
+ left: 30px;
+ bottom: 10px;
+ width: 20px;
+ height: 20px;
+ background: purple;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="box">
+ <div class="box relpos_parent">
+ <div class="abspos_child"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/box/flexbox-abspos-container-2-ref.html b/layout/reftests/box/flexbox-abspos-container-2-ref.html
new file mode 100644
index 0000000000..d3ef611887
--- /dev/null
+++ b/layout/reftests/box/flexbox-abspos-container-2-ref.html
@@ -0,0 +1,27 @@
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <head>
+ <style>
+ .relpos_parent {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ background: lightblue;
+ }
+ .abspos_child {
+ position: absolute;
+ left: 30px;
+ top: 10px;
+ width: 20px;
+ height: 150px;
+ background: purple;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="relpos_parent">
+ <div class="abspos_child"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/box/flexbox-abspos-container-2.html b/layout/reftests/box/flexbox-abspos-container-2.html
new file mode 100644
index 0000000000..aa3013f534
--- /dev/null
+++ b/layout/reftests/box/flexbox-abspos-container-2.html
@@ -0,0 +1,31 @@
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- This testcase has a relatively-positioned -moz-box element, which should
+ form a containing block for its absolutely positioned child. Also: in
+ this case, the child is taller than its container. -->
+<html>
+ <head>
+ <style>
+ .box { display: -moz-box }
+ .relpos_parent {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ background: lightblue;
+ }
+ .abspos_child {
+ position: absolute;
+ left: 30px;
+ top: 10px;
+ width: 20px;
+ height: 150px;
+ background: purple;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="box relpos_parent">
+ <div class="abspos_child"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/box/flexbox-attributes-no-box-horizontal-ref.xhtml b/layout/reftests/box/flexbox-attributes-no-box-horizontal-ref.xhtml
new file mode 100644
index 0000000000..31c6535877
--- /dev/null
+++ b/layout/reftests/box/flexbox-attributes-no-box-horizontal-ref.xhtml
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Test that XUL attributes are not supported on non-XUL elements</title>
+<style type="text/css">
+<![CDATA[
+
+html, body {
+ display: -moz-box;
+ margin: 0; padding: 0;
+ width: 100%; height: 100%;
+}
+
+body > div {
+ display: -moz-box;
+ background: yellow;
+ -moz-box-flex: 1;
+ -moz-box-orient: horizontal;
+}
+
+div > div {
+ display: -moz-box;
+ -moz-box-flex: 1;
+ border: 1px solid blue;
+}
+
+]]>
+</style>
+</head>
+<body>
+<div>
+ <div>width</div>
+ <div>height</div>
+ <div>minwidth</div>
+ <div>minheight</div>
+ <div>maxwidth</div>
+ <div>maxheight</div>
+ <div>flex</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box/flexbox-attributes-no-box-horizontal.xhtml b/layout/reftests/box/flexbox-attributes-no-box-horizontal.xhtml
new file mode 100644
index 0000000000..3a4badf609
--- /dev/null
+++ b/layout/reftests/box/flexbox-attributes-no-box-horizontal.xhtml
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Test that XUL attributes are not supported on non-XUL elements</title>
+<style type="text/css">
+<![CDATA[
+
+html, body {
+ display: -moz-box;
+ margin: 0; padding: 0;
+ width: 100%; height: 100%;
+}
+
+body > div {
+ display: -moz-box;
+ background: yellow;
+ -moz-box-flex: 1;
+ -moz-box-orient: horizontal;
+}
+
+div > div {
+ display: -moz-box;
+ -moz-box-flex: 1;
+ border: 1px solid blue;
+}
+
+]]>
+</style>
+</head>
+<body>
+<div>
+ <div width="100">width</div>
+ <div height="100">height</div>
+ <div minwidth="100">minwidth</div>
+ <div minheight="100">minheight</div>
+ <div maxwidth="50">maxwidth</div>
+ <div maxheight="15">maxheight</div>
+ <div flex="100">flex</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box/flexbox-attributes-no-box-vertical-ref.xhtml b/layout/reftests/box/flexbox-attributes-no-box-vertical-ref.xhtml
new file mode 100644
index 0000000000..efd3620f4b
--- /dev/null
+++ b/layout/reftests/box/flexbox-attributes-no-box-vertical-ref.xhtml
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Test that XUL attributes are not supported on non-XUL elements</title>
+<style type="text/css">
+<![CDATA[
+
+html, body {
+ display: -moz-box;
+ margin: 0; padding: 0;
+ width: 100%; height: 100%;
+}
+
+body > div {
+ display: -moz-box;
+ background: yellow;
+ -moz-box-flex: 1;
+ -moz-box-orient: vertical;
+}
+
+div > div {
+ display: -moz-box;
+ -moz-box-flex: 1;
+ border: 1px solid blue;
+}
+
+]]>
+</style>
+</head>
+<body>
+<div>
+ <div>width</div>
+ <div>height</div>
+ <div>minwidth</div>
+ <div>minheight</div>
+ <div>maxwidth</div>
+ <div>maxheight</div>
+ <div>flex</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box/flexbox-attributes-no-box-vertical.xhtml b/layout/reftests/box/flexbox-attributes-no-box-vertical.xhtml
new file mode 100644
index 0000000000..4f12b9a619
--- /dev/null
+++ b/layout/reftests/box/flexbox-attributes-no-box-vertical.xhtml
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Test that XUL attributes are not supported on non-XUL elements</title>
+<style type="text/css">
+<![CDATA[
+
+html, body {
+ display: -moz-box;
+ margin: 0; padding: 0;
+ width: 100%; height: 100%;
+}
+
+body > div {
+ display: -moz-box;
+ background: yellow;
+ -moz-box-flex: 1;
+ -moz-box-orient: vertical;
+}
+
+div > div {
+ display: -moz-box;
+ -moz-box-flex: 1;
+ border: 1px solid blue;
+}
+
+]]>
+</style>
+</head>
+<body>
+<div>
+ <div width="100">width</div>
+ <div height="100">height</div>
+ <div minwidth="100">minwidth</div>
+ <div minheight="100">minheight</div>
+ <div maxwidth="50">maxwidth</div>
+ <div maxheight="15">maxheight</div>
+ <div flex="100">flex</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box/flexbox-attributes-no-input-horizontal-ref.xhtml b/layout/reftests/box/flexbox-attributes-no-input-horizontal-ref.xhtml
new file mode 100644
index 0000000000..df80af2652
--- /dev/null
+++ b/layout/reftests/box/flexbox-attributes-no-input-horizontal-ref.xhtml
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Test that XUL attributes are not supported on non-XUL elements</title>
+<style type="text/css">
+<![CDATA[
+
+html, body {
+ display: -moz-box;
+ margin: 0; padding: 0;
+ width: 100%; height: 100%;
+ pointer-events: none;
+}
+
+body > div {
+ display: -moz-box;
+ background: yellow;
+ -moz-box-flex: 1;
+ -moz-box-orient: horizontal;
+}
+
+]]>
+</style>
+</head>
+<body>
+<div>
+ <input type="text" value="width" />
+ <input type="text" value="height" />
+ <input type="text" value="minwidth" />
+ <input type="text" value="minheight" />
+ <input type="text" value="maxwidth" />
+ <input type="text" value="maxheight" />
+ <input type="text" value="flex" />
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box/flexbox-attributes-no-input-horizontal.xhtml b/layout/reftests/box/flexbox-attributes-no-input-horizontal.xhtml
new file mode 100644
index 0000000000..f0dcc5f386
--- /dev/null
+++ b/layout/reftests/box/flexbox-attributes-no-input-horizontal.xhtml
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Test that XUL attributes are not supported on non-XUL elements</title>
+<style type="text/css">
+<![CDATA[
+
+html, body {
+ display: -moz-box;
+ margin: 0; padding: 0;
+ width: 100%; height: 100%;
+ /* Disable pointer-events so we don't get weird hover artifacts */
+ pointer-events: none;
+}
+
+body > div {
+ display: -moz-box;
+ background: yellow;
+ -moz-box-flex: 1;
+ -moz-box-orient: horizontal;
+}
+
+]]>
+</style>
+</head>
+<body>
+<div>
+ <input type="text" width="100" value="width" />
+ <input type="text" height="100" value="height" />
+ <input type="text" minwidth="100" value="minwidth" />
+ <input type="text" minheight="100" value="minheight" />
+ <input type="text" maxwidth="50" value="maxwidth" />
+ <input type="text" maxheight="15" value="maxheight" />
+ <input type="text" flex="100" value="flex" />
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box/flexbox-attributes-no-input-vertical-ref.xhtml b/layout/reftests/box/flexbox-attributes-no-input-vertical-ref.xhtml
new file mode 100644
index 0000000000..f2192922ed
--- /dev/null
+++ b/layout/reftests/box/flexbox-attributes-no-input-vertical-ref.xhtml
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Test that XUL attributes are not supported on non-XUL elements</title>
+<style type="text/css">
+<![CDATA[
+
+html, body {
+ display: -moz-box;
+ margin: 0; padding: 0;
+ width: 100%; height: 100%;
+}
+
+body > div {
+ display: -moz-box;
+ background: yellow;
+ -moz-box-flex: 1;
+ -moz-box-orient: vertical;
+}
+
+]]>
+</style>
+</head>
+<body>
+<div>
+ <input type="text" value="width" />
+ <input type="text" value="height" />
+ <input type="text" value="minwidth" />
+ <input type="text" value="minheight" />
+ <input type="text" value="maxwidth" />
+ <input type="text" value="maxheight" />
+ <input type="text" value="flex" />
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box/flexbox-attributes-no-input-vertical.xhtml b/layout/reftests/box/flexbox-attributes-no-input-vertical.xhtml
new file mode 100644
index 0000000000..a2a5d3805d
--- /dev/null
+++ b/layout/reftests/box/flexbox-attributes-no-input-vertical.xhtml
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Test that XUL attributes are not supported on non-XUL elements</title>
+<style type="text/css">
+<![CDATA[
+
+html, body {
+ display: -moz-box;
+ margin: 0; padding: 0;
+ width: 100%; height: 100%;
+}
+
+body > div {
+ display: -moz-box;
+ background: yellow;
+ -moz-box-flex: 1;
+ -moz-box-orient: vertical;
+}
+
+]]>
+</style>
+</head>
+<body>
+<div>
+ <input type="text" width="100" value="width" />
+ <input type="text" height="100" value="height" />
+ <input type="text" minwidth="100" value="minwidth" />
+ <input type="text" minheight="100" value="minheight" />
+ <input type="text" maxwidth="50" value="maxwidth" />
+ <input type="text" maxheight="5" value="maxheight" />
+ <input type="text" flex="100" value="flex" />
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box/flexbox-child-is-abspos-container-1-ref.html b/layout/reftests/box/flexbox-child-is-abspos-container-1-ref.html
new file mode 100644
index 0000000000..8e62ec1815
--- /dev/null
+++ b/layout/reftests/box/flexbox-child-is-abspos-container-1-ref.html
@@ -0,0 +1,29 @@
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <head>
+ <style>
+ .relpos_parent {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ background: lightblue;
+ }
+ .abspos_child {
+ position: absolute;
+ left: 30px;
+ bottom: 10px;
+ width: 20px;
+ height: 20px;
+ background: purple;
+ }
+ </style>
+ </head>
+ <body>
+ <div>
+ <div class="relpos_parent">
+ <div class="abspos_child"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/box/flexbox-child-is-abspos-container-1.html b/layout/reftests/box/flexbox-child-is-abspos-container-1.html
new file mode 100644
index 0000000000..c5892758dc
--- /dev/null
+++ b/layout/reftests/box/flexbox-child-is-abspos-container-1.html
@@ -0,0 +1,32 @@
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- This testcase has a -moz-box element with a block as its only child, which
+ forms a containing block for an absolutely positioned grandchild. -->
+<html>
+ <head>
+ <style>
+ .box { display: -moz-box }
+ .relpos_parent {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ background: lightblue;
+ }
+ .abspos_child {
+ position: absolute;
+ left: 30px;
+ bottom: 10px;
+ width: 20px;
+ height: 20px;
+ background: purple;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="box">
+ <div class="relpos_parent">
+ <div class="abspos_child"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/box/flexbox-child-is-abspos-container-2-ref.html b/layout/reftests/box/flexbox-child-is-abspos-container-2-ref.html
new file mode 100644
index 0000000000..de5abf137d
--- /dev/null
+++ b/layout/reftests/box/flexbox-child-is-abspos-container-2-ref.html
@@ -0,0 +1,30 @@
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <head>
+ <style>
+ body { margin-top: 50px }
+ .relpos_parent {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ background: lightblue;
+ }
+ .abspos_child {
+ position: absolute;
+ left: 30px;
+ bottom: 10px;
+ width: 20px;
+ height: 130px;
+ background: purple;
+ }
+ </style>
+ </head>
+ <body>
+ <div>
+ <div class="relpos_parent">
+ <div class="abspos_child"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/box/flexbox-child-is-abspos-container-2.html b/layout/reftests/box/flexbox-child-is-abspos-container-2.html
new file mode 100644
index 0000000000..dad64a1579
--- /dev/null
+++ b/layout/reftests/box/flexbox-child-is-abspos-container-2.html
@@ -0,0 +1,34 @@
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- This testcase has a -moz-box element with a block as its only child, which
+ forms a containing block for an absolutely positioned grandchild. Also, in
+ this case, the grandchild is taller than its parent and grandparent. -->
+<html>
+ <head>
+ <style>
+ body { margin-top: 50px }
+ .box { display: -moz-box }
+ .relpos_parent {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ background: lightblue;
+ }
+ .abspos_child {
+ position: absolute;
+ left: 30px;
+ bottom: 10px;
+ width: 20px;
+ height: 130px;
+ background: purple;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="box">
+ <div class="relpos_parent">
+ <div class="abspos_child"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/box/reftest.list b/layout/reftests/box/reftest.list
new file mode 100644
index 0000000000..2e710e9ab5
--- /dev/null
+++ b/layout/reftests/box/reftest.list
@@ -0,0 +1,13 @@
+test-pref(layout.css.xul-box-display-values.content.enabled,true) == box-as-grid-or-flex-item-1.html box-as-grid-or-flex-item-1-ref.html
+
+== flexbox-abspos-container-1a.html flexbox-abspos-container-1-ref.html
+== flexbox-abspos-container-1b.html flexbox-abspos-container-1-ref.html
+== flexbox-abspos-container-1c.html flexbox-abspos-container-1-ref.html
+== flexbox-abspos-container-1d.html flexbox-abspos-container-1-ref.html
+== flexbox-abspos-container-2.html flexbox-abspos-container-2-ref.html
+== flexbox-attributes-no-box-horizontal.xhtml flexbox-attributes-no-box-horizontal-ref.xhtml
+== flexbox-attributes-no-box-vertical.xhtml flexbox-attributes-no-box-vertical-ref.xhtml
+== flexbox-attributes-no-input-horizontal.xhtml flexbox-attributes-no-input-horizontal-ref.xhtml
+== flexbox-attributes-no-input-vertical.xhtml flexbox-attributes-no-input-vertical-ref.xhtml
+== flexbox-child-is-abspos-container-1.html flexbox-child-is-abspos-container-1-ref.html
+== flexbox-child-is-abspos-container-2.html flexbox-child-is-abspos-container-2-ref.html