Bug 782441 part 3: Reftests for flex containers with "overflow:hidden|scroll|auto". r=bz
authorDaniel Holbert <dholbert@cs.stanford.edu>
Fri, 22 Mar 2013 08:13:50 -0700
changeset 125929 1d7b2eafeebcd7863173737b09a9d29a3c1e5813
parent 125928 472f6793e512f9c585b648801970a3607bbfecb3
child 125930 2250dcdfd268527df615e7017eb4125981f3d524
push id25173
push userdholbert@mozilla.com
push dateFri, 22 Mar 2013 15:14:44 +0000
treeherdermozilla-inbound@1d7b2eafeebc [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbz
bugs782441
milestone22.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 782441 part 3: Reftests for flex containers with "overflow:hidden|scroll|auto". r=bz
layout/reftests/flexbox/flexbox-overflow-horiz-1-ref.html
layout/reftests/flexbox/flexbox-overflow-horiz-1.html
layout/reftests/flexbox/flexbox-overflow-horiz-2-ref.html
layout/reftests/flexbox/flexbox-overflow-horiz-2.html
layout/reftests/flexbox/flexbox-overflow-horiz-3-ref.html
layout/reftests/flexbox/flexbox-overflow-horiz-3.html
layout/reftests/flexbox/flexbox-overflow-vert-1-ref.html
layout/reftests/flexbox/flexbox-overflow-vert-1.html
layout/reftests/flexbox/flexbox-overflow-vert-2-ref.html
layout/reftests/flexbox/flexbox-overflow-vert-2.html
layout/reftests/flexbox/flexbox-overflow-vert-3-ref.html
layout/reftests/flexbox/flexbox-overflow-vert-3.html
layout/reftests/flexbox/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-overflow-horiz-1-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <style>
+    .flexContainer {
+      background: purple;
+      width: 70px;
+      height: 70px;
+      float: left;
+      margin-right: 5px;
+    }
+    .bigItem {
+      background: blue;
+      display: inline-block;
+      height: 200px;
+      width: 75%;
+      float: left;
+    }
+    .smallItem {
+      background: teal;
+      width: 25%;
+      /* In the testcase, we'll stretch to container's height,
+         minus our 10px margin-bottom. */
+      height: calc(100% - 10px);
+      float: left;
+    }
+    .scroll { overflow: scroll }
+    .auto   { overflow: auto   }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer scroll">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer auto">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-overflow-horiz-1.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we correctly handle the "overflow" property on
+     a horizontal flex container with overflowing contents. -->
+<html>
+<head>
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      width: 70px;
+      height: 70px;
+      float: left;
+      margin-right: 5px;
+    }
+    .bigItem {
+      background: blue;
+      height: 200px;
+      flex: 3;
+    }
+    .smallItem {
+      background: teal;
+      margin-bottom: 10px;
+      flex: 1;
+    }
+    .scroll { overflow: scroll }
+    .auto   { overflow: auto   }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer scroll">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer auto">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-overflow-horiz-2-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      align-items: center;
+      width: 70px;
+      height: 70px;
+      float: left;
+      margin-right: 5px;
+    }
+    .bigItem {
+      background: blue;
+      height: 10px;
+      /* Tall border (taller than our container): */
+      border: solid coral;
+      border-width: 50px 2px;
+      flex: 3;
+    }
+    .smallItem {
+      background: teal;
+      height: 20px;
+      flex: 1;
+    }
+    .hidden > .bigItem {
+      /* To match the testcase's "overflow:hidden"-cropped flex item, we
+         just use a smaller border that exactly fits our container (and
+         doesn't overflow). */
+      border-width: 30px 2px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-overflow-horiz-2.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we honor "align-items" on a horizontal
+     flex container that has "overflow: hidden".  We use a huge border on
+     one of the flex items, large enough that it overflows the container,
+     to be sure that "overflow: hidden" is actually applying. -->
+<html>
+<head>
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      align-items: center;
+      width: 70px;
+      height: 70px;
+      float: left;
+      margin-right: 5px;
+    }
+    .bigItem {
+      background: blue;
+      height: 10px;
+      /* Tall border (taller than our container): */
+      border: solid coral;
+      border-width: 50px 2px;
+      flex: 3;
+    }
+    .smallItem {
+      background: teal;
+      height: 20px;
+      flex: 1;
+    }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-overflow-horiz-3-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>
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      justify-content: space-around;
+      width: 70px;
+      height: 70px;
+      float: left;
+      margin-right: 5px;
+    }
+    .bigItem {
+      background: blue;
+      width: 20px;
+      height: 200px;
+    }
+    .smallItem {
+      background: teal;
+      width: 20px;
+      height: 20px;
+    }
+    .hidden > .bigItem {
+      /* To match the testcase's "overflow:hidden"-cropped flex item, we
+         just use a smaller height that exactly fits our container (and
+         doesn't overflow). */
+      height: 70px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-overflow-horiz-3.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we honor "justify-content" on a horizontal
+     flex container that has "overflow:hidden".  We use a large flex item,
+     large enough that it overflows the container, to be sure that
+     "overflow: hidden" is actually applying. -->
+<html>
+<head>
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      justify-content: space-around;
+      width: 70px;
+      height: 70px;
+      float: left;
+      margin-right: 5px;
+    }
+    .bigItem {
+      background: blue;
+      width: 20px;
+      height: 200px;
+    }
+    .smallItem {
+      background: teal;
+      width: 20px;
+      height: 20px;
+    }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-overflow-vert-1-ref.html
@@ -0,0 +1,47 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <style>
+    .flexContainer {
+      background: purple;
+      width: 70px;
+      height: 70px;
+      margin-bottom: 5px;
+    }
+    .bigItem {
+      width: 200px;
+      background: blue;
+      height: 75%;
+    }
+    .smallItem {
+      background: teal;
+      margin-right: 10px;
+      height: 25%;
+    }
+    .scroll { overflow: scroll }
+    .auto   { overflow: auto   }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer scroll">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer auto">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-overflow-vert-1.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we correctly handle the "overflow" property on
+     a vertical flex container with overflowing contents. -->
+<html>
+<head>
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      flex-direction: column;
+      width: 70px;
+      height: 70px;
+      margin-bottom: 5px;
+    }
+    .bigItem {
+      background: blue;
+      width: 200px;
+      flex: 3;
+    }
+    .smallItem {
+      background: teal;
+      margin-right: 10px;
+      flex: 1;
+    }
+    .scroll { overflow: scroll }
+    .auto   { overflow: auto   }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer scroll">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer auto">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-overflow-vert-2-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 70px;
+      height: 70px;
+      margin-bottom: 5px;
+    }
+    .bigItem {
+      background: blue;
+      width: 10px;
+      /* Tall border (taller than our container): */
+      border: solid coral;
+      border-width: 2px 50px;
+      flex: 3;
+    }
+    .smallItem {
+      background: teal;
+      width: 20px;
+      flex: 1;
+    }
+    .hidden > .bigItem {
+      /* To match the testcase's "overflow:hidden"-cropped flex item, we
+         just use a smaller border that exactly fits our container (and
+         doesn't overflow). */
+      border-width: 2px 30px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-overflow-vert-2.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we honor "align-items" on a vertical
+     flex container that has "overflow: hidden".  We use a huge border on
+     one of the flex items, large enough that it overflows the container,
+     to be sure that "overflow: hidden" is actually applying. -->
+<html>
+<head>
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 70px;
+      height: 70px;
+      margin-bottom: 5px;
+    }
+    .bigItem {
+      background: blue;
+      width: 10px;
+      /* Tall border (taller than our container): */
+      border: solid coral;
+      border-width: 2px 50px;
+      flex: 3;
+    }
+    .smallItem {
+      background: teal;
+      width: 20px;
+      flex: 1;
+    }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-overflow-vert-3-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>
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      width: 70px;
+      height: 70px;
+      margin-bottom: 5px;
+    }
+    .bigItem {
+      background: blue;
+      width: 200px;
+      height: 20px;
+    }
+    .smallItem {
+      background: teal;
+      width: 20px;
+      height: 20px;
+    }
+    .hidden > .bigItem {
+      /* To match the testcase's "overflow:hidden"-cropped flex item, we
+         just use a smaller height that exactly fits our container (and
+         doesn't overflow). */
+      width: 70px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-overflow-vert-3.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we honor "justify-content" on a vertical
+     flex container that has "overflow:hidden".  We use a large flex item,
+     large enough that it overflows the container, to be sure that
+     "overflow: hidden" is actually applying. -->
+<html>
+<head>
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      width: 70px;
+      height: 70px;
+      margin-bottom: 5px;
+    }
+    .bigItem {
+      background: blue;
+      width: 200px;
+      height: 20px;
+    }
+    .smallItem {
+      background: teal;
+      width: 20px;
+      height: 20px;
+    }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
--- a/layout/reftests/flexbox/reftest.list
+++ b/layout/reftests/flexbox/reftest.list
@@ -167,16 +167,24 @@ HTTP(..) == flexbox-intrinsic-sizing-hor
 == flexbox-mbp-horiz-1-reverse.xhtml     flexbox-mbp-horiz-1-reverse-ref.xhtml
 == flexbox-mbp-horiz-1-rtl.xhtml         flexbox-mbp-horiz-1-reverse-ref.xhtml
 == flexbox-mbp-horiz-1-rtl-reverse.xhtml flexbox-mbp-horiz-1-ref.xhtml
 == flexbox-mbp-horiz-2a.xhtml            flexbox-mbp-horiz-2-ref.xhtml
 == flexbox-mbp-horiz-2b.xhtml            flexbox-mbp-horiz-2-ref.xhtml
 == flexbox-mbp-horiz-3.xhtml             flexbox-mbp-horiz-3-ref.xhtml
 == flexbox-mbp-horiz-3-reverse.xhtml     flexbox-mbp-horiz-3-reverse-ref.xhtml
 
