summaryrefslogtreecommitdiffstats
path: root/layout/reftests/flexbox
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/flexbox')
-rw-r--r--layout/reftests/flexbox/ahem.css4
-rw-r--r--layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2-ref.xhtml52
-rw-r--r--layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.xhtml56
-rw-r--r--layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3-ref.xhtml66
-rw-r--r--layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3.xhtml53
-rw-r--r--layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4-ref.xhtml38
-rw-r--r--layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4.xhtml37
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1-ref.html38
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1.html37
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1-ref.html37
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1.html38
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1-ref.html60
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1a.html60
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1b.html60
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1-ref.html57
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1a.html61
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1b.html61
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-iframe.html24
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-ref.xhtml19
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1.xhtml33
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-iframe.html27
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-ref.xhtml19
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2.xhtml34
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-iframe.html29
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-ref.xhtml19
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3.xhtml34
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-iframe.html20
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-ref.xhtml19
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4.xhtml34
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeOrder-1-ref.html19
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeOrder-1a.html56
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeOrder-1b.html57
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changePadding-1-ref.xhtml20
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changePadding-1a.xhtml46
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changePadding-1b.xhtml46
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1-ref.xhtml39
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.xhtml87
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2-ref.xhtml41
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2.xhtml104
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3-ref.xhtml40
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3.xhtml104
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-1.xhtml87
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-2.xhtml107
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml107
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundText-1-ref.xhtml39
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundText-1.xhtml87
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundText-2-ref.xhtml44
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundText-2.xhtml107
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundText-3-ref.xhtml43
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundText-3.xhtml107
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1-ref.xhtml43
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1.xhtml103
-rw-r--r--layout/reftests/flexbox/flexbox-empty-1-ref.xhtml38
-rw-r--r--layout/reftests/flexbox/flexbox-empty-1a.xhtml39
-rw-r--r--layout/reftests/flexbox/flexbox-empty-1b.xhtml45
-rw-r--r--layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001-ref.html46
-rw-r--r--layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001.html48
-rw-r--r--layout/reftests/flexbox/flexbox-float-1-ref.xhtml39
-rw-r--r--layout/reftests/flexbox/flexbox-float-1a.xhtml47
-rw-r--r--layout/reftests/flexbox/flexbox-float-1b.xhtml43
-rw-r--r--layout/reftests/flexbox/flexbox-float-1c.xhtml75
-rw-r--r--layout/reftests/flexbox/flexbox-float-1d.xhtml75
-rw-r--r--layout/reftests/flexbox/flexbox-float-2-ref.xhtml39
-rw-r--r--layout/reftests/flexbox/flexbox-float-2a.xhtml42
-rw-r--r--layout/reftests/flexbox/flexbox-float-2b.xhtml46
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-1-ref.xhtml45
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-1a.xhtml39
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-1b.xhtml55
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-2-ref.xhtml34
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.xhtml46
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-3-ref.xhtml22
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-3a.xhtml24
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.xhtml38
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.xhtml38
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-4-ref.xhtml21
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-4.xhtml27
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-5-ref.xhtml25
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-5.xhtml36
-rw-r--r--layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1-ref.xhtml91
-rw-r--r--layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.xhtml102
-rw-r--r--layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1b.xhtml102
-rw-r--r--layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2-ref.xhtml45
-rw-r--r--layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2a.xhtml41
-rw-r--r--layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2b.xhtml44
-rw-r--r--layout/reftests/flexbox/flexbox-invalidation-1-ref.html36
-rw-r--r--layout/reftests/flexbox/flexbox-invalidation-1.html47
-rw-r--r--layout/reftests/flexbox/flexbox-paint-ordering-3-ref.html21
-rw-r--r--layout/reftests/flexbox/flexbox-paint-ordering-3.html39
-rw-r--r--layout/reftests/flexbox/flexbox-position-absolute-1-ref.xhtml74
-rw-r--r--layout/reftests/flexbox/flexbox-position-absolute-1.xhtml70
-rw-r--r--layout/reftests/flexbox/flexbox-position-absolute-2-ref.xhtml74
-rw-r--r--layout/reftests/flexbox/flexbox-position-absolute-2.xhtml71
-rw-r--r--layout/reftests/flexbox/flexbox-position-absolute-3-ref.xhtml44
-rw-r--r--layout/reftests/flexbox/flexbox-position-absolute-3.xhtml46
-rw-r--r--layout/reftests/flexbox/flexbox-position-absolute-4-ref.xhtml50
-rw-r--r--layout/reftests/flexbox/flexbox-position-absolute-4.xhtml52
-rw-r--r--layout/reftests/flexbox/flexbox-position-fixed-1-ref.xhtml74
-rw-r--r--layout/reftests/flexbox/flexbox-position-fixed-1.xhtml70
-rw-r--r--layout/reftests/flexbox/flexbox-position-fixed-2-ref.xhtml74
-rw-r--r--layout/reftests/flexbox/flexbox-position-fixed-2.xhtml71
-rw-r--r--layout/reftests/flexbox/flexbox-position-fixed-3-ref.xhtml44
-rw-r--r--layout/reftests/flexbox/flexbox-position-fixed-3.xhtml46
-rw-r--r--layout/reftests/flexbox/flexbox-position-fixed-4-ref.xhtml51
-rw-r--r--layout/reftests/flexbox/flexbox-position-fixed-4.xhtml52
-rw-r--r--layout/reftests/flexbox/flexbox-resizeviewport-1-helper.html31
-rw-r--r--layout/reftests/flexbox/flexbox-resizeviewport-1-ref.xhtml22
-rw-r--r--layout/reftests/flexbox/flexbox-resizeviewport-1.xhtml40
-rw-r--r--layout/reftests/flexbox/flexbox-styling-on-svg-1-ref.svg10
-rw-r--r--layout/reftests/flexbox/flexbox-styling-on-svg-1.svg15
-rw-r--r--layout/reftests/flexbox/flexbox-table-flex-items-1-ref.html78
-rw-r--r--layout/reftests/flexbox/flexbox-table-flex-items-1.html72
-rw-r--r--layout/reftests/flexbox/flexbox-widget-flex-items-1-ref.html35
-rw-r--r--layout/reftests/flexbox/flexbox-widget-flex-items-1.html46
-rw-r--r--layout/reftests/flexbox/flexbox-widget-flex-items-2-ref.html36
-rw-r--r--layout/reftests/flexbox/flexbox-widget-flex-items-2.html42
-rw-r--r--layout/reftests/flexbox/flexbox-widget-flex-items-3-ref.html35
-rw-r--r--layout/reftests/flexbox/flexbox-widget-flex-items-3.html43
-rw-r--r--layout/reftests/flexbox/flexbox-widget-flex-items-4-ref.html35
-rw-r--r--layout/reftests/flexbox/flexbox-widget-flex-items-4.html46
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html99
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1a.html105
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1b.html105
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1c.html105
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1d.html105
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1e.html109
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1f.html109
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1g.html109
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1h.html109
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html136
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-2a.html138
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-2b.html138
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-2c.html138
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-2d.html138
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multicol-vert-empty-2.html28
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html62
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html68
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html66
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html68
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html66
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html69
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html67
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html70
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html68
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html83
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html82
-rw-r--r--layout/reftests/flexbox/pagination/reftest-stylo.list31
-rw-r--r--layout/reftests/flexbox/pagination/reftest.list30
-rw-r--r--layout/reftests/flexbox/reftest-stylo.list121
-rw-r--r--layout/reftests/flexbox/reftest.list118
-rw-r--r--layout/reftests/flexbox/solidblue.pngbin0 -> 135 bytes
150 files changed, 8588 insertions, 0 deletions
diff --git a/layout/reftests/flexbox/ahem.css b/layout/reftests/flexbox/ahem.css
new file mode 100644
index 000000000..884a41198
--- /dev/null
+++ b/layout/reftests/flexbox/ahem.css
@@ -0,0 +1,4 @@
+@font-face {
+ font-family: "Ahem";
+ src: url(../fonts/Ahem.ttf);
+}
diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2-ref.xhtml
new file mode 100644
index 000000000..26033bf78
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2-ref.xhtml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for behavior of the 'baseline' value for align-items and
+ align-self.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ .flexbox {
+ display: block;
+ border: 1px dashed blue;
+ font: 14px sans-serif;
+ }
+
+ input { height: 30px; }
+
+ textarea {
+ width: 30px;
+ height: 50px;
+ }
+
+ div.multilinebutton {
+ /* For comparison vs. "button.multilinebutton" in the testcase: */
+ -moz-appearance: button;
+ display: block;
+ text-align: center;
+ font: 20px sans-serif;
+ padding-top: 1px;
+ height: 49px;
+ width: 20px;
+ }
+
+ div { display: inline-block; }
+ table { display: inline-table; }
+
+ .lime { background: lime; }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ <div class="lime">text</div
+ ><input type="text" style="width: 20px; min-width: 0;" value="input"
+ /><textarea style="width: 30px">t e x t a r e a </textarea
+ ><table cellspacing="0" cellpadding="0">
+ <div class="multilinebutton">b<br/>t<br/>n</div>
+ </table>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.xhtml
new file mode 100644
index 000000000..853f2c6ed
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.xhtml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for behavior of the 'baseline' value for align-items (and
+ align-self, implicitly). This test baseline-aligns various types of
+ content, and the flexbox's vertical size depends on the aggregate
+ post-alignment height of its children.
+
+ This test checks baseline-alignment for a text <input> field, a
+ <textarea>, and a <button> with a multi-line label.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ .flexbox {
+ display: flex;
+ align-items: baseline;
+ border: 1px dashed blue;
+ font: 14px sans-serif;
+ }
+
+ input { height: 30px; }
+
+ textarea {
+ width: 30px;
+ height: 50px;
+ }
+
+ button.multilinebutton {
+ font: 20px sans-serif;
+ color: black;
+ padding: 0;
+ height: 50px;
+ width: 20px;
+ box-sizing: content-box;
+ }
+
+ .lime { background: lime; }
+ .orange { background: orange; }
+ .pink { background: pink; }
+ .aqua { background: aqua; }
+ .violet { background: violet; }
+ .tan { background: tan; }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ <div class="lime">text</div>
+ <input type="text" style="width: 20px; min-width: 0;" value="input"/>
+ <textarea style="width: 30px">t e x t a r e a </textarea>
+ <button class="multilinebutton">b<br/>t<br/>n</button>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3-ref.xhtml
new file mode 100644
index 000000000..fb583161a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3-ref.xhtml
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for behavior of the 'baseline' value for align-items and
+ align-self.
+
+ NOTE: For multi-line 'display: block' flex items in the testcase, we use
+ an inline-table here in the reference case, so that we get first-line
+ baseline alignment. (If we used an inline-block instead, that would give
+ us *last-line* baseline alignment.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ .flexbox {
+ display: block;
+ border: 1px dashed blue;
+ font: 14px sans-serif;
+ }
+
+ div { display: inline-block; }
+ table { display: inline-table; }
+
+ .lime { background: lime; }
+ .pink { background: pink; }
+ .aqua { background: aqua; }
+
+ i { display:inline-block; width:20px; height:2px; background:black; }
+ .ref {
+ -moz-appearance:none;
+ -ms-appearance:none;
+ -webkit-appearance:none;
+ appearance:none;
+ border:none;
+ margin:0;
+ padding:0;
+ border-bottom:2px solid black;
+ width:20px;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ <div class="lime">text</div
+ ><button>btn</button
+ ><label class="pink">label</label
+ ><table cellspacing="0" cellpadding="0" class="aqua">
+ <label>lab<br/>el</label>
+ </table
+ ><table cellspacing="0" cellpadding="0">
+ <fieldset>field<br/>set</fieldset>
+ </table
+ ><table cellspacing="0" cellpadding="0">
+ <fieldset><legend>leg</legend>field<br/>set</fieldset>
+ </table
+ ><table cellspacing="0" cellpadding="0">
+ <fieldset><legend>leg<br/>end</legend>field<br/>set</fieldset>
+ </table>
+ </div>
+ <div class="flexbox" style="font-size:0"><input type="radio"
+ /><input type="checkbox"
+ /><input type="checkbox" class="ref"/></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3.xhtml
new file mode 100644
index 000000000..87568c7e7
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3.xhtml
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for behavior of the 'baseline' value for align-items (and
+ align-self, implicitly). This test has various types of baseline-aligned
+ content, and the flexbox's vertical size depends on the aggregate
+ post-alignment height of its children.
+
+ This test checks baseline-alignment for text <button>, for
+ various <input> fields, for <label>, and for <fieldset>.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ .flexbox {
+ display: flex;
+ align-items: baseline;
+ border: 1px dashed blue;
+ font: 14px sans-serif;
+ }
+
+ .big {
+ height: 100px;
+ font: 24px sans-serif;
+ margin-top: 20px;
+ }
+
+ .lime { background: lime; }
+ .pink { background: pink; }
+ .aqua { background: aqua; }
+
+ i { display:inline-block; width:20px; height:2px; background:black; }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ <div class="lime">text</div>
+ <button>btn</button>
+ <label class="pink">label</label>
+ <label class="aqua">lab<br/>el</label>
+ <fieldset>field<br/>set</fieldset>
+ <fieldset><legend>leg</legend>field<br/>set</fieldset>
+ <fieldset><legend>leg<br/>end</legend>field<br/>set</fieldset>
+ </div>
+ <div class="flexbox" style="font-size:0">
+ <input type="radio"/>
+ <input type="checkbox"/>
+ <i></i>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4-ref.xhtml
new file mode 100644
index 000000000..867fa4cfc
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4-ref.xhtml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for behavior of the 'baseline' value for align-items and
+ align-self.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ display: block;
+ border: 1px dashed blue;
+ font: 14px sans-serif;
+ }
+
+ div { display: inline-block; }
+ table {
+ display: inline-table;
+ margin: 1px; /* to fix fuzziness from text overlapping table border */
+ }
+
+ .lime { background: lime; }
+ .pink { background: pink; }
+ .aqua { background: aqua; }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ <div class="lime">text</div
+ ><table class="pink" border="1">
+ <tr><td>tr1</td></tr>
+ <tr><td>tr2</td></tr>
+ </table>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4.xhtml
new file mode 100644
index 000000000..266134a03
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4.xhtml
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for behavior of the 'baseline' value for align-items (and
+ align-self, implicitly). This test baseline-aligns a <table>.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ display: flex;
+ align-items: baseline;
+ border: 1px dashed blue;
+ font: 14px sans-serif;
+ }
+
+ table {
+ margin: 1px; /* to fix fuzziness from text overlapping table border */
+ }
+
+ .lime { background: lime; }
+ .pink { background: pink; }
+ .aqua { background: aqua; }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ <div class="lime">text</div>
+ <table class="pink" border="1">
+ <tr><td>tr1</td></tr>
+ <tr><td>tr2</td></tr>
+ </table>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1-ref.html b/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1-ref.html
new file mode 100644
index 000000000..14359e594
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ width: 100px;
+ height: 20px;
+ border: 5px solid black;
+ }
+ .container > * {
+ height: 18px;
+ float: left;
+ }
+ .itemA {
+ width: 38px;
+ background: purple;
+ border: 1px solid indigo;
+ }
+ .itemB {
+ width: 58px;
+ background: teal;
+ border: 1px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1.html b/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1.html
new file mode 100644
index 000000000..951cf918d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Test: Testing a horizontal flex container with box-sizing:border-box</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ display: flex;
+ width: 110px;
+ height: 30px;
+ border: 5px solid black;
+ box-sizing: border-box;
+ }
+ .itemA {
+ flex: 1 28px;
+ background: purple;
+ border: 1px solid indigo;
+ }
+ .itemB {
+ flex: 1 48px;
+ background: teal;
+ border: 1px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1-ref.html b/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1-ref.html
new file mode 100644
index 000000000..f02e22d95
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ width: 20px;
+ height: 100px;
+ border: 5px solid black;
+ }
+ .container > * {
+ width: 18px;
+ }
+ .itemA {
+ height: 38px;
+ background: purple;
+ border: 1px solid indigo;
+ }
+ .itemB {
+ height: 58px;
+ background: teal;
+ border: 1px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1.html b/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1.html
new file mode 100644
index 000000000..2351369b3
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Test: Testing a horizontal flex container with box-sizing:border-box</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ display: flex;
+ flex-direction: column;
+ width: 30px;
+ height: 110px;
+ border: 5px solid black;
+ box-sizing: border-box;
+ }
+ .itemA {
+ flex: 1 28px;
+ background: purple;
+ border: 1px solid indigo;
+ }
+ .itemB {
+ flex: 1 48px;
+ background: teal;
+ border: 1px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1-ref.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1-ref.html
new file mode 100644
index 000000000..e4126b17c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1-ref.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ width: 100px;
+ height: 30px;
+ border: 1px solid black;
+ float: left;
+ margin: 2px;
+ }
+ .container > * {
+ float: left; /* emulate the testcase's horizontal lineup of flex items */
+ }
+ .itemA {
+ width: 22px;
+ height: 22px;
+ background: purple;
+ border: 4px solid indigo;
+ }
+ .itemB {
+ width: 40px;
+ height: 20px;
+ background: teal;
+ border: 5px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <!-- FIRST ROW -->
+ <!-- 1 inflexible item -->
+ <div class="container">
+ <div class="itemA"></div>
+ </div>
+ <!-- 1 flexible item -->
+ <div class="container">
+ <div class="itemA" style="width: 92px"></div>
+ </div>
+
+ <div style="clear: both"></div>
+
+ <!-- SECOND ROW -->
+ <!-- 2 inflexible items -->
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+ <!-- 2 flexible items -->
+ <div class="container">
+ <div class="itemA" style="width: 32px"></div>
+ <div class="itemB" style="width: 50px"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1a.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1a.html
new file mode 100644
index 000000000..a74f4a81c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1a.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Test: Testing a horizontal flex container with box-sizing:border-box on its flex items</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ display: flex;
+ width: 100px;
+ height: 30px;
+ border: 1px solid black;
+ float: left;
+ margin: 2px;
+ }
+ .container > * {
+ box-sizing: border-box;
+ }
+ .itemA {
+ width: 30px;
+ background: purple;
+ border: 4px solid indigo;
+ }
+ .itemB {
+ width: 50px;
+ background: teal;
+ border: 5px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <!-- FIRST ROW -->
+ <!-- 1 inflexible item -->
+ <div class="container">
+ <div class="itemA"></div>
+ </div>
+ <!-- 1 flexible item -->
+ <div class="container">
+ <div class="itemA" style="flex-grow: 1"></div>
+ </div>
+
+ <div style="clear: both"></div>
+
+ <!-- SECOND ROW -->
+ <!-- 2 inflexible items -->
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+ <!-- 2 flexible items -->
+ <div class="container">
+ <div class="itemA" style="flex-grow: 1"></div>
+ <div class="itemB" style="flex-grow: 1"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1b.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1b.html
new file mode 100644
index 000000000..789dd14be
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1b.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Test: Testing a horizontal flex container with box-sizing:border-box on its flex items</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ display: flex;
+ width: 100px;
+ height: 30px;
+ border: 1px solid black;
+ float: left;
+ margin: 2px;
+ }
+ .container > * {
+ box-sizing: border-box;
+ }
+ .itemA {
+ flex-basis: 30px;
+ background: purple;
+ border: 4px solid indigo;
+ }
+ .itemB {
+ flex-basis: 50px;
+ background: teal;
+ border: 5px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <!-- FIRST ROW -->
+ <!-- 1 inflexible item -->
+ <div class="container">
+ <div class="itemA"></div>
+ </div>
+ <!-- 1 flexible item -->
+ <div class="container">
+ <div class="itemA" style="flex-grow: 1"></div>
+ </div>
+
+ <div style="clear: both"></div>
+
+ <!-- SECOND ROW -->
+ <!-- 2 inflexible items -->
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+ <!-- 2 flexible items -->
+ <div class="container">
+ <div class="itemA" style="flex-grow: 1"></div>
+ <div class="itemB" style="flex-grow: 1"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1-ref.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1-ref.html
new file mode 100644
index 000000000..5d1f50af2
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1-ref.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ width: 30px;
+ height: 100px;
+ border: 1px solid black;
+ float: left;
+ margin: 2px;
+ }
+ .itemA {
+ width: 22px;
+ height: 22px;
+ background: purple;
+ border: 4px solid indigo;
+ }
+ .itemB {
+ width: 20px;
+ height: 40px;
+ background: teal;
+ border: 5px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <!-- FIRST ROW -->
+ <!-- 1 inflexible item -->
+ <div class="container">
+ <div class="itemA"></div>
+ </div>
+ <!-- 1 flexible item -->
+ <div class="container">
+ <div class="itemA" style="height: 92px"></div>
+ </div>
+
+ <div style="clear: both"></div>
+
+ <!-- SECOND ROW -->
+ <!-- 2 inflexible items -->
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+ <!-- 2 flexible items -->
+ <div class="container">
+ <div class="itemA" style="height: 32px"></div>
+ <div class="itemB" style="height: 50px"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1a.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1a.html
new file mode 100644
index 000000000..e87e93372
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1a.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Test: Testing a vertical flex container with box-sizing:border-box on its flex items</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ display: flex;
+ flex-direction: column;
+ width: 30px;
+ height: 100px;
+ border: 1px solid black;
+ float: left;
+ margin: 2px;
+ }
+ .container > * {
+ box-sizing: border-box;
+ }
+ .itemA {
+ height: 30px;
+ background: purple;
+ border: 4px solid indigo;
+ }
+ .itemB {
+ height: 50px;
+ background: teal;
+ border: 5px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <!-- FIRST ROW -->
+ <!-- 1 inflexible item -->
+ <div class="container">
+ <div class="itemA"></div>
+ </div>
+ <!-- 1 flexible item -->
+ <div class="container">
+ <div class="itemA" style="flex-grow: 1"></div>
+ </div>
+
+ <div style="clear: both"></div>
+
+ <!-- SECOND ROW -->
+ <!-- 2 inflexible items -->
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+ <!-- 2 flexible items -->
+ <div class="container">
+ <div class="itemA" style="flex-grow: 1"></div>
+ <div class="itemB" style="flex-grow: 1"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1b.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1b.html
new file mode 100644
index 000000000..7edbf8378
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1b.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Test: Testing a vertical flex container with box-sizing:border-box on its flex items</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ display: flex;
+ flex-direction: column;
+ width: 30px;
+ height: 100px;
+ border: 1px solid black;
+ float: left;
+ margin: 2px;
+ }
+ .container > * {
+ box-sizing: border-box;
+ }
+ .itemA {
+ flex-basis: 30px;
+ background: purple;
+ border: 4px solid indigo;
+ }
+ .itemB {
+ flex-basis: 50px;
+ background: teal;
+ border: 5px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <!-- FIRST ROW -->
+ <!-- 1 inflexible item -->
+ <div class="container">
+ <div class="itemA"></div>
+ </div>
+ <!-- 1 flexible item -->
+ <div class="container">
+ <div class="itemA" style="flex-grow: 1"></div>
+ </div>
+
+ <div style="clear: both"></div>
+
+ <!-- SECOND ROW -->
+ <!-- 2 inflexible items -->
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+ <!-- 2 flexible items -->
+ <div class="container">
+ <div class="itemA" style="flex-grow: 1"></div>
+ <div class="itemB" style="flex-grow: 1"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-iframe.html b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-iframe.html
new file mode 100644
index 000000000..3801464ee
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-iframe.html
@@ -0,0 +1,24 @@
+<html>
+ <head>
+ <style>
+ body {
+ margin: 0;
+ }
+ .outerContainer {
+ display: flex;
+ height: 100px;
+ background-color: red;
+ }
+ .innerContainer {
+ display: flex;
+ flex: 1;
+ background-color: lime;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="outerContainer">
+ <div class="innerContainer"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-ref.xhtml
new file mode 100644
index 000000000..889ac83ce
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-ref.xhtml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ #container {
+ width: 100px;
+ height: 100px;
+ background: lime;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="container"></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1.xhtml
new file mode 100644
index 000000000..889b479c0
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1.xhtml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks that we reflow nested flex containers sufficiently when
+ the window (or the iframe we're inside of) is horizontally resized.
+
+ This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ #frame {
+ width: 400px;
+ height: 200px;
+ border: 0;
+ }
+ </style>
+ <script>
+ function tweak() {
+ document.getElementById("frame").style.width = "100px";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <iframe id="frame" src="flexbox-dyn-changeFrameWidth-1-iframe.html"></iframe>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-iframe.html b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-iframe.html
new file mode 100644
index 000000000..41a4a4c80
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-iframe.html
@@ -0,0 +1,27 @@
+<html>
+ <head>
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ display: flex;
+ flex-direction: column;
+ border: 10px solid lime;
+ width: 80px;
+ height: 80px;
+ background-color: red;
+ }
+ #item {
+ background-color: lime;
+ width: 80px;
+ height: 80px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="container">
+ <div id="item"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-ref.xhtml
new file mode 100644
index 000000000..889ac83ce
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-ref.xhtml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ #container {
+ width: 100px;
+ height: 100px;
+ background: lime;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="container"></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2.xhtml
new file mode 100644
index 000000000..fdb059095
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2.xhtml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks that we don't end up with the effects of an intermediate
+ "measuring" reflow left over, when we resize a window that contains a
+ vertical flex container with a fixed-height flex item.
+
+ This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ #frame {
+ width: 400px;
+ height: 200px;
+ border: 0;
+ }
+ </style>
+ <script>
+ function tweak() {
+ document.getElementById("frame").style.width = "100px";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <iframe id="frame" src="flexbox-dyn-changeFrameWidth-2-iframe.html"></iframe>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-iframe.html b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-iframe.html
new file mode 100644
index 000000000..b3e7dc27c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-iframe.html
@@ -0,0 +1,29 @@
+<html>
+ <head>
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ display: flex;
+ flex-direction: column;
+ border: 10px solid lime;
+ width: 80px;
+ height: 80px;
+ background-color: red;
+ }
+ #item {
+ background-color: lime;
+ min-height: 0;
+ width: 80px;
+ height: auto;
+ line-height: 80px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="container">
+ <div id="item">&nbsp;</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-ref.xhtml
new file mode 100644
index 000000000..889ac83ce
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-ref.xhtml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ #container {
+ width: 100px;
+ height: 100px;
+ background: lime;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="container"></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3.xhtml
new file mode 100644
index 000000000..c41246902
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3.xhtml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks that we don't end up with the effects of an intermediate
+ "measuring" reflow left over, when we resize a window that contains a
+ vertical flex container with an auto-height flex item.
+
+ This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ #frame {
+ width: 400px;
+ height: 200px;
+ border: 0;
+ }
+ </style>
+ <script>
+ function tweak() {
+ document.getElementById("frame").style.width = "100px";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <iframe id="frame" src="flexbox-dyn-changeFrameWidth-3-iframe.html"></iframe>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-iframe.html b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-iframe.html
new file mode 100644
index 000000000..72cb0af38
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-iframe.html
@@ -0,0 +1,20 @@
+<html>
+ <head>
+ <style>
+ body {
+ margin: 0;
+ }
+ .container {
+ display: flex;
+ background-color: lime;
+ top: 0;
+ bottom: 0;
+ position: absolute;
+ width: 100px;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="container"></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-ref.xhtml
new file mode 100644
index 000000000..889ac83ce
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-ref.xhtml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ #container {
+ width: 100px;
+ height: 100px;
+ background: lime;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="container"></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4.xhtml
new file mode 100644
index 000000000..80a7a1cd5
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4.xhtml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks that we sufficiently reflow abspos flex containers that
+ have top:0;bottom:0 (which ends up effectively being like height:100%)
+ the window (or the iframe we're inside of) is vertically resized.
+
+ This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ #frame {
+ width: 100px;
+ height: 50px;
+ border: 0;
+ }
+ </style>
+ <script>
+ function tweak() {
+ document.getElementById("frame").style.height = "100px";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <iframe id="frame" src="flexbox-dyn-changeFrameWidth-4-iframe.html"></iframe>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeOrder-1-ref.html b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1-ref.html
new file mode 100644
index 000000000..fb43b103d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<style>
+#limesquare {
+ width: 100px;
+ height: 100px;
+ background: lime;
+}
+</style>
+</head>
+<body>
+ <div id="limesquare"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeOrder-1a.html b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1a.html
new file mode 100644
index 000000000..ce5e6621f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1a.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks that we repaint, when a flex item is brought towards
+ the viewer in the stacking-order, without moving in the "x" or "y"
+ dimensions onscreen, using the "order" and "margin-left" properties.
+
+ This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html class="reftest-wait">
+<head>
+<style>
+#container {
+ display: flex;
+}
+
+#container > * {
+ width: 100px;
+ height: 100px;
+}
+
+#a {
+ background-color: red;
+}
+
+#b {
+ background-color: lime;
+}
+
+.foreground {
+ order: 1;
+ margin-left: -100px;
+}
+</style>
+<script>
+ function tweak() {
+ var a = document.getElementById("a");
+ var b = document.getElementById("b");
+ a.classList.remove("foreground");
+ b.classList.add("foreground");
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+</script>
+</head>
+<body>
+ <div id="container">
+ <div id="a" class="foreground"></div>
+ <div id="b"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeOrder-1b.html b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1b.html
new file mode 100644
index 000000000..ba6d6fd80
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1b.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks that we repaint, when a flex item is brought towards
+ the viewer in the stacking-order, without moving in the "x" or "y"
+ dimensions onscreen, using the "order" and "left" properties.
+
+ This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html class="reftest-wait">
+<head>
+<style>
+#container {
+ display: flex;
+}
+
+#container > * {
+ width: 100px;
+ height: 100px;
+ position: relative;
+}
+
+#a {
+ background-color: red;
+}
+
+#b {
+ background-color: lime;
+}
+
+.foreground {
+ order: 1;
+ left: -100px;
+}
+</style>
+<script>
+ function tweak() {
+ var a = document.getElementById("a");
+ var b = document.getElementById("b");
+ a.classList.remove("foreground");
+ b.classList.add("foreground");
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+</script>
+</head>
+<body>
+ <div id="container">
+ <div id="a" class="foreground"></div>
+ <div id="b"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changePadding-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changePadding-1-ref.xhtml
new file mode 100644
index 000000000..681a3cb4c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changePadding-1-ref.xhtml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ #container {
+ display: flex;
+ width: 100px;
+ height: 100px;
+ background: lime;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="container"></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changePadding-1a.xhtml b/layout/reftests/flexbox/flexbox-dyn-changePadding-1a.xhtml
new file mode 100644
index 000000000..600ab0faf
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changePadding-1a.xhtml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks that we reflow sufficiently when a grandchild of a
+ flex container needs an incremental reflow. This test should end up
+ rendering as a lime square, 100px by 100px.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ #container {
+ display: flex;
+ flex-direction: column;
+ width: 100px;
+ }
+ #item {
+ background: red;
+ }
+ #tweakMe {
+ height: 100px;
+ background: orange;
+ padding-left: 1px;
+ }
+ </style>
+ <script>
+ function tweak() {
+ var tweakMe = document.getElementById("tweakMe");
+ tweakMe.style.paddingLeft = "0";
+ tweakMe.style.background = "lime";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div id="container">
+ <div id="item">
+ <div id="tweakMe"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changePadding-1b.xhtml b/layout/reftests/flexbox/flexbox-dyn-changePadding-1b.xhtml
new file mode 100644
index 000000000..32390e6a2
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changePadding-1b.xhtml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks that we reflow sufficiently when a stretched, nested
+ flex container needs an incremental reflow. This test should end up
+ rendering as a lime square, 100px by 100px.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ #outerContainer {
+ display: flex;
+ width: 100px;
+ height: 100px;
+ background: red;
+ }
+ #tweakMe {
+ display: flex;
+ background: orange;
+ width: 100px;
+ /* height should stretch to fill parent's height, via
+ * parent's "align-items: stretch" (the default) */
+
+ padding-left: 1px;
+ }
+ </style>
+ <script>
+ function tweak() {
+ var tweakMe = document.getElementById("tweakMe");
+ tweakMe.style.paddingLeft = "0";
+ tweakMe.style.background = "lime";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div id="outerContainer">
+ <div id="tweakMe"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1-ref.xhtml
new file mode 100644
index 000000000..13e0880c0
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1-ref.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case is like its textcase, but with the testcase's dynamic
+ modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"> <div>[OldText]</div></div>
+ <div class="flexbox" id="f1"><div>[OldText]</div> </div>
+ <div class="flexbox" id="f2">[NewText]<div>[OldText]</div></div>
+ <div class="flexbox" id="f3">[NewText] <div>[OldText]</div></div>
+ <div class="flexbox" id="f4"> [NewText]<div>[OldText]</div></div>
+ <div class="flexbox" id="f5"><div>[OldText]</div>[NewText]</div>
+ <div class="flexbox" id="f6"><div>[OldText]</div>[NewText] </div>
+ <div class="flexbox" id="f7"><div>[OldText]</div> [NewText]</div>
+ <div class="flexbox" id="f8">[NewText] <div>[OldText]</div></div>
+ <div class="flexbox" id="f9"> [NewText]<div>[OldText]</div></div>
+ <div class="flexbox" id="f10"><div>[OldText]</div>[NewText] </div>
+ <div class="flexbox" id="f11"><div>[OldText]</div> [NewText]</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.xhtml
new file mode 100644
index 000000000..e271f4fb3
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.xhtml
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we reconstruct frames as necessary, after content
+ (including whitespace & text) is dynamically inserted as a child of a
+ flexbox. (Note that in cases where we know the whitespace is going to be
+ dropped, we don't bother reconstructing frames. This test is to be sure we
+ aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function tweak() {
+ // Just inserting whitespace
+ // -------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f0");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f1");
+
+ // Inserting text or text with whitespace
+ // --------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f2");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 0, "f4");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 1, "f6");
+ insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 1, "f7");
+
+ // Same as the whitespace cases immediately above, but now with separate
+ // text nodes for the whitespace vs. the text
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f8");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f8");
+
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f9");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f9");
+
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f10");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f10");
+
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f11");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f11");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"><div>[OldText]</div></div>
+ <div class="flexbox" id="f1"><div>[OldText]</div></div>
+ <div class="flexbox" id="f2"><div>[OldText]</div></div>
+ <div class="flexbox" id="f3"><div>[OldText]</div></div>
+ <div class="flexbox" id="f4"><div>[OldText]</div></div>
+ <div class="flexbox" id="f5"><div>[OldText]</div></div>
+ <div class="flexbox" id="f6"><div>[OldText]</div></div>
+ <div class="flexbox" id="f7"><div>[OldText]</div></div>
+ <div class="flexbox" id="f8"><div>[OldText]</div></div>
+ <div class="flexbox" id="f9"><div>[OldText]</div></div>
+ <div class="flexbox" id="f10"><div>[OldText]</div></div>
+ <div class="flexbox" id="f11"><div>[OldText]</div></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2-ref.xhtml
new file mode 100644
index 000000000..db3860fce
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2-ref.xhtml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case is like its textcase, but with the testcase's dynamic
+ modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ <!-- to make inserted div elements stand out -->
+ div.inserted { background: teal; }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox" id="f8"><div class="inserted">[NewDiv]</div><div>[OldText]</div></div>
+ <div class="flexbox" id="f9"><div>[OldText]</div><div class="inserted">[NewDiv]</div></div>
+ <div class="flexbox" id="f10"><div class="inserted">[NewDiv]</div> <div>[OldText]</div></div>
+ <div class="flexbox" id="f11"> <div class="inserted">[NewDiv]</div><div>[OldText]</div></div>
+ <div class="flexbox" id="f12"><div>[OldText]</div><div class="inserted">[NewDiv]</div> </div>
+ <div class="flexbox" id="f13"><div>[OldText]</div> <div class="inserted">[NewDiv]</div></div>
+ <div class="flexbox" id="f14"><div class="inserted">[NewDiv]</div>[NewText]<div>[OldText]</div></div>
+ <div class="flexbox" id="f15">[NewText]<div class="inserted">[NewDiv]</div><div>[OldText]</div></div>
+ <div class="flexbox" id="f16"><div>[OldText]</div><div class="inserted">[NewDiv]</div>[NewText]</div>
+ <div class="flexbox" id="f17"><div>[OldText]</div>[NewText]<div class="inserted">[NewDiv]</div></div>
+ </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2.xhtml
new file mode 100644
index 000000000..b083ccd5f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2.xhtml
@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we reconstruct frames as necessary, after content
+ (including whitespace & divs) is dynamically inserted as a child of a
+ flexbox. (Note that in cases where we know the whitespace is going to be
+ dropped, we don't bother reconstructing frames. This test is to be sure we
+ aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ <!-- to make inserted div elements stand out -->
+ div.inserted { background: teal; }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function createDivElem() {
+ var div = document.createElement("div");
+ div.setAttribute("class", "inserted");
+ div.appendChild(document.createTextNode("[NewDiv]"));
+ return div;
+ }
+
+ function tweak() {
+ // Inserting div, adjacent to inline content
+ // -----------------------------------------
+ insertNodeAtPosnInElem(createDivElem(), 0, "f0");
+ insertNodeAtPosnInElem(createDivElem(), 1, "f1");
+
+ // Inserting div and whitespace, before inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
+ insertNodeAtPosnInElem(createDivElem(), 0, "f2");
+
+ insertNodeAtPosnInElem(createDivElem(), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
+
+ // Inserting div and whitespace, after inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
+ insertNodeAtPosnInElem(createDivElem(), 1, "f4");
+
+ insertNodeAtPosnInElem(createDivElem(), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
+
+ // Inserting div and text, before inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+ insertNodeAtPosnInElem(createDivElem(), 0, "f6");
+
+ insertNodeAtPosnInElem(createDivElem(), 0, "f7");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+ // Inserting div and text, after inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+ insertNodeAtPosnInElem(createDivElem(), 1, "f8");
+
+ insertNodeAtPosnInElem(createDivElem(), 1, "f9");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"><div>[OldText]</div></div>
+ <div class="flexbox" id="f1"><div>[OldText]</div></div>
+ <div class="flexbox" id="f2"><div>[OldText]</div></div>
+ <div class="flexbox" id="f3"><div>[OldText]</div></div>
+ <div class="flexbox" id="f4"><div>[OldText]</div></div>
+ <div class="flexbox" id="f5"><div>[OldText]</div></div>
+ <div class="flexbox" id="f6"><div>[OldText]</div></div>
+ <div class="flexbox" id="f7"><div>[OldText]</div></div>
+ <div class="flexbox" id="f8"><div>[OldText]</div></div>
+ <div class="flexbox" id="f9"><div>[OldText]</div></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3-ref.xhtml
new file mode 100644
index 000000000..b29b16f18
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3-ref.xhtml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case is like its textcase, but with the testcase's dynamic
+ modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ <!-- to make inserted span elements stand out -->
+ span.inserted { background: teal; }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"><span class="inserted">[NewSpan]</span><div>[OldText]</div></div>
+ <div class="flexbox" id="f1"><div>[OldText]</div><span class="inserted">[NewSpan]</span></div>
+ <div class="flexbox" id="f2"><span class="inserted">[NewSpan]</span> <div>[OldText]</div></div>
+ <div class="flexbox" id="f3"> <span class="inserted">[NewSpan]</span><div>[OldText]</div></div>
+ <div class="flexbox" id="f4"><div>[OldText]</div><span class="inserted">[NewSpan]</span> </div>
+ <div class="flexbox" id="f5"><div>[OldText]</div> <span class="inserted">[NewSpan]</span></div>
+ <div class="flexbox" id="f6"><span class="inserted">[NewSpan]</span>[NewText]<div>[OldText]</div></div>
+ <div class="flexbox" id="f7">[NewText]<span class="inserted">[NewSpan]</span><div>[OldText]</div></div>
+ <div class="flexbox" id="f8"><div>[OldText]</div><span class="inserted">[NewSpan]</span>[NewText]</div>
+ <div class="flexbox" id="f9"><div>[OldText]</div>[NewText]<span class="inserted">[NewSpan]</span></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3.xhtml
new file mode 100644
index 000000000..faf54917d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3.xhtml
@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we reconstruct frames as necessary, after content
+ (including whitespace & spans) is dynamically inserted as a child of a
+ flexbox. (Note that in cases where we know the whitespace is going to be
+ dropped, we don't bother reconstructing frames. This test is to be sure we
+ aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ <!-- to make inserted span elements stand out -->
+ span.inserted { background: teal; }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function createSpanElem() {
+ var span = document.createElement("span");
+ span.setAttribute("class", "inserted");
+ span.appendChild(document.createTextNode("[NewSpan]"));
+ return span;
+ }
+
+ function tweak() {
+ // Inserting span, on either side of existing content
+ // --------------------------------------------------
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f0");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f1");
+
+ // Inserting span and whitespace, before existing content
+ // ------------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f2");
+
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
+
+ // Inserting span and whitespace, after existing content
+ // -----------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f4");
+
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
+
+ // Inserting span and text, before existing content
+ // ------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f6");
+
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f7");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+ // Inserting span and text, after existing content
+ // -----------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f8");
+
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f9");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"><div>[OldText]</div></div>
+ <div class="flexbox" id="f1"><div>[OldText]</div></div>
+ <div class="flexbox" id="f2"><div>[OldText]</div></div>
+ <div class="flexbox" id="f3"><div>[OldText]</div></div>
+ <div class="flexbox" id="f4"><div>[OldText]</div></div>
+ <div class="flexbox" id="f5"><div>[OldText]</div></div>
+ <div class="flexbox" id="f6"><div>[OldText]</div></div>
+ <div class="flexbox" id="f7"><div>[OldText]</div></div>
+ <div class="flexbox" id="f8"><div>[OldText]</div></div>
+ <div class="flexbox" id="f9"><div>[OldText]</div></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-1.xhtml
new file mode 100644
index 000000000..785063fdf
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-1.xhtml
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we reconstruct frames as necessary, after content
+ (including whitespace & text) is dynamically inserted as a child of a
+ flexbox. (Note that in cases where we know the whitespace is going to be
+ dropped, we don't bother reconstructing frames. This test is to be sure we
+ aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function tweak() {
+ // Just inserting whitespace
+ // -------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f0");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f1");
+
+ // Inserting text or text with whitespace
+ // --------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f2");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 0, "f4");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 1, "f6");
+ insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 1, "f7");
+
+ // Same as the whitespace cases immediately above, but now with separate
+ // text nodes for the whitespace vs. the text
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f8");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f8");
+
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f9");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f9");
+
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f10");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f10");
+
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f11");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f11");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"><span>[OldText]</span></div>
+ <div class="flexbox" id="f1"><span>[OldText]</span></div>
+ <div class="flexbox" id="f2"><span>[OldText]</span></div>
+ <div class="flexbox" id="f3"><span>[OldText]</span></div>
+ <div class="flexbox" id="f4"><span>[OldText]</span></div>
+ <div class="flexbox" id="f5"><span>[OldText]</span></div>
+ <div class="flexbox" id="f6"><span>[OldText]</span></div>
+ <div class="flexbox" id="f7"><span>[OldText]</span></div>
+ <div class="flexbox" id="f8"><span>[OldText]</span></div>
+ <div class="flexbox" id="f9"><span>[OldText]</span></div>
+ <div class="flexbox" id="f10"><span>[OldText]</span></div>
+ <div class="flexbox" id="f11"><span>[OldText]</span></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-2.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-2.xhtml
new file mode 100644
index 000000000..9c8279662
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-2.xhtml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we reconstruct frames as necessary, after content
+ (including whitespace & divs) is dynamically inserted as a child of a
+ flexbox. (Note that in cases where we know the whitespace is going to be
+ dropped, we don't bother reconstructing frames. This test is to be sure we
+ aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body {
+ font-size: 10px;
+ }
+
+ div.inserted {
+ background: teal; /* To make inserted div elements stand out. */
+ }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function createDivElem() {
+ var div = document.createElement("div");
+ div.setAttribute("class", "inserted");
+ div.appendChild(document.createTextNode("[NewDiv]"));
+ return div;
+ }
+
+ function tweak() {
+ // Inserting div, adjacent to inline content
+ // -----------------------------------------
+ insertNodeAtPosnInElem(createDivElem(), 0, "f0");
+ insertNodeAtPosnInElem(createDivElem(), 1, "f1");
+
+ // Inserting div and whitespace, before inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
+ insertNodeAtPosnInElem(createDivElem(), 0, "f2");
+
+ insertNodeAtPosnInElem(createDivElem(), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
+
+ // Inserting div and whitespace, after inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
+ insertNodeAtPosnInElem(createDivElem(), 1, "f4");
+
+ insertNodeAtPosnInElem(createDivElem(), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
+
+ // Inserting div and text, before inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+ insertNodeAtPosnInElem(createDivElem(), 0, "f6");
+
+ insertNodeAtPosnInElem(createDivElem(), 0, "f7");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+ // Inserting div and text, after inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+ insertNodeAtPosnInElem(createDivElem(), 1, "f8");
+
+ insertNodeAtPosnInElem(createDivElem(), 1, "f9");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"><span>[OldText]</span></div>
+ <div class="flexbox" id="f1"><span>[OldText]</span></div>
+ <div class="flexbox" id="f2"><span>[OldText]</span></div>
+ <div class="flexbox" id="f3"><span>[OldText]</span></div>
+ <div class="flexbox" id="f4"><span>[OldText]</span></div>
+ <div class="flexbox" id="f5"><span>[OldText]</span></div>
+ <div class="flexbox" id="f6"><span>[OldText]</span></div>
+ <div class="flexbox" id="f7"><span>[OldText]</span></div>
+ <div class="flexbox" id="f8"><span>[OldText]</span></div>
+ <div class="flexbox" id="f9"><span>[OldText]</span></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml
new file mode 100644
index 000000000..9f60c4316
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we reconstruct frames as necessary, after content
+ (including whitespace & spans) is dynamically inserted as a child of a
+ flexbox. (Note that in cases where we know the whitespace is going to be
+ dropped, we don't bother reconstructing frames. This test is to be sure we
+ aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body {
+ font-size: 10px;
+ }
+
+ span.inserted {
+ background: teal; /* To make inserted span elements stand out. */
+ }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function createSpanElem() {
+ var span = document.createElement("span");
+ span.setAttribute("class", "inserted");
+ span.appendChild(document.createTextNode("[NewSpan]"));
+ return span;
+ }
+
+ function tweak() {
+ // Inserting span, on either side of existing content
+ // --------------------------------------------------
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f0");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f1");
+
+ // Inserting span and whitespace, before existing content
+ // ------------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f2");
+
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
+
+ // Inserting span and whitespace, after existing content
+ // -----------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f4");
+
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
+
+ // Inserting span and text, before existing content
+ // ------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f6");
+
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f7");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+ // Inserting span and text, after existing content
+ // -----------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f8");
+
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f9");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"><span>[OldText]</span></div>
+ <div class="flexbox" id="f1"><span>[OldText]</span></div>
+ <div class="flexbox" id="f2"><span>[OldText]</span></div>
+ <div class="flexbox" id="f3"><span>[OldText]</span></div>
+ <div class="flexbox" id="f4"><span>[OldText]</span></div>
+ <div class="flexbox" id="f5"><span>[OldText]</span></div>
+ <div class="flexbox" id="f6"><span>[OldText]</span></div>
+ <div class="flexbox" id="f7"><span>[OldText]</span></div>
+ <div class="flexbox" id="f8"><span>[OldText]</span></div>
+ <div class="flexbox" id="f9"><span>[OldText]</span></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1-ref.xhtml
new file mode 100644
index 000000000..536a9fa83
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1-ref.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case is like its textcase, but with the testcase's dynamic
+ modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"> [OldText]</div>
+ <div class="flexbox" id="f1">[OldText] </div>
+ <div class="flexbox" id="f2">[NewText][OldText]</div>
+ <div class="flexbox" id="f3">[NewText] [OldText]</div>
+ <div class="flexbox" id="f4"> [NewText][OldText]</div>
+ <div class="flexbox" id="f5">[OldText][NewText]</div>
+ <div class="flexbox" id="f6">[OldText][NewText] </div>
+ <div class="flexbox" id="f7">[OldText] [NewText]</div>
+ <div class="flexbox" id="f8">[NewText] [OldText]</div>
+ <div class="flexbox" id="f9"> [NewText][OldText]</div>
+ <div class="flexbox" id="f10">[OldText][NewText] </div>
+ <div class="flexbox" id="f11">[OldText] [NewText]</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1.xhtml
new file mode 100644
index 000000000..37f63136a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1.xhtml
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we reconstruct frames as necessary, after content
+ (including whitespace & text) is dynamically inserted as a child of a
+ flexbox. (Note that in cases where we know the whitespace is going to be
+ dropped, we don't bother reconstructing frames. This test is to be sure we
+ aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function tweak() {
+ // Just inserting whitespace
+ // -------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f0");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f1");
+
+ // Inserting text or text with whitespace
+ // --------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f2");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 0, "f4");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 1, "f6");
+ insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 1, "f7");
+
+ // Same as the whitespace cases immediately above, but now with separate
+ // text nodes for the whitespace vs. the text
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f8");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f8");
+
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f9");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f9");
+
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f10");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f10");
+
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f11");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f11");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0">[OldText]</div>
+ <div class="flexbox" id="f1">[OldText]</div>
+ <div class="flexbox" id="f2">[OldText]</div>
+ <div class="flexbox" id="f3">[OldText]</div>
+ <div class="flexbox" id="f4">[OldText]</div>
+ <div class="flexbox" id="f5">[OldText]</div>
+ <div class="flexbox" id="f6">[OldText]</div>
+ <div class="flexbox" id="f7">[OldText]</div>
+ <div class="flexbox" id="f8">[OldText]</div>
+ <div class="flexbox" id="f9">[OldText]</div>
+ <div class="flexbox" id="f10">[OldText]</div>
+ <div class="flexbox" id="f11">[OldText]</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2-ref.xhtml
new file mode 100644
index 000000000..7e3468b1f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2-ref.xhtml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case is like its textcase, but with the testcase's dynamic
+ modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body {
+ font-size: 10px;
+ }
+
+ div.inserted {
+ background: teal; /* To make inserted div elements stand out. */
+ }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox" id="f8"><div class="inserted">[NewDiv]</div>[OldText]</div>
+ <div class="flexbox" id="f9">[OldText]<div class="inserted">[NewDiv]</div></div>
+ <div class="flexbox" id="f10"><div class="inserted">[NewDiv]</div> [OldText]</div>
+ <div class="flexbox" id="f11"> <div class="inserted">[NewDiv]</div>[OldText]</div>
+ <div class="flexbox" id="f12">[OldText]<div class="inserted">[NewDiv]</div> </div>
+ <div class="flexbox" id="f13">[OldText] <div class="inserted">[NewDiv]</div></div>
+ <div class="flexbox" id="f14"><div class="inserted">[NewDiv]</div>[NewText][OldText]</div>
+ <div class="flexbox" id="f15">[NewText]<div class="inserted">[NewDiv]</div>[OldText]</div>
+ <div class="flexbox" id="f16">[OldText]<div class="inserted">[NewDiv]</div>[NewText]</div>
+ <div class="flexbox" id="f17">[OldText][NewText]<div class="inserted">[NewDiv]</div></div>
+ </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2.xhtml
new file mode 100644
index 000000000..b907af8b5
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2.xhtml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we reconstruct frames as necessary, after content
+ (including whitespace & divs) is dynamically inserted as a child of a
+ flexbox. (Note that in cases where we know the whitespace is going to be
+ dropped, we don't bother reconstructing frames. This test is to be sure we
+ aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body {
+ font-size: 10px;
+ }
+
+ div.inserted {
+ background: teal; /* To make inserted div elements stand out. */
+ }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function createDivElem() {
+ var div = document.createElement("div");
+ div.setAttribute("class", "inserted");
+ div.appendChild(document.createTextNode("[NewDiv]"));
+ return div;
+ }
+
+ function tweak() {
+ // Inserting div, adjacent to inline content
+ // -----------------------------------------
+ insertNodeAtPosnInElem(createDivElem(), 0, "f0");
+ insertNodeAtPosnInElem(createDivElem(), 1, "f1");
+
+ // Inserting div and whitespace, before inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
+ insertNodeAtPosnInElem(createDivElem(), 0, "f2");
+
+ insertNodeAtPosnInElem(createDivElem(), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
+
+ // Inserting div and whitespace, after inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
+ insertNodeAtPosnInElem(createDivElem(), 1, "f4");
+
+ insertNodeAtPosnInElem(createDivElem(), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
+
+ // Inserting div and text, before inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+ insertNodeAtPosnInElem(createDivElem(), 0, "f6");
+
+ insertNodeAtPosnInElem(createDivElem(), 0, "f7");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+ // Inserting div and text, after inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+ insertNodeAtPosnInElem(createDivElem(), 1, "f8");
+
+ insertNodeAtPosnInElem(createDivElem(), 1, "f9");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0">[OldText]</div>
+ <div class="flexbox" id="f1">[OldText]</div>
+ <div class="flexbox" id="f2">[OldText]</div>
+ <div class="flexbox" id="f3">[OldText]</div>
+ <div class="flexbox" id="f4">[OldText]</div>
+ <div class="flexbox" id="f5">[OldText]</div>
+ <div class="flexbox" id="f6">[OldText]</div>
+ <div class="flexbox" id="f7">[OldText]</div>
+ <div class="flexbox" id="f8">[OldText]</div>
+ <div class="flexbox" id="f9">[OldText]</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3-ref.xhtml
new file mode 100644
index 000000000..45d357ab8
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3-ref.xhtml
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case is like its textcase, but with the testcase's dynamic
+ modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body {
+ font-size: 10px;
+ }
+
+ span.inserted {
+ background: teal; /* To make inserted span elements stand out. */
+ }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"><span class="inserted">[NewSpan]</span>[OldText]</div>
+ <div class="flexbox" id="f1">[OldText]<span class="inserted">[NewSpan]</span></div>
+ <div class="flexbox" id="f2"><span class="inserted">[NewSpan]</span> [OldText]</div>
+ <div class="flexbox" id="f3"> <span class="inserted">[NewSpan]</span>[OldText]</div>
+ <div class="flexbox" id="f4">[OldText]<span class="inserted">[NewSpan]</span> </div>
+ <div class="flexbox" id="f5">[OldText] <span class="inserted">[NewSpan]</span></div>
+ <div class="flexbox" id="f6"><span class="inserted">[NewSpan]</span>[NewText][OldText]</div>
+ <div class="flexbox" id="f7">[NewText]<span class="inserted">[NewSpan]</span>[OldText]</div>
+ <div class="flexbox" id="f8">[OldText]<span class="inserted">[NewSpan]</span>[NewText]</div>
+ <div class="flexbox" id="f9">[OldText][NewText]<span class="inserted">[NewSpan]</span></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3.xhtml
new file mode 100644
index 000000000..eca09eb85
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3.xhtml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we reconstruct frames as necessary, after content
+ (including whitespace & spans) is dynamically inserted as a child of a
+ flexbox. (Note that in cases where we know the whitespace is going to be
+ dropped, we don't bother reconstructing frames. This test is to be sure we
+ aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body {
+ font-size: 10px;
+ }
+
+ span.inserted {
+ background: teal; /* To make inserted span elements stand out. */
+ }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function createSpanElem() {
+ var span = document.createElement("span");
+ span.setAttribute("class", "inserted");
+ span.appendChild(document.createTextNode("[NewSpan]"));
+ return span;
+ }
+
+ function tweak() {
+ // Inserting span, on either side of existing content
+ // --------------------------------------------------
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f0");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f1");
+
+ // Inserting span and whitespace, before existing content
+ // ------------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f2");
+
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
+
+ // Inserting span and whitespace, after existing content
+ // -----------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f4");
+
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
+
+ // Inserting span and text, before existing content
+ // ------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f6");
+
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f7");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+ // Inserting span and text, after existing content
+ // -----------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f8");
+
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f9");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0">[OldText]</div>
+ <div class="flexbox" id="f1">[OldText]</div>
+ <div class="flexbox" id="f2">[OldText]</div>
+ <div class="flexbox" id="f3">[OldText]</div>
+ <div class="flexbox" id="f4">[OldText]</div>
+ <div class="flexbox" id="f5">[OldText]</div>
+ <div class="flexbox" id="f6">[OldText]</div>
+ <div class="flexbox" id="f7">[OldText]</div>
+ <div class="flexbox" id="f8">[OldText]</div>
+ <div class="flexbox" id="f9">[OldText]</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1-ref.xhtml
new file mode 100644
index 000000000..0c0f9b5ba
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1-ref.xhtml
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case is like its textcase, but with the testcase's dynamic
+ modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ <!-- to make inserted span elements stand out -->
+ span {
+ background: teal;
+ padding: 3px;
+ }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"><span/>[orig]</div>
+ <div class="flexbox" id="f1">[orig]<span/></div>
+ <div class="flexbox" id="f2"><span/> [orig]</div>
+ <div class="flexbox" id="f3"> <span/>[orig]</div>
+ <div class="flexbox" id="f4">[orig]<span/> </div>
+ <div class="flexbox" id="f5">[orig] <span/></div>
+ <div class="flexbox" id="f6"><span/>[NewText][orig]</div>
+ <div class="flexbox" id="f7">[NewText]<span/>[orig]</div>
+ <div class="flexbox" id="f8">[orig]<span/>[NewText]</div>
+ <div class="flexbox" id="f9">[orig][NewText]<span/></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1.xhtml
new file mode 100644
index 000000000..9bcd13352
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1.xhtml
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test is a variant of flexbox-dyn-insertAroundText-3.xhtml with the
+ inserted spans being empty & having padding. This triggered invalidation
+ issues with an older work-in-progress patch, so I'm adding this reftest to
+ track that issue & prevent it from regressing.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ <!-- to make inserted span elements stand out -->
+ span {
+ background: teal;
+ padding: 3px;
+ }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function createSpanElem() {
+ return document.createElement("span");
+ }
+
+ function tweak() {
+ // Inserting span, on either side of existing content
+ // --------------------------------------------------
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f0");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f1");
+
+ // Inserting span and whitespace, before existing content
+ // ------------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f2");
+
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
+
+ // Inserting span and whitespace, after existing content
+ // -----------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f4");
+
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
+
+ // Inserting span and text, before existing content
+ // ------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f6");
+
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f7");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+ // Inserting span and text, after existing content
+ // -----------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f8");
+
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f9");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0">[orig]</div>
+ <div class="flexbox" id="f1">[orig]</div>
+ <div class="flexbox" id="f2">[orig]</div>
+ <div class="flexbox" id="f3">[orig]</div>
+ <div class="flexbox" id="f4">[orig]</div>
+ <div class="flexbox" id="f5">[orig]</div>
+ <div class="flexbox" id="f6">[orig]</div>
+ <div class="flexbox" id="f7">[orig]</div>
+ <div class="flexbox" id="f8">[orig]</div>
+ <div class="flexbox" id="f9">[orig]</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-empty-1-ref.xhtml b/layout/reftests/flexbox/flexbox-empty-1-ref.xhtml
new file mode 100644
index 000000000..074436d11
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-empty-1-ref.xhtml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for behavior of flex containers that have no children -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ border: 1px dotted blue;
+ background: yellow;
+ }
+
+ div.withPadding {
+ padding: 2px 3px 4px 5px;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox"/>
+ <div class="flexbox" style="width: 5px"/>
+ <div class="flexbox" style="width: -moz-available"/>
+ <div class="flexbox" style="width: -moz-max-content"/>
+ <div class="flexbox" style="width: -moz-min-content"/>
+ <div class="flexbox" style="height: 6px"/>
+ <div class="flexbox" style="width: 7px; height: 8px"/>
+
+ <!-- now with padding -->
+ <div class="flexbox withPadding"/>
+ <div class="flexbox withPadding" style="width: 5px"/>
+ <div class="flexbox withPadding" style="width: -moz-available"/>
+ <div class="flexbox withPadding" style="width: -moz-max-content"/>
+ <div class="flexbox withPadding" style="width: -moz-min-content"/>
+ <div class="flexbox withPadding" style="height: 6px"/>
+ <div class="flexbox withPadding" style="width: 7px; height: 8px"/>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-empty-1a.xhtml b/layout/reftests/flexbox/flexbox-empty-1a.xhtml
new file mode 100644
index 000000000..2912028dd
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-empty-1a.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for behavior of flex containers that have no children -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ border: 1px dotted blue;
+ background: yellow;
+ display: flex;
+ }
+
+ div.withPadding {
+ padding: 2px 3px 4px 5px;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox"/>
+ <div class="flexbox" style="width: 5px"/>
+ <div class="flexbox" style="width: -moz-available"/>
+ <div class="flexbox" style="width: -moz-max-content"/>
+ <div class="flexbox" style="width: -moz-min-content"/>
+ <div class="flexbox" style="height: 6px"/>
+ <div class="flexbox" style="width: 7px; height: 8px"/>
+
+ <!-- now with padding -->
+ <div class="flexbox withPadding"/>
+ <div class="flexbox withPadding" style="width: 5px"/>
+ <div class="flexbox withPadding" style="width: -moz-available"/>
+ <div class="flexbox withPadding" style="width: -moz-max-content"/>
+ <div class="flexbox withPadding" style="width: -moz-min-content"/>
+ <div class="flexbox withPadding" style="height: 6px"/>
+ <div class="flexbox withPadding" style="width: 7px; height: 8px"/>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-empty-1b.xhtml b/layout/reftests/flexbox/flexbox-empty-1b.xhtml
new file mode 100644
index 000000000..20ea2e50b
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-empty-1b.xhtml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Testcase for behavior of flex containers that have no children. This
+ testcase differs from the "1a" variant in that it's got a single space
+ inside each flex container (which should be ignored, since the flexbox
+ spec says we shouldn't create a flex item for an entirely-whitespace run
+ of inline content).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ border: 1px dotted blue;
+ background: yellow;
+ display: flex;
+ }
+
+ div.withPadding {
+ padding: 2px 3px 4px 5px;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox"> </div>
+ <div class="flexbox" style="width: 5px"> </div>
+ <div class="flexbox" style="width: -moz-available"> </div>
+ <div class="flexbox" style="width: -moz-max-content"> </div>
+ <div class="flexbox" style="width: -moz-min-content"> </div>
+ <div class="flexbox" style="height: 6px"> </div>
+ <div class="flexbox" style="width: 7px; height: 8px"> </div>
+
+ <!-- now with padding -->
+ <div class="flexbox withPadding"> </div>
+ <div class="flexbox withPadding" style="width: 5px"> </div>
+ <div class="flexbox withPadding" style="width: -moz-available"> </div>
+ <div class="flexbox withPadding" style="width: -moz-max-content"> </div>
+ <div class="flexbox withPadding" style="width: -moz-min-content"> </div>
+ <div class="flexbox withPadding" style="height: 6px"> </div>
+ <div class="flexbox withPadding" style="width: 7px; height: 8px"> </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001-ref.html b/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001-ref.html
new file mode 100644
index 000000000..8a302da77
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference: Synthesized flex container baseline.</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1313811">
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+.ib {
+ display: inline-block;
+}
+.ig {
+ display: inline-grid;
+}
+.ib, .ig {
+ border-style: solid;
+ border-width: 3px 1px 5px 1px;
+ padding: 7px 10px 3px 8px;
+ margin: 5px 3px 2px 1px;
+}
+</style>
+
+</head><body>
+
+<pre>Inline-level context:</pre>
+Flexbox:<div class="ib"></div>
+Block:<div class="ig"></div>
+
+<pre>Grid-level context:</pre>
+<div style="display:inline-grid; grid-auto-flow:column; align-items:baseline; justify-items:start">
+Flexbox:<div class="ib"></div>
+Block:<div class="ig"></div>
+</div>
+
+<pre>Flexbox-level context:</pre>
+<div style="display:inline-flex; align-items:baseline; justify-items:start">
+Flexbox:<div class="ib" style="margin-bottom:0"></div>
+Block:<div class="ig"></div>
+</div>
+
+</body></html>
diff --git a/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001.html b/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001.html
new file mode 100644
index 000000000..5f58b18ec
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Synthesized flex container baseline.</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1313811">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-baselines">
+ <link rel="match" href="flexbox-empty-container-synthesized-baseline-001.html">
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+.ib {
+ display: inline-block;
+}
+.if {
+ display: inline-flex;
+}
+.ib, .if {
+ border-style: solid;
+ border-width: 3px 1px 5px 1px;
+ padding: 7px 10px 3px 8px;
+ margin: 5px 3px 2px 1px;
+}
+</style>
+
+</head><body>
+
+<pre>Inline-level context:</pre>
+Flexbox:<div class="if"></div>
+Block:<div class="ib"></div>
+
+<pre>Grid-level context:</pre>
+<div style="display:inline-grid; grid-auto-flow:column; align-items:baseline; justify-items:start">
+Flexbox:<div class="if"></div>
+Block:<div class="ib" style="margin-bottom:0"></div>
+</div>
+
+<pre>Flexbox-level context:</pre>
+<div style="display:inline-flex; align-items:baseline; justify-items:start">
+Flexbox:<div class="if"></div>
+Block:<div class="ib" style="margin-bottom:0"></div>
+</div>
+
+</body></html>
diff --git a/layout/reftests/flexbox/flexbox-float-1-ref.xhtml b/layout/reftests/flexbox/flexbox-float-1-ref.xhtml
new file mode 100644
index 000000000..1fd86bafd
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-1-ref.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ display: flex;
+ width: 400px;
+ margin-bottom: 2px;
+ font-family: sans-serif;
+ background: lightgreen;
+ justify-content: space-around;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ aaa<div>[[[</div>bbb
+ </div>
+ <div class="flexbox">
+ aaa<div>]]]</div>bbb
+ </div>
+ <div class="flexbox">
+ aaa<div>[[[</div>
+ </div>
+ <div class="flexbox">
+ aaa<div>]]]</div>
+ </div>
+ <div class="flexbox">
+ <div>[[[</div>bbb
+ </div>
+ <div class="flexbox">
+ <div>]]]</div>bbb
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-1a.xhtml b/layout/reftests/flexbox/flexbox-float-1a.xhtml
new file mode 100644
index 000000000..e5c336b46
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-1a.xhtml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that 'float' on a direct child of a flexbox won't
+ actually cause it to be floated.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ display: flex;
+ width: 400px;
+ margin-bottom: 2px;
+ font-family: sans-serif;
+ background: lightgreen;
+ justify-content: space-around;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- These cases have a span as a direct child of the flexbox. The span
+ should become display:block (and hence form its own flex item),
+ but it shouldn't actually float.
+ -->
+ <div class="flexbox">
+ aaa<span style="float: left">[[[</span>bbb
+ </div>
+ <div class="flexbox">
+ aaa<span style="float: right">]]]</span>bbb
+ </div>
+ <div class="flexbox">
+ aaa<span style="float: left">[[[</span>
+ </div>
+ <div class="flexbox">
+ aaa<span style="float: right">]]]</span>
+ </div>
+ <div class="flexbox">
+ <span style="float: left">[[[</span>bbb
+ </div>
+ <div class="flexbox">
+ <span style="float: right">]]]</span>bbb
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-1b.xhtml b/layout/reftests/flexbox/flexbox-float-1b.xhtml
new file mode 100644
index 000000000..d00b5304e
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-1b.xhtml
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test is like flexbox-float-1a.xhtml, but with the float-styled
+ element already being a block. (Should render the same.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ display: flex;
+ width: 400px;
+ margin-bottom: 2px;
+ font-family: sans-serif;
+ background: lightgreen;
+ justify-content: space-around;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ aaa<div style="float: left">[[[</div>bbb
+ </div>
+ <div class="flexbox">
+ aaa<div style="float: right">]]]</div>bbb
+ </div>
+ <div class="flexbox">
+ aaa<div style="float: left">[[[</div>
+ </div>
+ <div class="flexbox">
+ aaa<div style="float: right">]]]</div>
+ </div>
+ <div class="flexbox">
+ <div style="float: left">[[[</div>bbb
+ </div>
+ <div class="flexbox">
+ <div style="float: right">]]]</div>bbb
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-1c.xhtml b/layout/reftests/flexbox/flexbox-float-1c.xhtml
new file mode 100644
index 000000000..e90635813
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-1c.xhtml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test is like flexbox-float-1a.xhtml, but with the float-styled
+ element dynamically inserted.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+ <script>
+ function generateFloat(aFloatDirection) {
+ var newElem = document.createElement("span");
+ newElem.setAttribute("style", "float: " + aFloatDirection);
+ newElem.innerHTML = aFloatDirection == "left" ? "[[[" : "]]]";
+ return newElem;
+ }
+
+ function tweak() {
+ var containerList = document.getElementsByClassName("flexbox");
+ for (var i = 0; i &lt; containerList.length; i++) {
+ var container = containerList[i];
+ var newElem = generateFloat(container.getAttribute("floatValToUse"));
+
+ var nodeToInsertBefore;
+ var insertPosn = container.getAttribute("insertPosn");
+ if (insertPosn == "begin") {
+ nodeToInsertBefore = container.firstChild;
+ } else if (insertPosn == "mid") {
+ nodeToInsertBefore = container.firstChild.nextSibling;
+ } else if (insertPosn == "end") {
+ nodeToInsertBefore = null;
+ }
+
+ container.insertBefore(newElem, nodeToInsertBefore);
+ }
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ <style>
+ div.flexbox {
+ display: flex;
+ width: 400px;
+ margin-bottom: 2px;
+ font-family: sans-serif;
+ background: lightgreen;
+ justify-content: space-around;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox" floatValToUse="left" insertPosn="mid">
+ aaa<span>bbb</span>
+ </div>
+ <div class="flexbox" floatValToUse="right" insertPosn="mid">
+ aaa<span>bbb</span>
+ </div>
+ <div class="flexbox" floatValToUse="left" insertPosn="end">
+ aaa
+ </div>
+ <div class="flexbox" floatValToUse="right" insertPosn="end">
+ aaa
+ </div>
+ <div class="flexbox" floatValToUse="left" insertPosn="begin">
+ bbb
+ </div>
+ <div class="flexbox" floatValToUse="right" insertPosn="begin">
+ bbb
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-1d.xhtml b/layout/reftests/flexbox/flexbox-float-1d.xhtml
new file mode 100644
index 000000000..4fdc493f1
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-1d.xhtml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test is like flexbox-float-1b.xhtml, but with the float-styled
+ element dynamically inserted.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+ <script>
+ function generateFloat(aFloatDirection) {
+ var newElem = document.createElement("div");
+ newElem.setAttribute("style", "float: " + aFloatDirection);
+ newElem.innerHTML = aFloatDirection == "left" ? "[[[" : "]]]";
+ return newElem;
+ }
+
+ function tweak() {
+ var containerList = document.getElementsByClassName("flexbox");
+ for (var i = 0; i &lt; containerList.length; i++) {
+ var container = containerList[i];
+ var newElem = generateFloat(container.getAttribute("floatValToUse"));
+
+ var nodeToInsertBefore;
+ var insertPosn = container.getAttribute("insertPosn");
+ if (insertPosn == "begin") {
+ nodeToInsertBefore = container.firstChild;
+ } else if (insertPosn == "mid") {
+ nodeToInsertBefore = container.firstChild.nextSibling;
+ } else if (insertPosn == "end") {
+ nodeToInsertBefore = null;
+ }
+
+ container.insertBefore(newElem, nodeToInsertBefore);
+ }
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ <style>
+ div.flexbox {
+ display: flex;
+ width: 400px;
+ margin-bottom: 2px;
+ font-family: sans-serif;
+ background: lightgreen;
+ justify-content: space-around;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox" floatValToUse="left" insertPosn="mid">
+ aaa<span>bbb</span>
+ </div>
+ <div class="flexbox" floatValToUse="right" insertPosn="mid">
+ aaa<span>bbb</span>
+ </div>
+ <div class="flexbox" floatValToUse="left" insertPosn="end">
+ aaa
+ </div>
+ <div class="flexbox" floatValToUse="right" insertPosn="end">
+ aaa
+ </div>
+ <div class="flexbox" floatValToUse="left" insertPosn="begin">
+ bbb
+ </div>
+ <div class="flexbox" floatValToUse="right" insertPosn="begin">
+ bbb
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-2-ref.xhtml b/layout/reftests/flexbox/flexbox-float-2-ref.xhtml
new file mode 100644
index 000000000..c6270dd49
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-2-ref.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case uses a div with "text-align: center" in place of a
+ flex container, and has the text "lll" and "rrr" already placed at the
+ target position instead of having it positioned with the "float" property.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ text-align: center;
+ font-family: sans-serif;
+ width: 400px;
+ margin-bottom: 2px;
+ background: lightgreen;
+ justify-content: space-around;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ lllaaabbb
+ </div>
+ <div class="flexbox">
+ aaabbbrrr
+ </div>
+
+ <div class="flexbox">
+ lllaaabbb
+ </div>
+ <div class="flexbox">
+ aaabbbrrr
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-2a.xhtml b/layout/reftests/flexbox/flexbox-float-2a.xhtml
new file mode 100644
index 000000000..817e3fb2c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-2a.xhtml
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that 'float' on a grandchild of a flex container _will_
+ cause the element to be floated.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ display: flex;
+ font-family: sans-serif;
+ width: 400px;
+ margin-bottom: 2px;
+ background: lightgreen;
+ justify-content: space-around;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- These cases have a floated span as a grandchild of the flex container.
+ The span should float within its flex item. -->
+ <div class="flexbox">
+ <span>aaa<span style="float: left">lll</span>bbb</span>
+ </div>
+ <div class="flexbox">
+ <span>aaa<span style="float: right">rrr</span>bbb</span>
+ </div>
+
+ <!-- These cases have a floated div as a grandchild of the flex container.
+ The div should float within its flex item. -->
+ <div class="flexbox">
+ <span>aaa<div style="float: left">lll</div>bbb</span>
+ </div>
+ <div class="flexbox">
+ <span>aaa<div style="float: right">rrr</div>bbb</span>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-2b.xhtml b/layout/reftests/flexbox/flexbox-float-2b.xhtml
new file mode 100644
index 000000000..29b9355ee
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-2b.xhtml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that 'float' on a grandchild of a flex container _will_
+ cause the element to be floated.
+
+ This differs from the "2a" variant in that the flex items are <div>s
+ rather than <span>s (though that shouldn't matter, because <span> as a
+ flex item should become "display:block").
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ display: flex;
+ font-family: sans-serif;
+ width: 400px;
+ margin-bottom: 2px;
+ background: lightgreen;
+ justify-content: space-around;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- These cases have a floated span as a grandchild of the flex container.
+ The span should float within its flex item. -->
+ <div class="flexbox">
+ <div>aaa<span style="float: left">lll</span>bbb</div>
+ </div>
+ <div class="flexbox">
+ <div>aaa<span style="float: right">rrr</span>bbb</div>
+ </div>
+
+ <!-- These cases have a floated div as a grandchild of the flex container.
+ The div should float within its flex item. -->
+ <div class="flexbox">
+ <div>aaa<div style="float: left">lll</div>bbb</div>
+ </div>
+ <div class="flexbox">
+ <div>aaa<div style="float: right">rrr</div>bbb</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1-ref.xhtml
new file mode 100644
index 000000000..b1008e7cc
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1-ref.xhtml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Reference case, using a table with fixed-size cells instead of a
+ flex container.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <style>
+ table {
+ font: 10px Ahem;
+ height: 100px;
+ width: 200px;
+ }
+ td { vertical-align: top; }
+ td.a {
+ width: 30px;
+ background: lightgreen;
+ }
+ td.b {
+ width: 50px;
+ background: yellow;
+ }
+ td.inflex {
+ width: 20px;
+ background: gray;
+ }
+ </style>
+ </head>
+ <body>
+ <table cellspacing="0" cellpadding="0">
+ <tr>
+ <td class="a"/>
+ <td>text</td>
+ <td class="b"/>
+ <td><i>italic</i></td>
+ <td class="inflex"></td>
+ </tr>
+ </table>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1a.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1a.xhtml
new file mode 100644
index 000000000..6146e5052
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1a.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test has static inline content intermixed with flex items,
+ inside a flex container.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <style>
+ div { height: 100px; }
+ div.flexbox {
+ font: 10px Ahem;
+ width: 200px;
+ display: flex;
+ }
+ div.a {
+ flex: 1 0 20px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 30px;
+ background: yellow;
+ }
+ div.inflex {
+ flex: 0 0 20px;
+ background: gray;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox"
+ ><div class="a"/>text<div class="b"/><i>italic</i
+ ><div class="inflex"/></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1b.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1b.xhtml
new file mode 100644
index 000000000..933b77070
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1b.xhtml
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test inserts a new div into some inline content in a flex container.
+ That should split the inline content into two flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <script>
+ function tweak() {
+ var flexbox = document.getElementsByClassName("flexbox")[0];
+ var insertionPoint = flexbox.firstChild.nextSibling.nextSibling;
+
+ var newDiv = document.createElement("div");
+ newDiv.setAttribute("class", "b");
+
+ flexbox.insertBefore(newDiv, insertionPoint);
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ <style>
+ div { height: 100px; }
+ div.flexbox {
+ font: 10px Ahem;
+ width: 200px;
+ display: flex;
+ }
+ div.a {
+ flex: 1 0 20px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 30px;
+ background: yellow;
+ }
+ div.inflex {
+ flex: 0 0 20px;
+ background: gray;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox"
+ ><div class="a"/>text<i>italic</i
+ ><div class="inflex"/></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2-ref.xhtml
new file mode 100644
index 000000000..d1469e79c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2-ref.xhtml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Reference case with a stretch of inline content in a flex container.
+ (The corresponding testcase has a div interrupting the run, which gets
+ removed, hopefully making it look like this reference case.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div { height: 100px; }
+ div.flexbox {
+ width: 200px;
+ display: flex;
+ }
+ div.a {
+ flex: 1 0 20px;
+ background: lightgreen;
+ }
+ div.inflex {
+ flex: 0 0 20px;
+ background: gray;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox"
+ ><div class="a"/>text<i>italic</i
+ ><div class="inflex"/></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.xhtml
new file mode 100644
index 000000000..bc0b34152
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.xhtml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test removes a div from the middle of some inline content in a flex
+ container. That should merge the inline content into a single flex item.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <script>
+ function tweak() {
+ var removeMe = document.getElementById("removeMe");
+ removeMe.parentNode.removeChild(removeMe);
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ <style>
+ div { height: 100px; }
+ div.flexbox {
+ width: 200px;
+ display: flex;
+ }
+ div.a {
+ flex: 1 0 20px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 30px;
+ background: yellow;
+ }
+ div.inflex {
+ flex: 0 0 20px;
+ background: gray;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox"
+ ><div class="a"/>text<div class="b" id="removeMe"/><i>italic</i
+ ><div class="inflex"/></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3-ref.xhtml
new file mode 100644
index 000000000..4c28d8d20
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3-ref.xhtml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Reference case, using a block instead of a flexbox.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <style>
+ div#block {
+ width: 100px;
+ font: 10px Ahem;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="block">abc def ghi jkl mno pqr stu</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3a.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3a.xhtml
new file mode 100644
index 000000000..2b88ce2ae
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3a.xhtml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test has a run of text in a flex container, for comparison
+ against the "b" & "c" variants of this test (which use dynamic tweaks).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <style>
+ div#flexbox {
+ width: 100px;
+ display: flex;
+ font: 10px Ahem;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="flexbox">abc def ghi jkl mno pqr stu</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.xhtml
new file mode 100644
index 000000000..b5d509f18
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.xhtml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test inserts a some inline content in a flex container, just before a
+ stretch of existing inline content. The new content should be incorporated
+ into the same anonymous flex item as the existing content.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <script>
+ function tweak() {
+ var newInlineContent = document.createTextNode("abc def ghi");
+
+ var flexbox = document.getElementById("flexbox");
+ flexbox.insertBefore(newInlineContent, flexbox.firstChild);
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ <style>
+ div#flexbox {
+ width: 100px;
+ display: flex;
+ font: 10px Ahem;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="flexbox"> jkl mno pqr stu</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.xhtml
new file mode 100644
index 000000000..d532372a4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.xhtml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test inserts a some inline content in a flex container, just after a
+ stretch of existing inline content. The new content should be incorporated
+ into the same anonymous flex item as the existing content.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <script>
+ function tweak() {
+ var newInlineContent = document.createTextNode("mno pqr stu");
+
+ var flexbox = document.getElementById("flexbox");
+ flexbox.insertBefore(newInlineContent, null);
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ <style>
+ div#flexbox {
+ width: 100px;
+ display: flex;
+ font: 10px Ahem;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="flexbox">abc def ghi jkl </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4-ref.xhtml
new file mode 100644
index 000000000..cbb99ba9f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4-ref.xhtml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This reference case simply has text centered within a div. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div {
+ width: 200px;
+ height: 100px;
+ background: lightgreen;
+ text-align: center;
+ }
+ </style>
+ </head>
+ <body>
+ <div>text</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4.xhtml
new file mode 100644
index 000000000..c7a068d57
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4.xhtml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that a flex container which only contains text
+ will render correctly. We use justify-content to position the text
+ in the center of the flex container, as a sanity-check to be sure we
+ are in fact getting a flex container.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ background: lightgreen;
+ justify-content: center;
+ display: flex;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">text</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5-ref.xhtml
new file mode 100644
index 000000000..9e51122ca
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5-ref.xhtml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case is the same as the corresponding testcase,
+ but with the dynamic removal already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ background: lightgreen;
+ justify-content: space-around;
+ display: flex;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">text<div>div</div></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5.xhtml
new file mode 100644
index 000000000..8338d1871
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5.xhtml
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test removes a run of inline content from a flexbox, which
+ should trigger the removal of its now-empty anonymous flex item.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <script>
+ function tweak() {
+ var removeMe = document.getElementsByClassName("flexbox")[0].lastChild;
+ removeMe.parentNode.removeChild(removeMe);
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ <style>
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ background: lightgreen;
+ justify-content: space-around;
+ display: flex;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">text<div>div</div>
+ REMOVE ME
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1-ref.xhtml
new file mode 100644
index 000000000..f11668e59
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1-ref.xhtml
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Reference case - see documentation in corresponding testcase.
+ This reference uses blocks where the testcase uses flexboxes.
+ They should be sized the same, since they're basically just text
+ with no special flex sizing properties in play.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <style>
+ table {
+ width: 300px;
+ font: 10px Ahem;
+ margin-bottom: 2px;
+ border: 1px dashed black;
+ }
+
+ div.a { background: lightgreen; }
+ div.b { background: lightblue; }
+
+ <!-- helper-classes for assigning pref / min / auto-width to our divs -->
+ div.prefWidth {
+ width: -moz-max-content;
+ }
+ div.minWidth {
+ width: -moz-min-content;
+ }
+ div.autoWidth {
+ width: auto;
+ }
+ </style>
+</head>
+<body>
+ <!-- both auto width -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+
+ <!-- MIXING MIN WIDTH & AUTO -->
+ <!-- both min width -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- min,auto -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- auto,min -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+
+ <!-- MIXING PREF WIDTH & AUTO -->
+ <!-- both prefWidth (NOTE: makes the table larger than it wants to be -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- pref,auto -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- auto,pref -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+
+ <!-- MIXING PREF WIDTH & MIN WIDTH -->
+ <!-- min,pref -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- pref,min -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.xhtml
new file mode 100644
index 000000000..f7e99f68a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.xhtml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test has a number of tables, each with 2 flexboxes side-by-side,
+ whose "width" values depend on the flexbox's min and/or pref widths.
+
+ There's not enough space for both flexboxes to fit side-by-side, so their
+ width preferences must be balanced This exercises
+ nsFlexContainerFrame::GetPrefWidth() & ::GetMinWidth().
+
+ IN EACH CASE, div.a has these intrinsic widths:
+ Pref width: 2*40 + 1*50 + 2*10 = 150px (2*aaaa + 1*aaaaa + 2*space)
+ Min width: 50px (width of "aaaaa")
+ and div.b has these intrinsic widths:
+ Pref width: 5*20 + 3*10 + 7*10 = 200px (5*bb + 3*b + 7*space)
+ Min width: 20px (width "bb")
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <style>
+ table {
+ width: 300px;
+ font: 10px Ahem;
+ margin-bottom: 2px;
+ border: 1px dashed black;
+ }
+
+ div.a, div.b { display: flex; }
+
+ div.a { background: lightgreen; }
+ div.b { background: lightblue; }
+
+ <!-- helper-classes for assigning pref / min / auto-width to our divs -->
+ div.prefWidth {
+ width: -moz-max-content;
+ }
+ div.minWidth {
+ width: -moz-min-content;
+ }
+ div.autoWidth {
+ width: auto;
+ }
+ </style>
+</head>
+<body>
+ <!-- both auto width -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+
+ <!-- MIXING MIN WIDTH & AUTO -->
+ <!-- both min width -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- min,auto -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- auto,min -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+
+ <!-- MIXING PREF WIDTH & AUTO -->
+ <!-- both prefWidth (NOTE: makes the table larger than it wants to be -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- pref,auto -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- auto,pref -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+
+ <!-- MIXING PREF WIDTH & MIN WIDTH -->
+ <!-- min,pref -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- pref,min -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1b.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1b.xhtml
new file mode 100644
index 000000000..c2b0074ba
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1b.xhtml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test has a number of tables, each with 2 flexboxes side-by-side,
+ whose "width" values depend on the flexbox's min and/or pref widths.
+
+ There's not enough space for both flexboxes to fit side-by-side, so their
+ width preferences must be balanced. This exercises
+ nsFlexContainerFrame::GetPrefWidth() & ::GetMinWidth().
+
+ IN EACH CASE, div.a has these intrinsic widths:
+ Pref width: 2*40 + 1*50 + 2*10 = 150px (2*aaaa + 1*aaaaa + 2*space)
+ Min width: 50px (width of "aaaaa")
+ and div.b has these intrinsic widths:
+ Pref width: 5*20 + 3*10 + 7*10 = 200px (5*bb + 3*b + 7*space)
+ Min width: 20px (width "bb")
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <style>
+ table {
+ width: 300px;
+ font: 10px Ahem;
+ margin-bottom: 2px;
+ border: 1px dashed black;
+ }
+
+ div.a, div.b { display: flex; }
+
+ div.a { background: lightgreen; }
+ div.b { background: lightblue; }
+
+ <!-- helper-classes for assigning pref / min / auto-width to our divs -->
+ div.prefWidth {
+ width: -moz-max-content;
+ }
+ div.minWidth {
+ width: -moz-min-content;
+ }
+ div.autoWidth {
+ width: auto;
+ }
+ </style>
+</head>
+<body>
+ <!-- both auto width -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a autoWidth"><div>aaaa aaaa aaaaa</div></div></td>
+ <td><div class="b autoWidth"><div>bb bb b bb bb b bb b</div></div></td>
+ </tr></table>
+
+ <!-- MIXING MIN WIDTH & AUTO -->
+ <!-- both min width -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a minWidth"><div>aaaa aaaa aaaaa</div></div></td>
+ <td><div class="b minWidth"><div>bb bb b bb bb b bb b</div></div></td>
+ </tr></table>
+ <!-- min,auto -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a minWidth"><div>aaaa aaaa aaaaa</div></div></td>
+ <td><div class="b autoWidth"><div>bb bb b bb bb b bb b</div></div></td>
+ </tr></table>
+ <!-- auto,min -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a autoWidth"><div>aaaa aaaa aaaaa</div></div></td>
+ <td><div class="b minWidth"><div>bb bb b bb bb b bb b</div></div></td>
+ </tr></table>
+
+ <!-- MIXING PREF WIDTH & AUTO -->
+ <!-- both prefWidth (NOTE: makes the table larger than it wants to be -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a prefWidth"><div>aaaa aaaa aaaaa</div></div></td>
+ <td><div class="b prefWidth"><div>bb bb b bb bb b bb b</div></div></td>
+ </tr></table>
+ <!-- pref,auto -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a prefWidth"><div>aaaa aaaa aaaaa</div></div></td>
+ <td><div class="b autoWidth"><div>bb bb b bb bb b bb b</div></div></td>
+ </tr></table>
+ <!-- auto,pref -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a autoWidth"><div>aaaa aaaa aaaaa</div></div></td>
+ <td><div class="b prefWidth"><div>bb bb b bb bb b bb b</div></div></td>
+ </tr></table>
+
+ <!-- MIXING PREF WIDTH & MIN WIDTH -->
+ <!-- min,pref -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a minWidth"><div>aaaa aaaa aaaaa</div></div></td>
+ <td><div class="b prefWidth"><div>bb bb b bb bb b bb b</div></div></td>
+ </tr></table>
+ <!-- pref,min -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a prefWidth"><div>aaaa aaaa aaaaa</div></div></td>
+ <td><div class="b minWidth"><div>bb bb b bb bb b bb b</div></div></td>
+ </tr></table>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2-ref.xhtml
new file mode 100644
index 000000000..fe839bdd0
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2-ref.xhtml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case has inline blocks in a div, in place of
+ flex items in a flex container.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body { margin: 0; }
+
+ div.flexbox {
+ width: -moz-max-content;
+ /* We give the flex container a border and background so we can easily
+ * see how large it is. */
+ border: 2px dotted black;
+ background: lime;
+
+ font-size: 0; /* to prevent whitespace from having an effect */
+ }
+
+ div.wrapper {
+ display: inline-block;
+ border: 5px solid teal;
+ width: 40px;
+ height: 16px;
+ }
+ div.blueBlock {
+ width: 16px;
+ height: 16px;
+ background: rgb(0, 19, 127); /* matches solidblue.png */
+ }
+ </style>
+</head>
+<body>
+ <div class="flexbox">
+ <div class="wrapper"><div class="blueBlock"/></div>
+ <div class="wrapper"><div class="blueBlock"/></div>
+ <div class="wrapper"><div class="blueBlock"/></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2a.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2a.xhtml
new file mode 100644
index 000000000..bdd41847d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2a.xhtml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks how a flexbox sizes itself to shrinkwrap its contents'
+ preferred sizes.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body { margin: 0; }
+ div.flexbox {
+ display: flex;
+ width: -moz-max-content;
+
+ /* We give the flexbox a border and background so we can easily see how
+ * large it is. */
+ border: 2px dotted black;
+ background: lime;
+ }
+
+ div.imgWrapper {
+ border: 5px solid teal;
+ width: 40px;
+ height: 16px;
+ }
+ img {
+ vertical-align: top;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexbox">
+ <div class="imgWrapper"><img src="solidblue.png"/></div>
+ <div class="imgWrapper"><img src="solidblue.png"/></div>
+ <div class="imgWrapper"><img src="solidblue.png"/></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2b.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2b.xhtml
new file mode 100644
index 000000000..07ba6faf3
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2b.xhtml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test is like the -2a variant, but with a <div> instead of an <img>
+ at the deepest level of nesting.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body { margin: 0; }
+
+ div.flexbox {
+ display: flex;
+ width: -moz-max-content;
+
+ /* We give the flex container a border and background so we can easily
+ * see how large it is. */
+ border: 2px dotted black;
+ background: lime;
+ }
+
+ div.wrapper {
+ border: 5px solid teal;
+ width: 40px;
+ height: 16px;
+ }
+ div.blueBlock {
+ width: 16px;
+ height: 16px;
+ background: rgb(0, 19, 127); /* matches solidblue.png */
+ }
+ </style>
+</head>
+<body>
+ <div class="flexbox">
+ <div class="wrapper"><div class="blueBlock"/></div>
+ <div class="wrapper"><div class="blueBlock"/></div>
+ <div class="wrapper"><div class="blueBlock"/></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-invalidation-1-ref.html b/layout/reftests/flexbox/flexbox-invalidation-1-ref.html
new file mode 100644
index 000000000..a9481b0a7
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-invalidation-1-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Reference case, with testcase's dynamic tweak already performed.
+-->
+<html>
+ <head>
+ <style>
+ div#outer { margin-left: 40px }
+
+ div#flexContainer {
+ width: 100px;
+ height: 50px;
+ background: lightgray;
+ display: flex;
+ justify-content: center;
+ }
+
+ div#flexItem {
+ border: 1px solid black;
+ height: 200%;
+ background: purple;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="flexContainer">
+ <div id="flexItem">item</div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-invalidation-1.html b/layout/reftests/flexbox/flexbox-invalidation-1.html
new file mode 100644
index 000000000..5520c295e
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-invalidation-1.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we include our children's overflow areas in the
+ flex container's overflow area -- invalidating their old location and new
+ location when the flex container is moved, even if they stick outside the
+ flex container.
+-->
+<html class="reftest-wait">
+ <head>
+ <script>
+ function tweak() {
+ var outer = document.getElementById("outer");
+ outer.style.marginLeft = "40px";
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ <style>
+ div#flexContainer {
+ width: 100px;
+ height: 50px;
+ background: lightgray;
+ display: flex;
+ justify-content: center;
+ }
+
+ div#flexItem {
+ border: 1px solid black;
+ height: 200%;
+ background: purple;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="flexContainer">
+ <div id="flexItem">item</div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-paint-ordering-3-ref.html b/layout/reftests/flexbox/flexbox-paint-ordering-3-ref.html
new file mode 100644
index 000000000..dd17f1671
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-paint-ordering-3-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <style>
+ #container { display: flex; }
+ #highOrdinal {
+ background: lime;
+ height: 100px; width: 100px;
+ }
+ </style>
+</head>
+<body>
+ <div id="container">
+ <div id="highOrdinal"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-paint-ordering-3.html b/layout/reftests/flexbox/flexbox-paint-ordering-3.html
new file mode 100644
index 000000000..a0052ff9f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-paint-ordering-3.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for whether we honor "order" on absolutely-positioned elements
+ within a flex container. Specifically, we test whether it affects their
+ paint-order (as it should, since it reorders the frame tree). -->
+<html>
+<head>
+ <style>
+ #container { display: flex; }
+ #lowOrdinal {
+ position: absolute;
+ order: 5;
+ background: red;
+ height: 100px; width: 100px;
+ }
+ #highOrdinal {
+ position: absolute;
+ order: 10;
+ background: lime;
+ height: 100px; width: 100px;
+ }
+ #noOrdinal {
+ position: absolute;
+ background: orange;
+ height: 100px; width: 100px;
+ }
+ </style>
+</head>
+<body>
+ <div id="container">
+ <div id="highOrdinal"></div>
+ <div id="lowOrdinal"></div>
+ <div id="noOrdinal"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-1-ref.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-1-ref.xhtml
new file mode 100644
index 000000000..02a2a90cd
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-1-ref.xhtml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for absolutely positioned children of a flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .abspos {
+ position: absolute;
+ left: 5px;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ }
+ div.a {
+ width: 100%;
+ height: 100px;
+ background: lightgreen;
+ display: inline-block;
+ }
+ div.b {
+ width: 100%;
+ height: 100px;
+ background: yellow;
+ display: inline-block;
+ }
+ div.inflex {
+ width: 20px;
+ height: 100px;
+ background: gray;
+ display: inline-block;
+ }
+ div.noFlexFn {
+ width: 15px;
+ height: 15px;
+ background: teal;
+ display: inline-block;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <!-- First child abspos: -->
+ <div class="flexbox"
+ ><div class="a abspos" style="width: 30px"/><div class="b"/></div>
+ <!-- Second child abspos: -->
+ <div class="flexbox"
+ ><div class="a"/><div class="b abspos" style="width: 20px"/></div>
+ <!-- Middle child abspos: -->
+ <div class="flexbox"
+ ><div class="a" style="width: 80px"
+ /><div class="inflex abspos"
+ /><div class="b" style="width: 120px"/></div>
+ <!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
+ <div class="flexbox"
+ ><div class="inflex" style="margin-left: 15px"
+ /><div class="inflex" style="margin-left: 30px"
+ /><div class="inflex" style="margin-left: 30px"
+ /><div class="noFlexFn abspos"
+ /><div class="inflex" style="margin-left: 30px"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-1.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-1.xhtml
new file mode 100644
index 000000000..aa89dd714
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-1.xhtml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Testcase with absolutely positioned children of a flex container.
+ This positioning is with respect to the containing block's left edge.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .abspos {
+ position: absolute;
+ left: 5px;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ display: flex;
+ }
+ div.a {
+ flex: 1 0 auto;
+ width: 30px;
+ height: 100px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 auto;
+ width: 20px;
+ height: 100px;
+ background: yellow;
+ }
+ div.inflex {
+ flex: none;
+ width: 20px;
+ height: 100px;
+ background: gray;
+ }
+ div.noFlexFn {
+ width: 15px;
+ height: 15px;
+ background: teal;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <!-- First child abspos: -->
+ <div class="flexbox"><div class="a abspos"/><div class="b"/></div>
+ <!-- Second child abspos: -->
+ <div class="flexbox"><div class="a"/><div class="b abspos"/></div>
+ <!-- Middle child abspos: -->
+ <div class="flexbox"
+ ><div class="a"/><div class="inflex abspos"/><div class="b"/></div>
+ <!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
+ <div class="flexbox" style="justify-content: space-around"
+ ><div class="inflex"/><div class="inflex"/><div class="inflex"
+ /><div class="noFlexFn abspos"/><div class="inflex"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-2-ref.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-2-ref.xhtml
new file mode 100644
index 000000000..00ebecc30
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-2-ref.xhtml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for absolutely positioned children of a flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .abspos {
+ position: absolute;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ }
+ div.a {
+ width: 100%;
+ height: 100px;
+ background: lightgreen;
+ display: inline-block;
+ }
+ div.b {
+ width: 100%;
+ height: 100px;
+ background: yellow;
+ display: inline-block;
+ }
+ div.inflex {
+ width: 20px;
+ height: 100px;
+ background: gray;
+ display: inline-block;
+ }
+ div.noFlexFn {
+ width: 16px;
+ height: 16px;
+ background: teal;
+ display: inline-block;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <!-- First child abspos: -->
+ <div class="flexbox"
+ ><div class="a abspos" style="width: 30px"/><div class="b"/></div>
+ <!-- Second child abspos: -->
+ <div class="flexbox"
+ ><div class="a"/><div class="b abspos"
+ style="width: 20px; left: 0"/></div>
+ <!-- Middle child abspos: -->
+ <div class="flexbox"
+ ><div class="a" style="width: 80px"
+ /><div class="inflex abspos" style="left: 0"
+ /><div class="b" style="width: 120px"/></div>
+ <!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
+ <div class="flexbox"
+ ><div class="inflex" style="margin-left: 15px"
+ /><div class="inflex" style="margin-left: 30px"
+ /><div class="inflex" style="margin-left: 30px"
+ /><div class="noFlexFn abspos" style="left: 90px"
+ /><div class="inflex" style="margin-left: 30px"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-2.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-2.xhtml
new file mode 100644
index 000000000..613c57cde
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-2.xhtml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Testcase with absolutely positioned children of a flex container.
+ In this testcase, we simply specify "position: absolute" without
+ actually doing any positioning, to test the "static position" of these
+ children.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .abspos {
+ position: absolute;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ display: flex;
+ }
+ div.a {
+ flex: 1 0 auto;
+ width: 30px;
+ height: 100px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 auto;
+ width: 20px;
+ height: 100px;
+ background: yellow;
+ }
+ div.inflex {
+ flex: none;
+ width: 20px;
+ height: 100px;
+ background: gray;
+ }
+ div.noFlexFn {
+ width: 16px;
+ height: 16px;
+ background: teal;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <!-- First child abspos: -->
+ <div class="flexbox"><div class="a abspos"/><div class="b"/></div>
+ <!-- Second child abspos: -->
+ <div class="flexbox"><div class="a"/><div class="b abspos"/></div>
+ <!-- Middle child abspos: -->
+ <div class="flexbox"
+ ><div class="a"/><div class="inflex abspos"/><div class="b"/></div>
+ <!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
+ <div class="flexbox" style="justify-content: space-around"
+ ><div class="inflex"/><div class="inflex"/><div class="inflex"
+ /><div class="noFlexFn abspos"/><div class="inflex"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-3-ref.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-3-ref.xhtml
new file mode 100644
index 000000000..9bafa1506
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-3-ref.xhtml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for absolutely positioned flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ div.flexbox {
+ top: 30px;
+ left: 40px;
+ width: 200px;
+ height: 100px;
+ position: absolute;
+ border: 1px solid black;
+ }
+ div.a {
+ width: 80px;
+ height: 100px;
+ background: lightgreen;
+ display: inline-block;
+ }
+ div.b {
+ width: 120px;
+ height: 100px;
+ background: yellow;
+ display: inline-block;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <div class="flexbox"><div class="a"/><div class="b"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-3.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-3.xhtml
new file mode 100644
index 000000000..21b8730c4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-3.xhtml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Testcase with absolutely positioned flex container.
+ This positioning is with respect to the containing block's left edge.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ div.flexbox {
+ top: 30px;
+ left: 40px;
+ width: 200px;
+ height: 100px;
+ display: flex;
+ position: absolute;
+ border: 1px solid black;
+ }
+ div.a {
+ flex: 1 0 30px;
+ height: 100px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 20px;
+ height: 100px;
+ background: yellow;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <div class="flexbox"><div class="a"/><div class="b"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-4-ref.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-4-ref.xhtml
new file mode 100644
index 000000000..4c675fa8e
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-4-ref.xhtml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for absolutely positioned flex container & children. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .abspos {
+ position: absolute;
+ left: 5px;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ top: 30px;
+ left: 40px;
+ width: 200px;
+ height: 100px;
+ position: absolute;
+ border: 1px solid black;
+ }
+ div.a {
+ width: 30px;
+ height: 100px;
+ background: lightgreen;
+ display: inline-block;
+ }
+ div.b {
+ width: 100%;
+ height: 100px;
+ background: yellow;
+ display: inline-block;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <div class="flexbox"
+ ><div class="a abspos"/><div class="b"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-4.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-4.xhtml
new file mode 100644
index 000000000..67974fcf6
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-4.xhtml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Testcase with absolutely positioned flex container & children.
+ The children's positioning is with respect to the flex container.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .abspos {
+ position: absolute;
+ left: 5px;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ top: 30px;
+ left: 40px;
+ width: 200px;
+ height: 100px;
+ display: flex;
+ position: absolute;
+ border: 1px solid black;
+ }
+ div.a {
+ flex: 1 0 auto;
+ width: 30px;
+ height: 100px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 20px;
+ height: 100px;
+ background: yellow;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <div class="flexbox"><div class="a abspos"/><div class="b"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-1-ref.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-1-ref.xhtml
new file mode 100644
index 000000000..bcd3982e4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-1-ref.xhtml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for fixed-position children of a flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .fixedpos {
+ position: fixed;
+ left: 5px;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ }
+ div.a {
+ width: 100%;
+ height: 100px;
+ background: lightgreen;
+ display: inline-block;
+ }
+ div.b {
+ width: 100%;
+ height: 100px;
+ background: yellow;
+ display: inline-block;
+ }
+ div.inflex {
+ width: 20px;
+ height: 100px;
+ background: gray;
+ display: inline-block;
+ }
+ div.noFlexFn {
+ width: 15px;
+ height: 15px;
+ background: teal;
+ display: inline-block;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <!-- First child fixedpos: -->
+ <div class="flexbox"
+ ><div class="a fixedpos" style="width: 30px"/><div class="b"/></div>
+ <!-- Second child fixedpos: -->
+ <div class="flexbox"
+ ><div class="a"/><div class="b fixedpos" style="width: 20px"/></div>
+ <!-- Middle child fixedpos: -->
+ <div class="flexbox"
+ ><div class="a" style="width: 80px"
+ /><div class="inflex fixedpos"
+ /><div class="b" style="width: 120px"/></div>
+ <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: -->
+ <div class="flexbox"
+ ><div class="inflex" style="margin-left: 15px"
+ /><div class="inflex" style="margin-left: 30px"
+ /><div class="inflex" style="margin-left: 30px"
+ /><div class="noFlexFn fixedpos"
+ /><div class="inflex" style="margin-left: 30px"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-1.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-1.xhtml
new file mode 100644
index 000000000..6401fb2cb
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-1.xhtml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Testcase with fixed-position children of a flex container.
+ The positioning is with respect to the containing block's left edge.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .fixedpos {
+ position: fixed;
+ left: 5px;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ display: flex;
+ }
+ div.a {
+ flex: 1 0 auto;
+ width: 30px;
+ height: 100px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 auto;
+ width: 20px;
+ height: 100px;
+ background: yellow;
+ }
+ div.inflex {
+ flex: none;
+ width: 20px;
+ height: 100px;
+ background: gray;
+ }
+ div.noFlexFn {
+ width: 15px;
+ height: 15px;
+ background: teal;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <!-- First child fixedpos: -->
+ <div class="flexbox"><div class="a fixedpos"/><div class="b"/></div>
+ <!-- Second child fixedpos: -->
+ <div class="flexbox"><div class="a"/><div class="b fixedpos"/></div>
+ <!-- Middle child fixedpos: -->
+ <div class="flexbox"
+ ><div class="a"/><div class="inflex fixedpos"/><div class="b"/></div>
+ <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: -->
+ <div class="flexbox" style="justify-content: space-around"
+ ><div class="inflex"/><div class="inflex"/><div class="inflex"
+ /><div class="noFlexFn fixedpos"/><div class="inflex"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-2-ref.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-2-ref.xhtml
new file mode 100644
index 000000000..9476c8086
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-2-ref.xhtml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for fixed-position children of a flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .fixedpos {
+ position: absolute;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ }
+ div.a {
+ width: 100%;
+ height: 100px;
+ background: lightgreen;
+ display: inline-block;
+ }
+ div.b {
+ width: 100%;
+ height: 100px;
+ background: yellow;
+ display: inline-block;
+ }
+ div.inflex {
+ width: 20px;
+ height: 100px;
+ background: gray;
+ display: inline-block;
+ }
+ div.noFlexFn {
+ width: 16px;
+ height: 16px;
+ background: teal;
+ display: inline-block;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <!-- First child fixedpos: -->
+ <div class="flexbox"
+ ><div class="a fixedpos" style="width: 30px"/><div class="b"/></div>
+ <!-- Second child fixedpos: -->
+ <div class="flexbox"
+ ><div class="a"/><div class="b fixedpos"
+ style="width: 20px; left: 0"/></div>
+ <!-- Middle child fixedpos: -->
+ <div class="flexbox"
+ ><div class="a" style="width: 80px"
+ /><div class="inflex fixedpos" style="left: 0"
+ /><div class="b" style="width: 120px"/></div>
+ <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: -->
+ <div class="flexbox"
+ ><div class="inflex" style="margin-left: 15px"
+ /><div class="inflex" style="margin-left: 30px"
+ /><div class="inflex" style="margin-left: 30px"
+ /><div class="noFlexFn fixedpos" style="left: 90px"
+ /><div class="inflex" style="margin-left: 30px"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-2.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-2.xhtml
new file mode 100644
index 000000000..00a3c18a4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-2.xhtml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Testcase with fixed-position children of a flex container.
+ In this testcase, we simply specify "position: fixed" without
+ actually doing any positioning, to test the "static position" of these
+ children.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .fixedpos {
+ position: fixed;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ display: flex;
+ }
+ div.a {
+ flex: 1 0 auto;
+ width: 30px;
+ height: 100px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 auto;
+ width: 20px;
+ height: 100px;
+ background: yellow;
+ }
+ div.inflex {
+ flex: none;
+ width: 20px;
+ height: 100px;
+ background: gray;
+ }
+ div.noFlexFn {
+ width: 16px;
+ height: 16px;
+ background: teal;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <!-- First child fixedpos: -->
+ <div class="flexbox"><div class="a fixedpos"/><div class="b"/></div>
+ <!-- Second child fixedpos: -->
+ <div class="flexbox"><div class="a"/><div class="b fixedpos"/></div>
+ <!-- Middle child fixedpos: -->
+ <div class="flexbox"
+ ><div class="a"/><div class="inflex fixedpos"/><div class="b"/></div>
+ <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: -->
+ <div class="flexbox" style="justify-content: space-around"
+ ><div class="inflex"/><div class="inflex"/><div class="inflex"
+ /><div class="noFlexFn fixedpos"/><div class="inflex"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-3-ref.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-3-ref.xhtml
new file mode 100644
index 000000000..d0a086d60
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-3-ref.xhtml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for fixed-position flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ div.flexbox {
+ top: 30px;
+ left: 40px;
+ width: 200px;
+ height: 100px;
+ position: fixed;
+ border: 1px solid black;
+ }
+ div.a {
+ width: 80px;
+ height: 100px;
+ background: lightgreen;
+ display: inline-block;
+ }
+ div.b {
+ width: 120px;
+ height: 100px;
+ background: yellow;
+ display: inline-block;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <div class="flexbox"><div class="a"/><div class="b"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-3.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-3.xhtml
new file mode 100644
index 000000000..a67481879
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-3.xhtml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Testcase with fixed-position flex container.
+ This positioning is with respect to the viewport.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ div.flexbox {
+ top: 30px;
+ left: 40px;
+ width: 200px;
+ height: 100px;
+ display: flex;
+ position: fixed;
+ border: 1px solid black;
+ }
+ div.a {
+ flex: 1 0 30px;
+ height: 100px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 20px;
+ height: 100px;
+ background: yellow;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <div class="flexbox"><div class="a"/><div class="b"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-4-ref.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-4-ref.xhtml
new file mode 100644
index 000000000..877832665
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-4-ref.xhtml
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for fixed-position flex container & children. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .fixedpos {
+ position: fixed;
+ left: 5px;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ top: 30px;
+ left: 40px;
+ width: 200px;
+ height: 100px;
+ position: fixed;
+ border: 2px dashed teal;
+ }
+ div.a {
+ width: 30px;
+ height: 100px;
+ background: lightgreen;
+ display: inline-block;
+ }
+ div.b {
+ width: 100%;
+ height: 100px;
+ background: yellow;
+ display: inline-block;
+ vertical-align: top;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <div class="flexbox"
+ ><div class="a fixedpos"/><div class="b"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-4.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-4.xhtml
new file mode 100644
index 000000000..05c75baee
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-4.xhtml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Testcase with fixed-position flex container & children.
+ All positioning is with respect to the viewport.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .fixedpos {
+ position: fixed;
+ left: 5px;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ top: 30px;
+ left: 40px;
+ width: 200px;
+ height: 100px;
+ display: flex;
+ position: fixed;
+ border: 2px dashed teal;
+ }
+ div.a {
+ flex: 1 0 auto;
+ width: 30px;
+ height: 100px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 20px;
+ height: 100px;
+ background: yellow;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <div class="flexbox"><div class="a fixedpos"/><div class="b"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-resizeviewport-1-helper.html b/layout/reftests/flexbox/flexbox-resizeviewport-1-helper.html
new file mode 100644
index 000000000..66df03b9d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-resizeviewport-1-helper.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Helper-file for reftest flexbox-resizeviewport-1.xhtml
+ I'm intentionally using quirks-mode (no doctype), so that
+ a 100% height will work. -->
+<html>
+ <head>
+ <style>
+ div.flexbox {
+ display: flex;
+ height: 100%;
+ border: 2px dashed black;
+ }
+ div.a {
+ flex: 1;
+ background: pink;
+ }
+ div.b {
+ flex: 1;
+ background: teal;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ <div class="a"></div><div class="b"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-resizeviewport-1-ref.xhtml b/layout/reftests/flexbox/flexbox-resizeviewport-1-ref.xhtml
new file mode 100644
index 000000000..59ba62e64
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-resizeviewport-1-ref.xhtml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ iframe {
+ width: 75px;
+ height: 75px;
+ }
+ </style>
+ </head>
+ <body>
+ <iframe src="flexbox-resizeviewport-1-helper.html" style="width: 50px"/>
+ <iframe src="flexbox-resizeviewport-1-helper.html" style="width: 125px"/>
+ <br/>
+ <iframe src="flexbox-resizeviewport-1-helper.html" style="height: 50px"/>
+ <iframe src="flexbox-resizeviewport-1-helper.html" style="height: 125px"/>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-resizeviewport-1.xhtml b/layout/reftests/flexbox/flexbox-resizeviewport-1.xhtml
new file mode 100644
index 000000000..2875e8ee3
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-resizeviewport-1.xhtml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase to be sure a flex container gets reflowed properly when its
+ iframe changes size. -->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ iframe {
+ width: 75px;
+ height: 75px;
+ }
+ </style>
+ <script>
+ function setElementPropertyTo(id, propertyName, propertyValue) {
+ var elem = document.getElementById(id);
+ elem.style[propertyName] = propertyValue;
+ }
+
+ function tweak() {
+ setElementPropertyTo("a", "width", "50px");
+ setElementPropertyTo("b", "width", "125px");
+ setElementPropertyTo("c", "height", "50px");
+ setElementPropertyTo("d", "height", "125px");
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <iframe id="a" src="flexbox-resizeviewport-1-helper.html"/>
+ <iframe id="b" src="flexbox-resizeviewport-1-helper.html"/>
+ <br/>
+ <iframe id="c" src="flexbox-resizeviewport-1-helper.html"/>
+ <iframe id="d" src="flexbox-resizeviewport-1-helper.html"/>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-styling-on-svg-1-ref.svg b/layout/reftests/flexbox/flexbox-styling-on-svg-1-ref.svg
new file mode 100644
index 000000000..f2eef91e4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-styling-on-svg-1-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="100%" height="100%">
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+</svg>
diff --git a/layout/reftests/flexbox/flexbox-styling-on-svg-1.svg b/layout/reftests/flexbox/flexbox-styling-on-svg-1.svg
new file mode 100644
index 000000000..c12e9dde5
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-styling-on-svg-1.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ style="display:flex"
+ width="100%" height="100%">
+
+ <title>Test that we ignore "display:flex" on a root SVG node</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=969460 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+</svg>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-1-ref.html b/layout/reftests/flexbox/flexbox-table-flex-items-1-ref.html
new file mode 100644
index 000000000..8e6f377c5
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-1-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Reference: caption size test for table flex items</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1334403">
+ <style type="text/css">
+* { vertical-align: top; }
+.flex {
+ display: inline-flex;
+ border: 3px solid grey;
+ height: 73px;
+ width: 110px;
+ align-items: start; /* no support for stretch yet: bug 799725 */
+}
+
+table {
+ border: 1px solid;
+ padding: 0;
+ margin: 0;
+ background: lightgrey;
+ flex: auto;
+ min-width: 0;
+ min-height: 0;
+ width: 32px;
+ height: 22px;
+}
+
+caption { border: 1px dashed blue; }
+t { display:block; width:30px; height:20px; }
+i:nth-of-type(1) { width:10px; height:20px; }
+i:nth-of-type(2) { width:20px; height:10px; }
+
+.hma10 { margin: 7px 3px 1px auto; }
+.hmaa { margin: 7px auto 1px auto; }
+.vma10 { margin: auto 7px 3px 1px; }
+.vmaa { margin: auto 7px auto 1px; }
+
+.vr { writing-mode: vertical-rl; }
+ </style>
+</head>
+<body>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hma10"><caption></caption><td><t></t></td></table></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hmaa"><caption></caption><td><t></t></td></table><i></i></div>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vma10"><caption></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vmaa"><caption></caption><td><t></t></td></table><i></i></div>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hma10"></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hmaa"></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vma10"></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vmaa"></caption><td><t></t></td></table><i></i></div>
+
+<script>
+let sizes = [
+ [ "30px", "16px" ],
+ [ "30px", "16px" ],
+ [ "30px", "16px" ],
+ [ "30px", "16px" ],
+ [ "27px", "16px" ],
+ [ "30px", "16px" ],
+ [ "22px", "16px" ],
+ [ "22px", "16px" ],
+];
+Array.prototype.slice.call(document.querySelectorAll('.flex > table > caption')).map((e) => {
+ let size = sizes[0];
+ e.style.width = size[0];
+ e.style.height = size[1];
+ sizes.shift();
+});
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-1.html b/layout/reftests/flexbox/flexbox-table-flex-items-1.html
new file mode 100644
index 000000000..09ab0886d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-1.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: caption size test for table flex items</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1334403">
+ <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
+ <link rel="match" href="flexbox-table-flex-items-1.html">
+ <style type="text/css">
+* { vertical-align: top; }
+.flex {
+ display: inline-flex;
+ border: 3px solid grey;
+ height: 73px;
+ width: 110px;
+ align-items: start; /* no support for stretch yet: bug 799725 */
+}
+
+table {
+ border: 1px solid;
+ padding: 0;
+ margin: 0;
+ background: lightgrey;
+ flex: auto;
+ min-width: 0;
+ min-height: 0;
+}
+
+caption { border: 1px dashed blue;}
+x { display:block; width:16px; height:16px; }
+t { display:block; width:30px; height:20px; }
+i:nth-of-type(1) { width:10px; height:20px; }
+i:nth-of-type(2) { width:20px; height:10px; }
+
+.hma10 { margin: 7px 3px 1px auto; }
+.hmaa { margin: 7px auto 1px auto; }
+.vma10 { margin: auto 7px 3px 1px; }
+.vmaa { margin: auto 7px auto 1px; }
+
+.vr { writing-mode: vertical-rl; }
+ </style>
+</head>
+<body>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hma10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hmaa"><caption><x></x></caption><td><t></t></td></table><i></i></div>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vma10"><caption><x></x></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vmaa"><caption><x></x></caption><td><t></t></td></table><i></i></div>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hma10"><x></x></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hmaa"><x></x></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vma10"><x></x></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vmaa"><x></x></caption><td><t></t></td></table><i></i></div>
+
+<!-- for generating the result for the -ref file
+<script>
+let sizes = "let sizes = [\n";
+Array.prototype.slice.call(document.querySelectorAll('.flex > table > caption')).map((e) => {
+ let cs = window.getComputedStyle(e);
+ sizes += ' [ "' + cs.width +'", "' + cs.height + '" ],\n';
+});
+sizes += "];\n";
+console.log(sizes);
+</script>
+-->
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-1-ref.html b/layout/reftests/flexbox/flexbox-widget-flex-items-1-ref.html
new file mode 100644
index 000000000..f08e16d26
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-1-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <style>
+ div.flexbox {
+ border: 2px dotted lightgray;
+ width: 400px;
+ height: 40px;
+ margin-bottom: 10px;
+ }
+ div.flexbox > * {
+ width: -moz-available;
+ outline: 1px dashed black;
+ margin: 0;
+ vertical-align: top;
+ display: block;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexbox"><input type="button"></div>
+ <div class="flexbox"><input type="checkbox"></div>
+ <div class="flexbox"><input type="file"></div>
+ <div class="flexbox"><input type="image"></div>
+ <div class="flexbox"><input type="password"></div>
+ <div class="flexbox"><input type="radio"></div>
+ <div class="flexbox"><input type="reset"></div>
+ <div class="flexbox"><input type="submit"></div>
+ <div class="flexbox"><input type="text"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-1.html b/layout/reftests/flexbox/flexbox-widget-flex-items-1.html
new file mode 100644
index 000000000..317112e9f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-1.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This testcase checks that flex containers honor those widgets (if any) in
+ our system theme that have only a single valid size (and hence should
+ refuse to flex).
+
+ e.g. in Gecko with a GTK theme, checkboxes and radio buttons have a single
+ valid size, and any specified widths (and min/max-widths) will have no
+ effect on their rendering (regardless of whether they're in a flex
+ container).
+-->
+<html>
+<head>
+ <style>
+ div.flexbox {
+ display: flex;
+ align-items: flex-start;
+ border: 2px dotted lightgray;
+ width: 400px;
+ height: 40px;
+ margin-bottom: 10px;
+ }
+ div.flexbox > * {
+ flex: 1;
+ outline: 1px dashed black;
+ margin: 0;
+ vertical-align: top;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexbox"><input type="button"></div>
+ <div class="flexbox"><input type="checkbox"></div>
+ <div class="flexbox"><input type="file"></div>
+ <div class="flexbox"><input type="image"></div>
+ <div class="flexbox"><input type="password"></div>
+ <div class="flexbox"><input type="radio"></div>
+ <div class="flexbox"><input type="reset"></div>
+ <div class="flexbox"><input type="submit"></div>
+ <div class="flexbox"><input type="text"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-2-ref.html b/layout/reftests/flexbox/flexbox-widget-flex-items-2-ref.html
new file mode 100644
index 000000000..49ef4ac2c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-2-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <style>
+ div.flexbox {
+ background: lightgray;
+ width: 400px;
+ height: 40px;
+ margin-bottom: 10px;
+ }
+ div.flexbox > * {
+ min-width: 350px;
+ outline: 1px dashed black;
+ margin: 0;
+ vertical-align: top;
+ display: block;
+ width: -moz-max-content;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexbox"><input type="button"></div>
+ <div class="flexbox"><input type="checkbox"></div>
+ <div class="flexbox"><input type="file"></div>
+ <div class="flexbox"><input type="image"></div>
+ <div class="flexbox"><input type="password"></div>
+ <div class="flexbox"><input type="radio"></div>
+ <div class="flexbox"><input type="reset"></div>
+ <div class="flexbox"><input type="submit"></div>
+ <div class="flexbox"><input type="text"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-2.html b/layout/reftests/flexbox/flexbox-widget-flex-items-2.html
new file mode 100644
index 000000000..7e2ec2908
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-2.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This testcase checks that, for any widgets that have a single valid size
+ (and hence refuse to flex), we don't honor the "min-width" property
+ when running the flex algorithm, just as we don't honor it outside
+ of flexbox contexts.
+-->
+<html>
+<head>
+ <style>
+ div.flexbox {
+ display: flex;
+ align-items: flex-start;
+ background: lightgray;
+ width: 400px;
+ height: 40px;
+ margin-bottom: 10px;
+ }
+ div.flexbox > * {
+ min-width: 350px;
+ outline: 1px dashed black;
+ margin: 0;
+ vertical-align: top;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexbox"><input type="button"></div>
+ <div class="flexbox"><input type="checkbox"></div>
+ <div class="flexbox"><input type="file"></div>
+ <div class="flexbox"><input type="image"></div>
+ <div class="flexbox"><input type="password"></div>
+ <div class="flexbox"><input type="radio"></div>
+ <div class="flexbox"><input type="reset"></div>
+ <div class="flexbox"><input type="submit"></div>
+ <div class="flexbox"><input type="text"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-3-ref.html b/layout/reftests/flexbox/flexbox-widget-flex-items-3-ref.html
new file mode 100644
index 000000000..61eb37638
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-3-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <style>
+ div.flexbox {
+ background: lightgray;
+ width: 400px;
+ height: 40px;
+ margin-bottom: 10px;
+ }
+ div.flexbox > * {
+ max-width: 3px;
+ outline: 1px dashed black;
+ margin: 0;
+ vertical-align: top;
+ display: block;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexbox"><input type="button"></div>
+ <div class="flexbox"><input type="checkbox"></div>
+ <div class="flexbox"><input type="file"></div>
+ <div class="flexbox"><input type="image"></div>
+ <div class="flexbox"><input type="password"></div>
+ <div class="flexbox"><input type="radio"></div>
+ <div class="flexbox"><input type="reset"></div>
+ <div class="flexbox"><input type="submit"></div>
+ <div class="flexbox"><input type="text"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-3.html b/layout/reftests/flexbox/flexbox-widget-flex-items-3.html
new file mode 100644
index 000000000..dee3b4ad0
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-3.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This testcase checks that, for any widgets that have a single valid size
+ (and hence refuse to flex), we don't honor the "max-width" property
+ when running the flex algorithm, just as we don't honor it outside
+ of flexbox contexts.
+-->
+<html>
+<head>
+ <style>
+ div.flexbox {
+ display: flex;
+ align-items: flex-start;
+ background: lightgray;
+ width: 400px;
+ height: 40px;
+ margin-bottom: 10px;
+ }
+ div.flexbox > * {
+ max-width: 3px;
+ min-width: 0; /* to override default 'min-width:auto' */
+ outline: 1px dashed black;
+ margin: 0;
+ vertical-align: top;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexbox"><input type="button"></div>
+ <div class="flexbox"><input type="checkbox"></div>
+ <div class="flexbox"><input type="file"></div>
+ <div class="flexbox"><input type="image"></div>
+ <div class="flexbox"><input type="password"></div>
+ <div class="flexbox"><input type="radio"></div>
+ <div class="flexbox"><input type="reset"></div>
+ <div class="flexbox"><input type="submit"></div>
+ <div class="flexbox"><input type="text"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-4-ref.html b/layout/reftests/flexbox/flexbox-widget-flex-items-4-ref.html
new file mode 100644
index 000000000..b34c4f51d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-4-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <style>
+ div.flexbox {
+ background: lightgray;
+ float: left;
+ height: 60px;
+ margin-right: 10px;
+ }
+ div.flexbox > * {
+ outline: 1px dashed black;
+ margin: 0;
+ vertical-align: top;
+ height: 100%;
+ display: block;
+ }
+ br { clear: left; }
+ </style>
+</head>
+<body>
+ <div class="flexbox"><input type="button"></div>
+ <div class="flexbox"><input type="checkbox"></div>
+ <br>
+ <div class="flexbox"><input type="image"></div>
+ <div class="flexbox"><input type="radio"></div>
+ <br>
+ <div class="flexbox"><input type="reset"></div>
+ <div class="flexbox"><input type="submit"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-4.html b/layout/reftests/flexbox/flexbox-widget-flex-items-4.html
new file mode 100644
index 000000000..bb7c5e958
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-4.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This testcase checks that, for any widgets that have a single valid size
+ (and hence refuse to flex), we don't stretch them in the cross-axis,
+ despite the "align-self: stretch" property.
+
+ These widgets can be allowed to be resized on some platforms but not others.
+ We'll account for that by giving them height: 100% in the reference case,
+ so that if they're allowed to stretch, then they'll stretch in both the
+ reference case and the testcase.
+-->
+<html>
+<head>
+ <style>
+ div.flexbox {
+ display: flex;
+ background: lightgray;
+ float: left;
+ height: 60px;
+ margin-right: 10px;
+ }
+ div.flexbox > * {
+ outline: 1px dashed black;
+ margin: 0;
+ vertical-align: top;
+ height: auto;
+ align-self: stretch;
+ }
+ br { clear: left; }
+ </style>
+</head>
+<body>
+ <div class="flexbox"><input type="button"></div>
+ <div class="flexbox"><input type="checkbox"></div>
+ <br>
+ <div class="flexbox"><input type="image"></div>
+ <div class="flexbox"><input type="radio"></div>
+ <br>
+ <div class="flexbox"><input type="reset"></div>
+ <div class="flexbox"><input type="submit"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html
new file mode 100644
index 000000000..2f002b63b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ }
+ .flexContainer {
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1a.html b/layout/reftests/flexbox/pagination/flexbox-empty-1a.html
new file mode 100644
index 000000000..ae7297f59
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1a.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ and with the flex container having "flex-direction: row".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1b.html b/layout/reftests/flexbox/pagination/flexbox-empty-1b.html
new file mode 100644
index 000000000..40cdcbe40
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1b.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ and with the flex container having "flex-direction: row-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row-reverse;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1c.html b/layout/reftests/flexbox/pagination/flexbox-empty-1c.html
new file mode 100644
index 000000000..16dd69748
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1c.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ and with the flex container having "flex-direction: column".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1d.html b/layout/reftests/flexbox/pagination/flexbox-empty-1d.html
new file mode 100644
index 000000000..086b3b006
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1d.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ and with the flex container having "flex-direction: column-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1e.html b/layout/reftests/flexbox/pagination/flexbox-empty-1e.html
new file mode 100644
index 000000000..d631c1857
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1e.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ with the flex container overflowing its fixed-height-block parent,
+ and with the flex container having "flex-direction: row".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ }
+ .fixedHeightBlock {
+ height: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div></div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div></div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1f.html b/layout/reftests/flexbox/pagination/flexbox-empty-1f.html
new file mode 100644
index 000000000..4879d1527
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1f.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ with the flex container overflowing its fixed-height-block parent,
+ and with the flex container having "flex-direction: row-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ }
+ .fixedHeightBlock {
+ height: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row-reverse;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div></div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div></div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1g.html b/layout/reftests/flexbox/pagination/flexbox-empty-1g.html
new file mode 100644
index 000000000..40b7a2ef8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1g.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ with the flex container overflowing its fixed-height-block parent,
+ and with the flex container having "flex-direction: column".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ }
+ .fixedHeightBlock {
+ height: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div></div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div></div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1h.html b/layout/reftests/flexbox/pagination/flexbox-empty-1h.html
new file mode 100644
index 000000000..8d2be34b2
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1h.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ with the flex container overflowing its fixed-height-block parent,
+ and with the flex container having "flex-direction: column-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ }
+ .fixedHeightBlock {
+ height: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div></div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div></div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html
new file mode 100644
index 000000000..0697416b7
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ margin/border/padding that are larger than the available height,
+ and with the flex container having "flex-direction: row".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 2px;
+ }
+ .flexContainer {
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- margin-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 10px"></div>
+ </div>
+
+ <!-- margin-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 11px"></div>
+ </div>
+
+ <!-- margin-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 10px"></div>
+ </div>
+
+ <!-- margin-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- border-top-width is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 10px"></div>
+ </div>
+
+ <!-- border-top-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 11px"></div>
+ </div>
+
+ <!-- border-bottom-width is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 10px"></div>
+ </div>
+
+ <!-- border-bottom-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 11px"></div>
+ </div>
+
+ <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- ==================================== -->
+ <!-- padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 10px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 11px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 10px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =========================================== -->
+ <!-- border+padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 5px;
+ padding-top: 5px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 6px;
+ padding-top: 6px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 5px;
+ padding-bottom: 5px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 6px;
+ padding-bottom: 6px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2a.html b/layout/reftests/flexbox/pagination/flexbox-empty-2a.html
new file mode 100644
index 000000000..31ee91cf3
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2a.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ margin/border/padding that are larger than the available height,
+ and with the flex container having "flex-direction: row".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- margin-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 10px"></div>
+ </div>
+
+ <!-- margin-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 11px"></div>
+ </div>
+
+ <!-- margin-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 10px"></div>
+ </div>
+
+ <!-- margin-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- border-top-width is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 10px"></div>
+ </div>
+
+ <!-- border-top-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 11px"></div>
+ </div>
+
+ <!-- border-bottom-width is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 10px"></div>
+ </div>
+
+ <!-- border-bottom-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 11px"></div>
+ </div>
+
+ <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- ==================================== -->
+ <!-- padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 10px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 11px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 10px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =========================================== -->
+ <!-- border+padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 5px;
+ padding-top: 5px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 6px;
+ padding-top: 6px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 5px;
+ padding-bottom: 5px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 6px;
+ padding-bottom: 6px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2b.html b/layout/reftests/flexbox/pagination/flexbox-empty-2b.html
new file mode 100644
index 000000000..10cd9b22d
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2b.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ margin/border/padding that are larger than the available height,
+ and with the flex container having "flex-direction: row-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row-reverse;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- margin-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 10px"></div>
+ </div>
+
+ <!-- margin-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 11px"></div>
+ </div>
+
+ <!-- margin-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 10px"></div>
+ </div>
+
+ <!-- margin-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- border-top-width is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 10px"></div>
+ </div>
+
+ <!-- border-top-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 11px"></div>
+ </div>
+
+ <!-- border-bottom-width is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 10px"></div>
+ </div>
+
+ <!-- border-bottom-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 11px"></div>
+ </div>
+
+ <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- ==================================== -->
+ <!-- padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 10px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 11px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 10px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =========================================== -->
+ <!-- border+padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 5px;
+ padding-top: 5px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 6px;
+ padding-top: 6px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 5px;
+ padding-bottom: 5px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 6px;
+ padding-bottom: 6px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2c.html b/layout/reftests/flexbox/pagination/flexbox-empty-2c.html
new file mode 100644
index 000000000..3e606df23
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2c.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ margin/border/padding that are larger than the available height,
+ and with the flex container having "flex-direction: column".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- margin-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 10px"></div>
+ </div>
+
+ <!-- margin-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 11px"></div>
+ </div>
+
+ <!-- margin-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 10px"></div>
+ </div>
+
+ <!-- margin-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- border-top-width is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 10px"></div>
+ </div>
+
+ <!-- border-top-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 11px"></div>
+ </div>
+
+ <!-- border-bottom-width is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 10px"></div>
+ </div>
+
+ <!-- border-bottom-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 11px"></div>
+ </div>
+
+ <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- ==================================== -->
+ <!-- padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 10px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 11px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 10px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =========================================== -->
+ <!-- border+padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 5px;
+ padding-top: 5px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 6px;
+ padding-top: 6px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 5px;
+ padding-bottom: 5px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 6px;
+ padding-bottom: 6px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2d.html b/layout/reftests/flexbox/pagination/flexbox-empty-2d.html
new file mode 100644
index 000000000..e45df0ffa
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2d.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ margin/border/padding that are larger than the available height,
+ and with the flex container having "flex-direction: column-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- margin-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 10px"></div>
+ </div>
+
+ <!-- margin-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 11px"></div>
+ </div>
+
+ <!-- margin-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 10px"></div>
+ </div>
+
+ <!-- margin-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- border-top-width is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 10px"></div>
+ </div>
+
+ <!-- border-top-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 11px"></div>
+ </div>
+
+ <!-- border-bottom-width is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 10px"></div>
+ </div>
+
+ <!-- border-bottom-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 11px"></div>
+ </div>
+
+ <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- ==================================== -->
+ <!-- padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 10px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 11px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 10px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =========================================== -->
+ <!-- border+padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 5px;
+ padding-top: 5px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 6px;
+ padding-top: 6px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 5px;
+ padding-bottom: 5px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 6px;
+ padding-bottom: 6px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multicol-vert-empty-2.html b/layout/reftests/flexbox/pagination/flexbox-multicol-vert-empty-2.html
new file mode 100644
index 000000000..586b51db7
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multicol-vert-empty-2.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <head>
+ <style>
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ border: 2px dotted black;
+ height: 298px;
+ }
+ .multicol {
+ height: 100px;
+ width: 200px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 4px solid orange;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="multicol">
+ <div class="flexContainer">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html
new file mode 100644
index 000000000..d0231e2f5
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 30px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ display: block;
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html
new file mode 100644
index 000000000..4b917aa18
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: row" and
+ "flex-wrap: wrap".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 30px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html
new file mode 100644
index 000000000..8164a5aa3
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: row".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 30px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html
new file mode 100644
index 000000000..3d2ae7e13
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: row-reverse" and
+ "flex-wrap: wrap".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 30px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row-reverse;
+ flex-wrap: wrap;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html
new file mode 100644
index 000000000..0b0aef653
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: row-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 30px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row-reverse;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html
new file mode 100644
index 000000000..ae31d0898
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: column" and
+ "flex-wrap: wrap".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 30px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ flex: none;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html
new file mode 100644
index 000000000..bfd2fde16
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: column".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 30px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ flex: none;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html
new file mode 100644
index 000000000..1e3e9ff8c
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: column-reverse"
+ and "flex-wrap: wrap".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 30px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ flex: none;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html
new file mode 100644
index 000000000..317e625d0
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: column-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 30px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ justify-content: flex-end;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ flex: none;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html
new file mode 100644
index 000000000..163234dea
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with several children in a
+ multi-line vertical flexbox.
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 40px;
+ width: 100px;
+ -moz-column-width: 60px;
+ -moz-column-fill: auto;
+ border: 2px solid purple;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ background: yellow;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 40px;
+ height: 15px;
+ border: 1px dotted teal;
+ margin: 1px;
+ font: 10px serif;
+ float: left;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 38px">
+ <div class="item">1</div>
+ <div class="item">3</div>
+ <div class="item">2</div>
+ </div>
+ </div>
+
+ <!-- auto-height container, with enough children that our last flex line
+ overflows (in the cross axis) -->
+ <!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the
+ overflowing flex line to a continuation of the flex container -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 38px">
+ <div style="width: 132px">
+ <div class="item">1</div>
+ <div class="item">3</div>
+ <div class="item">5</div>
+ <div class="item">2</div>
+ <div class="item">4</div>
+ </div>
+ </div>
+ </div>
+
+ <!-- fixed-height container-->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 70px">
+ <div class="item">1</div>
+ <div class="item">3</div>
+ <div class="item">2</div>
+ </div>
+ </div>
+
+ <!-- fixed-height container, with enough children that our last flex line
+ overflows (in the cross axis) -->
+ <!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the
+ overflowing flex line to a continuation of the flex container -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 70px">
+ <div style="width: 132px">
+ <div class="item">1</div>
+ <div class="item">3</div>
+ <div class="item">5</div>
+ <div class="item">2</div>
+ <div class="item">4</div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html
new file mode 100644
index 000000000..b006e9718
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with several children in a
+ multi-line vertical flexbox.
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 40px;
+ width: 100px;
+ -moz-column-width: 60px;
+ -moz-column-fill: auto;
+ border: 2px solid purple;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-content: flex-start;
+ background: yellow;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 40px;
+ height: 15px;
+ border: 1px dotted teal;
+ margin: 1px;
+ font: 10px serif;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+ </div>
+ </div>
+
+ <!-- auto-height container, with enough children that our last flex line
+ overflows (in the cross axis) -->
+ <!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the
+ overflowing flex line to a continuation of the flex container -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+ <div class="item">4</div>
+ <div class="item">5</div>
+ </div>
+ </div>
+
+ <!-- fixed-height container-->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 70px">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+ </div>
+ </div>
+
+ <!-- fixed-height container, with enough children that our last flex line
+ overflows (in the cross axis) -->
+ <!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the
+ overflowing flex line to a continuation of the flex container -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 70px">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+ <div class="item">4</div>
+ <div class="item">5</div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/reftest-stylo.list b/layout/reftests/flexbox/pagination/reftest-stylo.list
new file mode 100644
index 000000000..47156fa3a
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/reftest-stylo.list
@@ -0,0 +1,31 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# Tests with an empty flex container being fragmented:
+== flexbox-empty-1a.html flexbox-empty-1a.html
+== flexbox-empty-1b.html flexbox-empty-1b.html
+== flexbox-empty-1c.html flexbox-empty-1c.html
+== flexbox-empty-1d.html flexbox-empty-1d.html
+
+# Tests with an empty flex container that overflows a short fixed-height block
+# being fragmented:
+== flexbox-empty-1e.html flexbox-empty-1e.html
+== flexbox-empty-1f.html flexbox-empty-1f.html
+== flexbox-empty-1g.html flexbox-empty-1g.html
+== flexbox-empty-1h.html flexbox-empty-1h.html
+
+# Tests with an empty flex container being fragmented, with margin, border,
+# and/or padding being taller than the available height:
+== flexbox-empty-2a.html flexbox-empty-2a.html
+== flexbox-empty-2b.html flexbox-empty-2b.html
+== flexbox-empty-2c.html flexbox-empty-2c.html
+== flexbox-empty-2d.html flexbox-empty-2d.html
+
+# Tests for how we fragment a flex container with one unbreakable child
+== flexbox-unbreakable-child-1a.html flexbox-unbreakable-child-1a.html
+== flexbox-unbreakable-child-1a-wrap.html flexbox-unbreakable-child-1a-wrap.html
+== flexbox-unbreakable-child-1b.html flexbox-unbreakable-child-1b.html
+== flexbox-unbreakable-child-1b-wrap.html flexbox-unbreakable-child-1b-wrap.html
+== flexbox-unbreakable-child-1c.html flexbox-unbreakable-child-1c.html
+== flexbox-unbreakable-child-1c-wrap.html flexbox-unbreakable-child-1c-wrap.html
+== flexbox-unbreakable-child-1d.html flexbox-unbreakable-child-1d.html
+== flexbox-unbreakable-child-1d-wrap.html flexbox-unbreakable-child-1d-wrap.html
+== flexbox-unbreakable-child-2.html flexbox-unbreakable-child-2.html
diff --git a/layout/reftests/flexbox/pagination/reftest.list b/layout/reftests/flexbox/pagination/reftest.list
new file mode 100644
index 000000000..31842d43d
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/reftest.list
@@ -0,0 +1,30 @@
+# Tests with an empty flex container being fragmented:
+== flexbox-empty-1a.html flexbox-empty-1-ref.html
+== flexbox-empty-1b.html flexbox-empty-1-ref.html
+== flexbox-empty-1c.html flexbox-empty-1-ref.html
+== flexbox-empty-1d.html flexbox-empty-1-ref.html
+
+# Tests with an empty flex container that overflows a short fixed-height block
+# being fragmented:
+== flexbox-empty-1e.html flexbox-empty-1-ref.html
+== flexbox-empty-1f.html flexbox-empty-1-ref.html
+== flexbox-empty-1g.html flexbox-empty-1-ref.html
+== flexbox-empty-1h.html flexbox-empty-1-ref.html
+
+# Tests with an empty flex container being fragmented, with margin, border,
+# and/or padding being taller than the available height:
+== flexbox-empty-2a.html flexbox-empty-2-ref.html
+== flexbox-empty-2b.html flexbox-empty-2-ref.html
+== flexbox-empty-2c.html flexbox-empty-2-ref.html
+== flexbox-empty-2d.html flexbox-empty-2-ref.html
+
+# Tests for how we fragment a flex container with one unbreakable child
+== flexbox-unbreakable-child-1a.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1a-wrap.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1b.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1b-wrap.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1c.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1c-wrap.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1d.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1d-wrap.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-2.html flexbox-unbreakable-child-2-ref.html
diff --git a/layout/reftests/flexbox/reftest-stylo.list b/layout/reftests/flexbox/reftest-stylo.list
new file mode 100644
index 000000000..be3987fba
--- /dev/null
+++ b/layout/reftests/flexbox/reftest-stylo.list
@@ -0,0 +1,121 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# NOTE: Most of our flexbox tests have moved to the w3c-css reftest directory.
+# The tests that remain in *this* directory are still here because either:
+# a) They (or one of their closely-related tests) use some moz-prefixed
+# feature, e.g. MozReftestInvalidate or -moz-max-content.
+# ...or...
+# b) They test a feature that has known bugs (e.g. bug 874713)
+#
+# Where possible & practical, we should try to address these so we can migrate
+# tests over to the w3c-css directory, so that they can become part of the
+# W3C's test suite.
+
+# SUBDIRECTORY: Reftests for paginated flex containers
+include pagination/reftest-stylo.list
+
+# Tests for cross-axis alignment (align-self / align-items properties)
+== flexbox-align-self-baseline-horiz-2.xhtml flexbox-align-self-baseline-horiz-2.xhtml
+# bug 793456, and possibly others
+# This one fails on windows R (but not Ru, strangely). On Windows R, the
+# single-line <label> flex item has a different background size in test vs. ref
+fuzzy-if(B2G,10,3) fuzzy-if(cocoaWidget,1,2) random-if(winWidget) == flexbox-align-self-baseline-horiz-3.xhtml flexbox-align-self-baseline-horiz-3.xhtml
+# XXXdholbert investigate
+== flexbox-align-self-baseline-horiz-4.xhtml flexbox-align-self-baseline-horiz-4.xhtml
+
+# Tests for box-sizing on flex containers and flex items.
+== flexbox-box-sizing-on-container-horiz-1.html flexbox-box-sizing-on-container-horiz-1.html
+== flexbox-box-sizing-on-container-vert-1.html flexbox-box-sizing-on-container-vert-1.html
+== flexbox-box-sizing-on-items-horiz-1a.html flexbox-box-sizing-on-items-horiz-1a.html
+== flexbox-box-sizing-on-items-horiz-1b.html flexbox-box-sizing-on-items-horiz-1b.html
+== flexbox-box-sizing-on-items-vert-1a.html flexbox-box-sizing-on-items-vert-1a.html
+== flexbox-box-sizing-on-items-vert-1b.html flexbox-box-sizing-on-items-vert-1b.html
+
+# Tests for dynamic modifications of content inside/around a flex container
+== flexbox-dyn-changeFrameWidth-1.xhtml flexbox-dyn-changeFrameWidth-1.xhtml
+== flexbox-dyn-changeFrameWidth-2.xhtml flexbox-dyn-changeFrameWidth-2.xhtml
+== flexbox-dyn-changeFrameWidth-3.xhtml flexbox-dyn-changeFrameWidth-3.xhtml
+== flexbox-dyn-changeFrameWidth-4.xhtml flexbox-dyn-changeFrameWidth-4.xhtml
+== flexbox-dyn-changeOrder-1a.html flexbox-dyn-changeOrder-1a.html
+== flexbox-dyn-changeOrder-1b.html flexbox-dyn-changeOrder-1b.html
+== flexbox-dyn-changePadding-1a.xhtml flexbox-dyn-changePadding-1a.xhtml
+== flexbox-dyn-changePadding-1b.xhtml flexbox-dyn-changePadding-1b.xhtml
+
+# Tests for dynamic insertions of content into a flex container
+# (with existing [div | span | text] inside the flexbox, and new content
+# inserted adjacent to that existing content.)
+== flexbox-dyn-insertAroundDiv-1.xhtml flexbox-dyn-insertAroundDiv-1.xhtml
+== flexbox-dyn-insertAroundDiv-2.xhtml flexbox-dyn-insertAroundDiv-2.xhtml
+== flexbox-dyn-insertAroundDiv-3.xhtml flexbox-dyn-insertAroundDiv-3.xhtml
+
+== flexbox-dyn-insertAroundSpan-1.xhtml flexbox-dyn-insertAroundSpan-1.xhtml
+== flexbox-dyn-insertAroundSpan-2.xhtml flexbox-dyn-insertAroundSpan-2.xhtml
+== flexbox-dyn-insertAroundSpan-3.xhtml flexbox-dyn-insertAroundSpan-3.xhtml
+
+== flexbox-dyn-insertAroundText-1.xhtml flexbox-dyn-insertAroundText-1.xhtml
+== flexbox-dyn-insertAroundText-2.xhtml flexbox-dyn-insertAroundText-2.xhtml
+== flexbox-dyn-insertAroundText-3.xhtml flexbox-dyn-insertAroundText-3.xhtml
+
+# Variant of one of the above tests, to regression-test an invalidation issue
+== flexbox-dyn-insertEmptySpan-1.xhtml flexbox-dyn-insertEmptySpan-1.xhtml
+
+# Tests for empty flexboxes (with no flex items)
+== flexbox-empty-1a.xhtml flexbox-empty-1a.xhtml
+== flexbox-empty-1b.xhtml flexbox-empty-1b.xhtml
+
+# Tests for handling of floated elements inside a flexbox
+== flexbox-float-1a.xhtml flexbox-float-1a.xhtml
+== flexbox-float-1b.xhtml flexbox-float-1b.xhtml
+== flexbox-float-1c.xhtml flexbox-float-1c.xhtml
+== flexbox-float-1d.xhtml flexbox-float-1d.xhtml
+== flexbox-float-2a.xhtml flexbox-float-2a.xhtml
+== flexbox-float-2b.xhtml flexbox-float-2b.xhtml
+
+# Tests for the order in which we paint flex items
+== flexbox-paint-ordering-3.html flexbox-paint-ordering-3.html
+# bug 874718
+
+# Tests for handling of absolutely/fixed/relatively-positioned flex items.
+== flexbox-position-absolute-1.xhtml flexbox-position-absolute-1.xhtml
+== flexbox-position-absolute-2.xhtml flexbox-position-absolute-2.xhtml
+== flexbox-position-absolute-3.xhtml flexbox-position-absolute-3.xhtml
+== flexbox-position-absolute-4.xhtml flexbox-position-absolute-4.xhtml
+== flexbox-position-fixed-3.xhtml flexbox-position-fixed-3.xhtml
+fuzzy-if(Android,16,400) == flexbox-position-fixed-1.xhtml flexbox-position-fixed-1.xhtml
+fuzzy-if(Android,16,400) == flexbox-position-fixed-2.xhtml flexbox-position-fixed-2.xhtml
+== flexbox-position-fixed-3.xhtml flexbox-position-fixed-3.xhtml
+== flexbox-position-fixed-4.xhtml flexbox-position-fixed-4.xhtml
+
+# Tests for inline content in a flexbox that gets wrapped in an anonymous block
+== flexbox-inlinecontent-horiz-1a.xhtml flexbox-inlinecontent-horiz-1a.xhtml
+# reference case rendering is incorrect; bug 858333
+skip == flexbox-inlinecontent-horiz-1b.xhtml flexbox-inlinecontent-horiz-1b.xhtml
+# reference case rendering is incorrect; bug 858333
+== flexbox-inlinecontent-horiz-2.xhtml flexbox-inlinecontent-horiz-2.xhtml
+== flexbox-inlinecontent-horiz-3a.xhtml flexbox-inlinecontent-horiz-3a.xhtml
+== flexbox-inlinecontent-horiz-3b.xhtml flexbox-inlinecontent-horiz-3b.xhtml
+== flexbox-inlinecontent-horiz-3c.xhtml flexbox-inlinecontent-horiz-3c.xhtml
+== flexbox-inlinecontent-horiz-4.xhtml flexbox-inlinecontent-horiz-4.xhtml
+== flexbox-inlinecontent-horiz-5.xhtml flexbox-inlinecontent-horiz-5.xhtml
+
+# Tests for intrinsic sizing of flexboxes
+== flexbox-intrinsic-sizing-horiz-1a.xhtml flexbox-intrinsic-sizing-horiz-1a.xhtml
+== flexbox-intrinsic-sizing-horiz-1b.xhtml flexbox-intrinsic-sizing-horiz-1b.xhtml
+== flexbox-intrinsic-sizing-horiz-2a.xhtml flexbox-intrinsic-sizing-horiz-2a.xhtml
+== flexbox-intrinsic-sizing-horiz-2b.xhtml flexbox-intrinsic-sizing-horiz-2b.xhtml
+
+# Tests for invalidation after dynamic modifications
+== flexbox-invalidation-1.html flexbox-invalidation-1.html
+
+# Tests for flexbox in an iframe that gets resized.
+fails skip-if(B2G||Mulet) fuzzy-if(skiaContent,1,5) == flexbox-resizeviewport-1.xhtml flexbox-resizeviewport-1.xhtml
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+# Tests for flexbox styling on things that don't support it
+== flexbox-styling-on-svg-1.svg flexbox-styling-on-svg-1.svg
+
+# Tests with widgets as flex items
+fuzzy-if(gtkWidget,1,66) == flexbox-widget-flex-items-1.html flexbox-widget-flex-items-1.html
+fuzzy-if(gtkWidget,1,74) == flexbox-widget-flex-items-2.html flexbox-widget-flex-items-2.html
+skip-if(gtkWidget) == flexbox-widget-flex-items-3.html flexbox-widget-flex-items-3.html
+# bug 1260965
+fails fuzzy-if(gtkWidget,1,31) == flexbox-widget-flex-items-4.html flexbox-widget-flex-items-4.html
diff --git a/layout/reftests/flexbox/reftest.list b/layout/reftests/flexbox/reftest.list
new file mode 100644
index 000000000..79ffa7e75
--- /dev/null
+++ b/layout/reftests/flexbox/reftest.list
@@ -0,0 +1,118 @@
+# NOTE: Most of our flexbox tests have moved to the w3c-css reftest directory.
+# The tests that remain in *this* directory are still here because either:
+# a) They (or one of their closely-related tests) use some moz-prefixed
+# feature, e.g. MozReftestInvalidate or -moz-max-content.
+# ...or...
+# b) They test a feature that has known bugs (e.g. bug 874713)
+#
+# Where possible & practical, we should try to address these so we can migrate
+# tests over to the w3c-css directory, so that they can become part of the
+# W3C's test suite.
+
+# SUBDIRECTORY: Reftests for paginated flex containers
+include pagination/reftest.list
+
+# Tests for cross-axis alignment (align-self / align-items properties)
+fails == flexbox-align-self-baseline-horiz-2.xhtml flexbox-align-self-baseline-horiz-2-ref.xhtml # bug 793456, and possibly others
+# This one fails on windows R (but not Ru, strangely) and GTK.
+# On Windows R and GTK, the single-line <label> flex item has a different
+# background size in test vs. ref
+# Disabled this test in v52 because it depends on bug 418833: fuzzy-if(cocoaWidget,1,2) random-if(winWidget||gtkWidget) skip-if(Android) == flexbox-align-self-baseline-horiz-3.xhtml flexbox-align-self-baseline-horiz-3-ref.xhtml # XXXdholbert investigate the random-if. The skip-if(Android) is because checkbox/radio appearance:none doesn't work as expected.
+== flexbox-align-self-baseline-horiz-4.xhtml flexbox-align-self-baseline-horiz-4-ref.xhtml
+
+# Tests for box-sizing on flex containers and flex items.
+== flexbox-box-sizing-on-container-horiz-1.html flexbox-box-sizing-on-container-horiz-1-ref.html
+== flexbox-box-sizing-on-container-vert-1.html flexbox-box-sizing-on-container-vert-1-ref.html
+== flexbox-box-sizing-on-items-horiz-1a.html flexbox-box-sizing-on-items-horiz-1-ref.html
+== flexbox-box-sizing-on-items-horiz-1b.html flexbox-box-sizing-on-items-horiz-1-ref.html
+== flexbox-box-sizing-on-items-vert-1a.html flexbox-box-sizing-on-items-vert-1-ref.html
+== flexbox-box-sizing-on-items-vert-1b.html flexbox-box-sizing-on-items-vert-1-ref.html
+
+# Tests for dynamic modifications of content inside/around a flex container
+== flexbox-dyn-changeFrameWidth-1.xhtml flexbox-dyn-changeFrameWidth-1-ref.xhtml
+== flexbox-dyn-changeFrameWidth-2.xhtml flexbox-dyn-changeFrameWidth-2-ref.xhtml
+== flexbox-dyn-changeFrameWidth-3.xhtml flexbox-dyn-changeFrameWidth-3-ref.xhtml
+== flexbox-dyn-changeFrameWidth-4.xhtml flexbox-dyn-changeFrameWidth-4-ref.xhtml
+== flexbox-dyn-changeOrder-1a.html flexbox-dyn-changeOrder-1-ref.html
+== flexbox-dyn-changeOrder-1b.html flexbox-dyn-changeOrder-1-ref.html
+== flexbox-dyn-changePadding-1a.xhtml flexbox-dyn-changePadding-1-ref.xhtml
+== flexbox-dyn-changePadding-1b.xhtml flexbox-dyn-changePadding-1-ref.xhtml
+
+# Tests for dynamic insertions of content into a flex container
+# (with existing [div | span | text] inside the flexbox, and new content
+# inserted adjacent to that existing content.)
+fuzzy-if(skiaContent,3,10) == flexbox-dyn-insertAroundDiv-1.xhtml flexbox-dyn-insertAroundDiv-1-ref.xhtml
+== flexbox-dyn-insertAroundDiv-2.xhtml flexbox-dyn-insertAroundDiv-2-ref.xhtml
+fuzzy-if(skiaContent,3,10) == flexbox-dyn-insertAroundDiv-3.xhtml flexbox-dyn-insertAroundDiv-3-ref.xhtml
+
+fuzzy-if(skiaContent,3,10) == flexbox-dyn-insertAroundSpan-1.xhtml flexbox-dyn-insertAroundDiv-1-ref.xhtml
+== flexbox-dyn-insertAroundSpan-2.xhtml flexbox-dyn-insertAroundDiv-2-ref.xhtml
+fuzzy-if(skiaContent,3,10) == flexbox-dyn-insertAroundSpan-3.xhtml flexbox-dyn-insertAroundDiv-3-ref.xhtml
+
+== flexbox-dyn-insertAroundText-1.xhtml flexbox-dyn-insertAroundText-1-ref.xhtml
+== flexbox-dyn-insertAroundText-2.xhtml flexbox-dyn-insertAroundText-2-ref.xhtml
+== flexbox-dyn-insertAroundText-3.xhtml flexbox-dyn-insertAroundText-3-ref.xhtml
+
+# Variant of one of the above tests, to regression-test an invalidation issue
+== flexbox-dyn-insertEmptySpan-1.xhtml flexbox-dyn-insertEmptySpan-1-ref.xhtml
+
+# Tests for empty flexboxes (with no flex items)
+== flexbox-empty-1a.xhtml flexbox-empty-1-ref.xhtml
+== flexbox-empty-1b.xhtml flexbox-empty-1-ref.xhtml
+== flexbox-empty-container-synthesized-baseline-001.html flexbox-empty-container-synthesized-baseline-001-ref.html
+
+# Tests for handling of floated elements inside a flexbox
+== flexbox-float-1a.xhtml flexbox-float-1-ref.xhtml
+== flexbox-float-1b.xhtml flexbox-float-1-ref.xhtml
+== flexbox-float-1c.xhtml flexbox-float-1-ref.xhtml
+== flexbox-float-1d.xhtml flexbox-float-1-ref.xhtml
+== flexbox-float-2a.xhtml flexbox-float-2-ref.xhtml
+== flexbox-float-2b.xhtml flexbox-float-2-ref.xhtml
+
+# Tests for the order in which we paint flex items
+fails == flexbox-paint-ordering-3.html flexbox-paint-ordering-3-ref.html # bug 874718
+
+# Tests for handling of absolutely/fixed/relatively-positioned flex items.
+== flexbox-position-absolute-1.xhtml flexbox-position-absolute-1-ref.xhtml
+== flexbox-position-absolute-2.xhtml flexbox-position-absolute-2-ref.xhtml
+== flexbox-position-absolute-3.xhtml flexbox-position-absolute-3-ref.xhtml
+== flexbox-position-absolute-4.xhtml flexbox-position-absolute-4-ref.xhtml
+== flexbox-position-fixed-3.xhtml flexbox-position-fixed-3-ref.xhtml
+fuzzy-if(Android,16,400) == flexbox-position-fixed-1.xhtml flexbox-position-fixed-1-ref.xhtml
+fuzzy-if(Android,16,400) == flexbox-position-fixed-2.xhtml flexbox-position-fixed-2-ref.xhtml
+== flexbox-position-fixed-3.xhtml flexbox-position-fixed-3-ref.xhtml
+== flexbox-position-fixed-4.xhtml flexbox-position-fixed-4-ref.xhtml
+
+# Tests for inline content in a flexbox that gets wrapped in an anonymous block
+fails == flexbox-inlinecontent-horiz-1a.xhtml flexbox-inlinecontent-horiz-1-ref.xhtml # reference case rendering is incorrect; bug 858333
+fails == flexbox-inlinecontent-horiz-1b.xhtml flexbox-inlinecontent-horiz-1-ref.xhtml # reference case rendering is incorrect; bug 858333
+== flexbox-inlinecontent-horiz-2.xhtml flexbox-inlinecontent-horiz-2-ref.xhtml
+== flexbox-inlinecontent-horiz-3a.xhtml flexbox-inlinecontent-horiz-3-ref.xhtml
+== flexbox-inlinecontent-horiz-3b.xhtml flexbox-inlinecontent-horiz-3-ref.xhtml
+== flexbox-inlinecontent-horiz-3c.xhtml flexbox-inlinecontent-horiz-3-ref.xhtml
+== flexbox-inlinecontent-horiz-4.xhtml flexbox-inlinecontent-horiz-4-ref.xhtml
+== flexbox-inlinecontent-horiz-5.xhtml flexbox-inlinecontent-horiz-5-ref.xhtml
+
+# Tests for intrinsic sizing of flexboxes
+== flexbox-intrinsic-sizing-horiz-1a.xhtml flexbox-intrinsic-sizing-horiz-1-ref.xhtml
+== flexbox-intrinsic-sizing-horiz-1b.xhtml flexbox-intrinsic-sizing-horiz-1-ref.xhtml
+== flexbox-intrinsic-sizing-horiz-2a.xhtml flexbox-intrinsic-sizing-horiz-2-ref.xhtml
+== flexbox-intrinsic-sizing-horiz-2b.xhtml flexbox-intrinsic-sizing-horiz-2-ref.xhtml
+
+# Tests for invalidation after dynamic modifications
+== flexbox-invalidation-1.html flexbox-invalidation-1-ref.html
+
+# Tests for flexbox in an iframe that gets resized.
+fuzzy-if(skiaContent,1,5) == flexbox-resizeviewport-1.xhtml flexbox-resizeviewport-1-ref.xhtml
+
+# Tests for flexbox styling on things that don't support it
+== flexbox-styling-on-svg-1.svg flexbox-styling-on-svg-1-ref.svg
+
+# Tests with widgets as flex items
+fuzzy-if(gtkWidget,1,66) == flexbox-widget-flex-items-1.html flexbox-widget-flex-items-1-ref.html
+fuzzy-if(gtkWidget,1,74) == flexbox-widget-flex-items-2.html flexbox-widget-flex-items-2-ref.html
+skip-if(gtkWidget) == flexbox-widget-flex-items-3.html flexbox-widget-flex-items-3-ref.html # bug 1260965
+fuzzy-if(gtkWidget,1,31) == flexbox-widget-flex-items-4.html flexbox-widget-flex-items-4-ref.html
+
+# Tests for table flex items
+== flexbox-table-flex-items-1-ref.html flexbox-table-flex-items-1-ref.html
diff --git a/layout/reftests/flexbox/solidblue.png b/layout/reftests/flexbox/solidblue.png
new file mode 100644
index 000000000..a64b6a425
--- /dev/null
+++ b/layout/reftests/flexbox/solidblue.png
Binary files differ