summaryrefslogtreecommitdiffstats
path: root/layout/reftests
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests')
-rw-r--r--layout/reftests/forms/input/datetime/reftest.list11
-rw-r--r--layout/reftests/forms/input/datetime/time-content-left-aligned-ref.html9
-rw-r--r--layout/reftests/forms/input/datetime/time-content-left-aligned.html9
-rw-r--r--layout/reftests/forms/input/datetime/time-reset-button-right-aligned-ref.html9
-rw-r--r--layout/reftests/forms/input/datetime/time-reset-button-right-aligned.html10
-rw-r--r--layout/reftests/forms/input/datetime/time-small-height-ref.html18
-rw-r--r--layout/reftests/forms/input/datetime/time-small-height.html19
-rw-r--r--layout/reftests/forms/input/datetime/time-small-width-height-ref.html18
-rw-r--r--layout/reftests/forms/input/datetime/time-small-width-height.html19
-rw-r--r--layout/reftests/forms/input/datetime/time-small-width-ref.html19
-rw-r--r--layout/reftests/forms/input/datetime/time-small-width.html20
-rw-r--r--layout/reftests/scrolling/propagated-overflow-style-1-ref.html18
-rw-r--r--layout/reftests/scrolling/propagated-overflow-style-1a.html23
-rw-r--r--layout/reftests/scrolling/propagated-overflow-style-1b.html23
-rw-r--r--layout/reftests/scrolling/propagated-overflow-style-1c.html19
-rw-r--r--layout/reftests/scrolling/propagated-overflow-style-2-ref.html15
-rw-r--r--layout/reftests/scrolling/propagated-overflow-style-2a.html26
-rw-r--r--layout/reftests/scrolling/propagated-overflow-style-2b.html26
-rw-r--r--layout/reftests/scrolling/propagated-overflow-style-2c.html24
-rw-r--r--layout/reftests/scrolling/propagated-overflow-style-2d.html24
-rw-r--r--layout/reftests/scrolling/propagated-overflow-style-2e.html15
-rw-r--r--layout/reftests/scrolling/reftest.list10
-rw-r--r--layout/reftests/transform-3d/animate-backface-hidden.html10
-rw-r--r--layout/reftests/transform-3d/animate-preserve3d-parent.html10
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-align-items-center-nested-001-ref.html16
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-align-items-center-nested-001.html47
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/reftest.list2
-rw-r--r--layout/reftests/xul/css-flex-1-ref.html18
-rw-r--r--layout/reftests/xul/css-flex-1.xul153
-rw-r--r--layout/reftests/xul/reftest.list2
30 files changed, 638 insertions, 4 deletions
diff --git a/layout/reftests/forms/input/datetime/reftest.list b/layout/reftests/forms/input/datetime/reftest.list
index 0ce2002bd..a62d56c7c 100644
--- a/layout/reftests/forms/input/datetime/reftest.list
+++ b/layout/reftests/forms/input/datetime/reftest.list
@@ -11,3 +11,14 @@ skip-if(!Android&&!B2G&&!Mulet) == time-simple-unthemed.html time-simple-untheme
# type change
skip-if(Android||B2G||Mulet) == to-time-from-other-type-unthemed.html time-simple-unthemed.html
skip-if(Android||B2G||Mulet) == from-time-to-other-type-unthemed.html from-time-to-other-type-unthemed-ref.html
+
+# content should not overflow on small width/height
+skip-if(Android) == time-small-width.html time-small-width-ref.html
+skip-if(Android) == time-small-height.html time-small-height-ref.html
+skip-if(Android) == time-small-width-height.html time-small-width-height-ref.html
+
+# content (text) should be left aligned
+skip-if(Android) == time-content-left-aligned.html time-content-left-aligned-ref.html
+
+# reset button should be right aligned
+skip-if(Android) fails-if(styloVsGecko) == time-reset-button-right-aligned.html time-reset-button-right-aligned-ref.html # bug 1372062
diff --git a/layout/reftests/forms/input/datetime/time-content-left-aligned-ref.html b/layout/reftests/forms/input/datetime/time-content-left-aligned-ref.html
new file mode 100644
index 000000000..ad8be9adc
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-content-left-aligned-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="time" style="width: 200px;">
+ <!-- div to cover the right area -->
+ <div style="display:block; position:absolute; background-color:black;
+ top:0px; left:40px; width:200px; height:100px;"></div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-content-left-aligned.html b/layout/reftests/forms/input/datetime/time-content-left-aligned.html
new file mode 100644
index 000000000..aa910cddf
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-content-left-aligned.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="time" style="width: 50px;">
+ <!-- div to cover the right area -->
+ <div style="display:block; position:absolute; background-color:black;
+ top:0px; left:40px; width:200px; height:100px;"></div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-reset-button-right-aligned-ref.html b/layout/reftests/forms/input/datetime/time-reset-button-right-aligned-ref.html
new file mode 100644
index 000000000..3d36f2068
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-reset-button-right-aligned-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="time" value="10:00" style="float: right; color: white;">
+ <!-- div to cover the left area -->
+ <div style="display:block; position:absolute; background-color:black;
+ top:0px; right:30px; width:500px; height:100px;"></div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-reset-button-right-aligned.html b/layout/reftests/forms/input/datetime/time-reset-button-right-aligned.html
new file mode 100644
index 000000000..72d5cc140
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-reset-button-right-aligned.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="time" value="10:00" style="width: 150px; float: right;
+ color: white;">
+ <!-- div to cover the left area -->
+ <div style="display:block; position:absolute; background-color:black;
+ top:0px; right:30px; width:500px; height:100px;"></div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-small-height-ref.html b/layout/reftests/forms/input/datetime/time-small-height-ref.html
new file mode 100644
index 000000000..fcda93df9
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-small-height-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+input {
+ width: 200px;
+ height: 5px;
+ outline: 1px dotted black;
+ /* Disable baseline alignment, so that our y-position isn't influenced by the
+ * choice of font inside of input: */
+ vertical-align: top;
+}
+ </style>
+ </head>
+ <body>
+ <input>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-small-height.html b/layout/reftests/forms/input/datetime/time-small-height.html
new file mode 100644
index 000000000..3044822fe
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-small-height.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+input {
+ width: 200px;
+ height: 5px;
+ outline: 1px dotted black;
+ color: white;
+ /* Disable baseline alignment, so that our y-position isn't influenced by the
+ * choice of font inside of input: */
+ vertical-align: top;
+}
+ </style>
+ </head>
+ <body>
+ <input type="time">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-small-width-height-ref.html b/layout/reftests/forms/input/datetime/time-small-width-height-ref.html
new file mode 100644
index 000000000..0979243db
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-small-width-height-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+input {
+ width: 8px;
+ height: 8px;
+ outline: 1px dotted black;
+ /* Disable baseline alignment, so that our y-position isn't influenced by the
+ * choice of font inside of input: */
+ vertical-align: top;
+}
+ </style>
+ </head>
+ <body>
+ <input>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-small-width-height.html b/layout/reftests/forms/input/datetime/time-small-width-height.html
new file mode 100644
index 000000000..a221b2819
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-small-width-height.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+input {
+ width: 8px;
+ height: 8px;
+ outline: 1px dotted black;
+ color: white;
+ /* Disable baseline alignment, so that our y-position isn't influenced by the
+ * choice of font inside of input: */
+ vertical-align: top;
+}
+ </style>
+ </head>
+ <body>
+ <input type="time">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-small-width-ref.html b/layout/reftests/forms/input/datetime/time-small-width-ref.html
new file mode 100644
index 000000000..2379c7080
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-small-width-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+input {
+ width: 10px;
+ height: 1.5em;
+ outline: 1px dotted black;
+ background: white;
+ /* Disable baseline alignment, so that our y-position isn't influenced by the
+ * choice of font inside of input: */
+ vertical-align: top;
+}
+ </style>
+ </head>
+ <body>
+ <input>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-small-width.html b/layout/reftests/forms/input/datetime/time-small-width.html
new file mode 100644
index 000000000..f76f7fdfa
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-small-width.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+input {
+ width: 10px;
+ height: 1.5em;
+ outline: 1px dotted black;
+ color: white;
+ background: white;
+ /* Disable baseline alignment, so that our y-position isn't influenced by the
+ * choice of font inside of input: */
+ vertical-align: top;
+}
+ </style>
+ </head>
+ <body>
+ <input type="time">
+ </body>
+</html>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-1-ref.html b/layout/reftests/scrolling/propagated-overflow-style-1-ref.html
new file mode 100644
index 000000000..7c2b1b315
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-1-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>
+ Reference case with body and html *independently* scrollable.
+ </title>
+ <style>
+ html {
+ overflow: scroll;
+ }
+ body {
+ overflow: scroll;
+ }
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-1a.html b/layout/reftests/scrolling/propagated-overflow-style-1a.html
new file mode 100644
index 000000000..b5115d36f
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-1a.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <title>
+ Testcase with body and html *independently* scrollable,
+ with body's "overflow" set dynamically.
+ </title>
+ <style>
+ html {
+ overflow: scroll;
+ }
+ </style>
+ <script>
+ function doTest() {
+ document.body.style.overflow = "scroll";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", doTest);
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-1b.html b/layout/reftests/scrolling/propagated-overflow-style-1b.html
new file mode 100644
index 000000000..4608b87d6
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-1b.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <title>
+ Testcase with body and html *independently* scrollable,
+ with html's "overflow" set dynamically.
+ </title>
+ <style>
+ body {
+ overflow: scroll;
+ }
+ </style>
+ <script>
+ function doTest() {
+ document.documentElement.style.overflow = "scroll";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", doTest);
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-1c.html b/layout/reftests/scrolling/propagated-overflow-style-1c.html
new file mode 100644
index 000000000..11809915a
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-1c.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <title>
+ Testcase with body and html *independently* scrollable,
+ with both html & body's "overflow" set dynamically.
+ </title>
+ <script>
+ function doTest() {
+ document.documentElement.style.overflow = "scroll";
+ document.body.style.overflow = "scroll";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", doTest);
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-2-ref.html b/layout/reftests/scrolling/propagated-overflow-style-2-ref.html
new file mode 100644
index 000000000..20c3b8ae5
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-2-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>
+ Reference case with the root viewport scrollable, via styles on html node.
+ </title>
+ <style>
+ html {
+ overflow: scroll;
+ }
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-2a.html b/layout/reftests/scrolling/propagated-overflow-style-2a.html
new file mode 100644
index 000000000..250bedd6c
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-2a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <title>
+ Testcase with only one of [html,body] being scrollable,
+ after body's "overflow" is reset dynamically.
+ </title>
+ <style>
+ html {
+ overflow: scroll;
+ }
+ body {
+ overflow: scroll;
+ }
+ </style>
+ <script>
+ function doTest() {
+ document.body.style.overflow = "visible";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", doTest);
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-2b.html b/layout/reftests/scrolling/propagated-overflow-style-2b.html
new file mode 100644
index 000000000..c94ddedb2
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-2b.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <title>
+ Testcase with only one of [html,body] being scrollable,
+ after html's "overflow" is reset dynamically.
+ </title>
+ <style>
+ html {
+ overflow: scroll;
+ }
+ body {
+ overflow: scroll;
+ }
+ </style>
+ <script>
+ function doTest() {
+ document.documentElement.style.overflow = "visible";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", doTest);
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-2c.html b/layout/reftests/scrolling/propagated-overflow-style-2c.html
new file mode 100644
index 000000000..0ceb1f21a
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-2c.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <title>
+ Testcase with only one of [html,body] being scrollable,
+ with their "overflow" styles being dynamically swapped.
+ </title>
+ <style>
+ html {
+ overflow: scroll;
+ }
+ </style>
+ <script>
+ function doTest() {
+ document.documentElement.style.overflow = "visible";
+ document.body.style.overflow = "scroll";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", doTest);
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-2d.html b/layout/reftests/scrolling/propagated-overflow-style-2d.html
new file mode 100644
index 000000000..3353a3374
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-2d.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <title>
+ Testcase with only one of [html,body] being scrollable,
+ with their "overflow" styles being dynamically swapped.
+ </title>
+ <style>
+ body {
+ overflow: scroll;
+ }
+ </style>
+ <script>
+ function doTest() {
+ document.documentElement.style.overflow = "scroll";
+ document.body.style.overflow = "visible";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", doTest);
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-2e.html b/layout/reftests/scrolling/propagated-overflow-style-2e.html
new file mode 100644
index 000000000..f9105185b
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-2e.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>
+ Testcase with the root viewport scrollable, via styles on body node.
+ </title>
+ <style>
+ body {
+ overflow: scroll;
+ }
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/reftest.list b/layout/reftests/scrolling/reftest.list
index db1b81db6..43997ced7 100644
--- a/layout/reftests/scrolling/reftest.list
+++ b/layout/reftests/scrolling/reftest.list
@@ -85,3 +85,13 @@ fuzzy-if(asyncPan&&!layersGPUAccelerated,102,2420) == frame-scrolling-attr-2.htm
== fractional-scroll-area.html?top=0.4&outerBottom=99.6&innerBottom=200.4&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
== fractional-scroll-area.html?top=0.4&outerBottom=100.4&innerBottom=200.4&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
!= fractional-scroll-area-invalidation.html about:blank
+
+# Tests for "overflow" styles that may be propagated to the viewport:
+== propagated-overflow-style-1a.html propagated-overflow-style-1-ref.html
+== propagated-overflow-style-1b.html propagated-overflow-style-1-ref.html
+== propagated-overflow-style-1c.html propagated-overflow-style-1-ref.html
+== propagated-overflow-style-2a.html propagated-overflow-style-2-ref.html
+== propagated-overflow-style-2b.html propagated-overflow-style-2-ref.html
+== propagated-overflow-style-2c.html propagated-overflow-style-2-ref.html
+== propagated-overflow-style-2d.html propagated-overflow-style-2-ref.html
+== propagated-overflow-style-2e.html propagated-overflow-style-2-ref.html
diff --git a/layout/reftests/transform-3d/animate-backface-hidden.html b/layout/reftests/transform-3d/animate-backface-hidden.html
index ce957bf73..27b587006 100644
--- a/layout/reftests/transform-3d/animate-backface-hidden.html
+++ b/layout/reftests/transform-3d/animate-backface-hidden.html
@@ -17,7 +17,7 @@ body { padding: 50px }
height: 200px; width: 200px;
backface-visibility: hidden;
/* use a -99.9s delay to start at 99.9% and then move to 0% */
- animation: flip 100s -99.9s linear 2;
+ animation: flip 100s -99.9s linear 2 paused;
}
</style>
@@ -27,7 +27,13 @@ body { padding: 50px }
<script>
-document.getElementById("test").addEventListener("animationiteration", IterationListener, false);
+document.getElementById("test").addEventListener("animationstart", StartListener, false);
+
+function StartListener(event) {
+ var test = document.getElementById("test");
+ test.style.animationPlayState = 'running';
+ test.addEventListener("animationiteration", IterationListener, false);
+}
function IterationListener(event) {
setTimeout(RemoveReftestWait, 0);
diff --git a/layout/reftests/transform-3d/animate-preserve3d-parent.html b/layout/reftests/transform-3d/animate-preserve3d-parent.html
index ae3fec196..d05beac6f 100644
--- a/layout/reftests/transform-3d/animate-preserve3d-parent.html
+++ b/layout/reftests/transform-3d/animate-preserve3d-parent.html
@@ -18,7 +18,7 @@ body { padding: 50px }
border: 1px solid black;
transform-style: preserve-3d;
/* use a -99.9s delay to start at 99.9% and then move to 0% */
- animation: spin 100s -99.9s linear 2;
+ animation: spin 100s -99.9s linear 2 paused;
}
#child {
@@ -39,7 +39,13 @@ body { padding: 50px }
<script>
-document.getElementById("parent").addEventListener("animationiteration", IterationListener, false);
+document.getElementById("parent").addEventListener("animationstart", StartListener, false);
+
+function StartListener(event) {
+ var test = document.getElementById("parent");
+ test.style.animationPlayState = 'running';
+ test.addEventListener("animationiteration", IterationListener, false);
+}
function IterationListener(event) {
setTimeout(RemoveReftestWait, 0);
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-items-center-nested-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-items-center-nested-001-ref.html
new file mode 100644
index 000000000..2473417b8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-items-center-nested-001-ref.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<style>
+html, body { margin: 0; padding: 0; }
+
+.content {
+ margin-top: 100px;
+ width: 200px;
+ height: 200px;
+ background: blue;
+}
+</style>
+<body>
+ <div class="content"></div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-items-center-nested-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-items-center-nested-001.html
new file mode 100644
index 000000000..b6e2fdff0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-items-center-nested-001.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test: Flexbox nested containers with align-items: center and flexible items</title>
+<link rel="match" href="flexbox-align-items-center-nested-001-ref.html">
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#align-items-property">
+<style>
+html, body { margin: 0; padding: 0; }
+body {
+ height: 400px;
+ position: relative;
+}
+
+.container-0 {
+ display: flex;
+ position: absolute;
+ height: 100%;
+ flex-direction: column;
+}
+
+.container-1 {
+ flex: 1 0 auto;
+ display: flex;
+ align-items: center;
+}
+
+.container-2 {
+ height: 100%;
+ display: flex;
+ align-items: center;
+}
+
+.content {
+ width: 200px;
+ height: 200px;
+ background: blue;
+}
+</style>
+<body>
+ <div class="container-0">
+ <div class="container-1">
+ <div class="container-2">
+ <div class="content"></div>
+ </div>
+ </div>
+ </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/reftest.list b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
index a623a0b59..fd8bfccc9 100644
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -39,6 +39,8 @@ fuzzy-if(Android,158,32) == flexbox-align-self-vert-rtl-001.xhtml flexbox-align
== flexbox-align-self-vert-rtl-003.xhtml flexbox-align-self-vert-rtl-003-ref.xhtml
== flexbox-align-self-vert-rtl-004.xhtml flexbox-align-self-vert-rtl-004-ref.xhtml
+== flexbox-align-items-center-nested-001.html flexbox-align-items-center-nested-001-ref.html
+
# Tests for computing the baseline of a flex container
== flexbox-baseline-align-self-baseline-horiz-001.html flexbox-baseline-align-self-baseline-horiz-001-ref.html
== flexbox-baseline-align-self-baseline-vert-001.html flexbox-baseline-align-self-baseline-vert-001-ref.html
diff --git a/layout/reftests/xul/css-flex-1-ref.html b/layout/reftests/xul/css-flex-1-ref.html
new file mode 100644
index 000000000..a47eb8e9c
--- /dev/null
+++ b/layout/reftests/xul/css-flex-1-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ body { margin: 0 }
+ div.ref {
+ border: 1px solid black;
+ box-sizing: border-box;
+ background: green;
+ height: 50px;
+ width: 100px;
+ }
+ </style>
+</head>
+<body>
+ <div class="ref"></div>
+</body>
+</html>
diff --git a/layout/reftests/xul/css-flex-1.xul b/layout/reftests/xul/css-flex-1.xul
new file mode 100644
index 000000000..7955373dd
--- /dev/null
+++ b/layout/reftests/xul/css-flex-1.xul
@@ -0,0 +1,153 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
+<head>
+<link rel="icon" href="/mozilla-central/static/hgicon.png" type="image/png" />
+<meta name="robots" content="index, nofollow"/>
+<link rel="stylesheet" href="/mozilla-central/static/style-gitweb.css" type="text/css" />
+
+<style type="text/css">
+div.feed {
+ float: right;
+}
+a img {
+ border-width: 0px;
+}
+div.log_link {
+ width: 80px;
+ background-color: white;
+}
+
+div.log_body {
+ padding-left: 96px;
+}
+</style>
+<script type="text/javascript" src="/mozilla-central/static/mercurial.js"></script>
+
+<link rel="stylesheet" href="/mozilla-central/highlightcss" type="text/css" />
+<title>mozilla-central: layout/reftests/xul/css-flex-1.xul@67bbef772796</title>
+<link rel="alternate" type="application/atom+xml"
+ href="/mozilla-central/atom-log" title="Atom feed for mozilla-central"/>
+<link rel="alternate" type="application/rss+xml"
+ href="/mozilla-central/rss-log" title="RSS feed for mozilla-central"/>
+</head>
+<body>
+
+<div class="page_header">
+<div class="logo"> <a href="https://developer.mozilla.org/en/docs/Mercurial"> <img src="/mozilla-central/static/moz-logo-bw-rgb.svg" alt="mercurial" /> </a> </div>
+<a href="/">Mercurial</a> &gt; <a href="/mozilla-central">mozilla-central</a> / file revision / layout/reftests/xul/css-flex-1.xul@67bbef772796
+</div>
+
+<div class="page_nav">
+<div>
+<a href="/mozilla-central/summary">summary</a> |
+<a href="/mozilla-central/shortlog">shortlog</a> |
+<a href="/mozilla-central/log">changelog</a> |
+<a href="/mozilla-central/pushloghtml">pushlog</a> |
+<a href="/mozilla-central/graph">graph</a> |
+<a href="/mozilla-central/tags">tags</a> |
+<a href="/mozilla-central/bookmarks">bookmarks</a> |
+<a href="/mozilla-central/branches">branches</a> |
+<a href="/mozilla-central/file/67bbef772796/layout/reftests/xul/">files</a> |
+<a href="/mozilla-central/rev/67bbef772796">changeset</a> |
+file |
+<a href="/mozilla-central/file/tip/layout/reftests/xul/css-flex-1.xul">latest</a> |
+<a href="/mozilla-central/log/67bbef772796/layout/reftests/xul/css-flex-1.xul">revisions</a> |
+<a href="/mozilla-central/annotate/67bbef772796/layout/reftests/xul/css-flex-1.xul">annotate</a> |
+<a href="/mozilla-central/diff/67bbef772796/layout/reftests/xul/css-flex-1.xul">diff</a> |
+<a href="/mozilla-central/comparison/67bbef772796/layout/reftests/xul/css-flex-1.xul">comparison</a> |
+<a href="/mozilla-central/raw-file/67bbef772796/layout/reftests/xul/css-flex-1.xul">raw</a> |
+<a href="/mozilla-central/help">help</a>
+</div>
+
+<div class="search">
+<form id="searchform" action="/mozilla-central/log">
+
+<input name="rev" type="text" value="" size="40" />
+<div id="hint">Find changesets by keywords (author, files, the commit message), revision
+number or hash, or <a href="/mozilla-central/help/revsets">revset expression</a>.</div>
+</form>
+</div>
+</div>
+
+<div class="title">layout/reftests/xul/css-flex-1.xul</div>
+
+<div class="title_text">
+<table cellspacing="0">
+<tr>
+ <td>author</td>
+ <td>&#68;&#97;&#110;&#105;&#101;&#108;&#32;&#72;&#111;&#108;&#98;&#101;&#114;&#116;&#32;&#60;&#100;&#104;&#111;&#108;&#98;&#101;&#114;&#116;&#64;&#99;&#115;&#46;&#115;&#116;&#97;&#110;&#102;&#111;&#114;&#100;&#46;&#101;&#100;&#117;&#62;</td>
+</tr>
+<tr>
+ <td></td>
+ <td class="date age">Wed, 08 Feb 2017 23:08:43 -0800</td>
+</tr>
+
+<tr>
+ <td>changeset 341731</td>
+ <td style="font-family:monospace"><a class="list" href="/mozilla-central/rev/67bbef772796">67bbef772796</a></td>
+</tr>
+
+
+<tr>
+ <td>permissions</td>
+ <td style="font-family:monospace">-rw-r--r--</td>
+</tr>
+</table>
+</div>
+
+<div class="page_path description"><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1338053">Bug 1338053</a>: Make nsFlexContainerFrame::MarkIntrinsicISizesDirty() also call its parent class's method. r=emilio
+
+MozReview-Commit-ID: 72oIlunLcVq</div>
+
+<div class="page_body">
+<pre class="sourcelines stripes"
+ data-logurl="/mozilla-central/log/67bbef772796/layout/reftests/xul/css-flex-1.xul"
+ data-selectabletag="SPAN"
+ data-ishead="1">
+
+<a href="#l1"></a><span id="l1">&lt;?xml version=&quot;1.0&quot;?&gt;</span>
+<a href="#l2"></a><span id="l2">&lt;window xmlns=&quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&quot;</span>
+<a href="#l3"></a><span id="l3"> class=&quot;reftest-wait&quot;</span>
+<a href="#l4"></a><span id="l4"> onload=&quot;tweak()&quot;&gt;</span>
+<a href="#l5"></a><span id="l5"> &lt;style xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;</span>
+<a href="#l6"></a><span id="l6"> &lt;![CDATA[</span>
+<a href="#l7"></a><span id="l7"> panelview {</span>
+<a href="#l8"></a><span id="l8"> border: 1px solid black;</span>
+<a href="#l9"></a><span id="l9"> background: green;</span>
+<a href="#l10"></a><span id="l10"> display: flex;</span>
+<a href="#l11"></a><span id="l11"> height: 50px;</span>
+<a href="#l12"></a><span id="l12"> }</span>
+<a href="#l13"></a><span id="l13"> ]]&gt;</span>
+<a href="#l14"></a><span id="l14"> &lt;/style&gt;</span>
+<a href="#l15"></a><span id="l15"> &lt;script&gt;</span>
+<a href="#l16"></a><span id="l16"> &lt;![CDATA[</span>
+<a href="#l17"></a><span id="l17"> function tweak() {</span>
+<a href="#l18"></a><span id="l18"> var tweakMe = document.getElementById(&quot;tweakMe&quot;);</span>
+<a href="#l19"></a><span id="l19"> tweakMe.style.width = &quot;100px&quot;;</span>
+<a href="#l20"></a><span id="l20"> document.documentElement.className = &quot;&quot;;</span>
+<a href="#l21"></a><span id="l21"> }</span>
+<a href="#l22"></a><span id="l22"> ]]&gt;</span>
+<a href="#l23"></a><span id="l23"> &lt;/script&gt;</span>
+<a href="#l24"></a><span id="l24"> &lt;hbox&gt;</span>
+<a href="#l25"></a><span id="l25"> &lt;panelview id=&quot;tweakMe&quot;&gt;&lt;/panelview&gt;</span>
+<a href="#l26"></a><span id="l26"> &lt;/hbox&gt;</span>
+<a href="#l27"></a><span id="l27">&lt;/window&gt;</span>
+</pre>
+</div>
+
+<script type="text/javascript" src="/mozilla-central/static/followlines.js"></script>
+
+<div class="page_footer">
+<div class="page_footer_text">mozilla-central</div>
+<div class="page_footer_text" style="padding-left: 10px">Deployed from <a href="https://hg.mozilla.org/hgcustom/version-control-tools/rev/bd13917afa61">bd13917afa61</a> at 2018-04-20T21:06:08Z.</div>
+<div class="rss_logo">
+<a href="/mozilla-central/rss-log">RSS</a>
+<a href="/mozilla-central/atom-log">Atom</a>
+</div>
+<br />
+
+</div>
+</body>
+</html>
+
diff --git a/layout/reftests/xul/reftest.list b/layout/reftests/xul/reftest.list
index da09b7c81..35b9f9025 100644
--- a/layout/reftests/xul/reftest.list
+++ b/layout/reftests/xul/reftest.list
@@ -1,3 +1,5 @@
+== css-flex-1.xul css-flex-1-ref.html
+
== menuitem-key.xul menuitem-key-ref.xul
# these random-if(Android) are due to differences between Android Native & Xul, see bug 732569
random-if(Android) == menulist-shrinkwrap-1.xul menulist-shrinkwrap-1-ref.xul