+# Tests for flex containers with the "overflow" property set
+== flexbox-overflow-horiz-1.html flexbox-overflow-horiz-1-ref.html
+== flexbox-overflow-horiz-2.html flexbox-overflow-horiz-2-ref.html
+== flexbox-overflow-horiz-3.html flexbox-overflow-horiz-3-ref.html
+== flexbox-overflow-vert-1.html flexbox-overflow-vert-1-ref.html
+== flexbox-overflow-vert-2.html flexbox-overflow-vert-2-ref.html
+== flexbox-overflow-vert-3.html flexbox-overflow-vert-3-ref.html
+
 # Tests for flexbox in an iframe that gets resized.
 skip-if(B2G) == flexbox-resizeviewport-1.xhtml flexbox-resizeviewport-1-ref.xhtml
 
 # Tests for sizing of flex containers, e.g. under min/max size constraints
 == flexbox-sizing-horiz-1.xhtml flexbox-sizing-horiz-1-ref.xhtml
 == flexbox-sizing-horiz-2.xhtml flexbox-sizing-horiz-2-ref.xhtml
 == flexbox-sizing-vert-1.xhtml  flexbox-sizing-vert-1-ref.xhtml
 == flexbox-sizing-vert-2.xhtml  flexbox-sizing-vert-2-ref.xhtml