Bug 948654: Uncomment lines to make 'align-content' and 'flex-wrap' inherit through scroll frames to scrolled flex containers. r=mats a=lsblakk
authorDaniel Holbert <dholbert@cs.stanford.edu>
Tue, 10 Dec 2013 22:31:38 -0800
changeset 168748 0fa5f4f29f7f
parent 168747 1f6414b3f4f0
child 168749 f398ed5ac36a
push id4726
push userdholbert@mozilla.com
push date2013-12-13 20:28 +0000
treeherdermozilla-aurora@0fa5f4f29f7f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmats, lsblakk
bugs948654
milestone28.0a2
Bug 948654: Uncomment lines to make 'align-content' and 'flex-wrap' inherit through scroll frames to scrolled flex containers. r=mats a=lsblakk
layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-4-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-4.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-5-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-5.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-4-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-4.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-5-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-5.html
layout/reftests/w3c-css/submitted/flexbox/reftest.list
layout/style/ua.css
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-3-ref.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-4-ref.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-3-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-4-ref.html
@@ -6,43 +6,43 @@
 <html>
 <head>
  <title>CSS Reftest Reference</title>
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <style>
     .flexContainer {
       background: purple;
       display: flex;
-      justify-content: space-around;
+      flex-wrap: wrap;
       width: 70px;
       height: 70px;
       float: left;
       margin-right: 5px;
     }
     .bigItem {
       background: blue;
-      width: 20px;
+      width: 50px;
       height: 200px;
     }
     .smallItem {
       background: teal;
-      width: 20px;
+      width: 50px;
       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;
+         just use a smaller height that exactly fits the space remaining
+         in our container, after wrapping */
+      height: 50px;
     }
   </style>
 </head>
 <body>
   <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="smallItem"></div>
     <div class="bigItem"></div>
-    <div class="smallItem"></div>
   </div>
   <div class="flexContainer hidden">
+    <div class="smallItem"></div>
     <div class="bigItem"></div>
-    <div class="smallItem"></div>
   </div>
 </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-3.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-4.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-3.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-4.html
@@ -1,49 +1,49 @@
 <!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
+<!-- This testcase checks that we honor "flex-wrap" 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. -->
+     large enough that it overflows the container in the cross axis, to be
+     sure that "overflow: hidden" is actually applying. -->
 <html>
 <head>
-  <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'justify-content: space-around'</title>
+  <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'flex-wrap: wrap'</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-containers">
-  <link rel="match" href="flexbox-overflow-horiz-3-ref.html">
+  <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-wrap-property">
+  <link rel="match" href="flexbox-overflow-horiz-4-ref.html">
   <style>
     .flexContainer {
       background: purple;
       display: flex;
-      justify-content: space-around;
+      flex-wrap: wrap;
       width: 70px;
       height: 70px;
       float: left;
       margin-right: 5px;
     }
     .bigItem {
       background: blue;
-      width: 20px;
+      width: 50px;
       height: 200px;
     }
     .smallItem {
       background: teal;
-      width: 20px;
+      width: 50px;
       height: 20px;
     }
     .hidden { overflow: hidden }
   </style>
 </head>
 <body>
   <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="smallItem"></div>
     <div class="bigItem"></div>
-    <div class="smallItem"></div>
   </div>
   <div class="flexContainer hidden">
+    <div class="smallItem"></div>
     <div class="bigItem"></div>
-    <div class="smallItem"></div>
   </div>
 </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-3-ref.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-5-ref.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-3-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-5-ref.html
@@ -6,37 +6,39 @@
 <html>
 <head>
  <title>CSS Reftest Reference</title>
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <style>
     .flexContainer {
       background: purple;
       display: flex;
-      justify-content: space-around;
+      flex-wrap: wrap;
+      align-content: space-around;
       width: 70px;
       height: 70px;
       float: left;
       margin-right: 5px;
     }
     .bigItem {
       background: blue;
-      width: 20px;
-      height: 200px;
+      flex: none; /* prevent shrinking (so we can intentionally overflow) */
+      width: 72px;
+      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
+         just use a smaller width that exactly fits our container (and
          doesn't overflow). */
-      height: 70px;
+      width: 70px;
     }
   </style>
 </head>
 <body>
   <div class="flexContainer"><!-- (overflow un-set) -->
     <div class="bigItem"></div>
     <div class="smallItem"></div>
   </div>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-3.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-5.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-3.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-5.html
@@ -1,37 +1,39 @@
 <!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
+<!-- This testcase checks that we honor "align-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. -->
+     large enough that it overflows the container in the main axis, to be
+     sure that "overflow: hidden" is actually applying. -->
 <html>
 <head>
-  <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'justify-content: space-around'</title>
+  <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'align-content: space-around'</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-containers">
-  <link rel="match" href="flexbox-overflow-horiz-3-ref.html">
+  <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#align-content-property">
+  <link rel="match" href="flexbox-overflow-horiz-5-ref.html">
   <style>
     .flexContainer {
       background: purple;
       display: flex;
-      justify-content: space-around;
+      flex-wrap: wrap;
+      align-content: space-around;
       width: 70px;
       height: 70px;
       float: left;
       margin-right: 5px;
     }
     .bigItem {
       background: blue;
-      width: 20px;
-      height: 200px;
+      flex: none; /* prevent shrinking (so we can intentionally overflow) */
+      width: 72px;
+      height: 20px;
     }
     .smallItem {
       background: teal;
       width: 20px;
       height: 20px;
     }
     .hidden { overflow: hidden }
   </style>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-3-ref.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-4-ref.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-3-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-4-ref.html
@@ -7,42 +7,42 @@
 <head>
  <title>CSS Reftest Reference</title>
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <style>
     .flexContainer {
       background: purple;
       display: flex;
       flex-direction: column;
-      justify-content: space-around;
+      flex-wrap: wrap;
       width: 70px;
       height: 70px;
       margin-bottom: 5px;
     }
     .bigItem {
       background: blue;
       width: 200px;
-      height: 20px;
+      height: 50px;
     }
     .smallItem {
       background: teal;
       width: 20px;
-      height: 20px;
+      height: 50px;
     }
     .hidden > .bigItem {
       /* To match the testcase's "overflow:hidden"-cropped flex item, we
-         just use a smaller width that exactly fits our container (and
-         doesn't overflow). */
-      width: 70px;
+         just use a smaller width that exactly fits the space remaining
+         in our container, after wrapping */
+      width: 50px;
     }
   </style>
 </head>
 <body>
   <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="smallItem"></div>
     <div class="bigItem"></div>
-    <div class="smallItem"></div>
   </div>
   <div class="flexContainer hidden">
+    <div class="smallItem"></div>
     <div class="bigItem"></div>
-    <div class="smallItem"></div>
   </div>
 </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-3.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-4.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-3.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-4.html
@@ -1,49 +1,49 @@
 <!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
+<!-- This testcase checks that we honor "flex-wrap" 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. -->
+     large enough that it overflows the container in the cross axis, to be
+     sure that "overflow: hidden" is actually applying. -->
 <html>
 <head>
-  <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'justify-content: space-around'</title>
+  <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'flex-wrap: wrap'</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-containers">
-  <link rel="match" href="flexbox-overflow-vert-3-ref.html">
+  <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-wrap-property">
+  <link rel="match" href="flexbox-overflow-vert-4-ref.html">
   <style>
     .flexContainer {
       background: purple;
       display: flex;
       flex-direction: column;
-      justify-content: space-around;
+      flex-wrap: wrap;
       width: 70px;
       height: 70px;
       margin-bottom: 5px;
     }
     .bigItem {
       background: blue;
       width: 200px;
-      height: 20px;
+      height: 50px;
     }
     .smallItem {
       background: teal;
       width: 20px;
-      height: 20px;
+      height: 50px;
     }
     .hidden { overflow: hidden }
   </style>
 </head>
 <body>
   <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="smallItem"></div>
     <div class="bigItem"></div>
-    <div class="smallItem"></div>
   </div>
   <div class="flexContainer hidden">
+    <div class="smallItem"></div>
     <div class="bigItem"></div>
-    <div class="smallItem"></div>
   </div>
 </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-3-ref.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-5-ref.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-3-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-5-ref.html
@@ -7,36 +7,38 @@
 <head>
  <title>CSS Reftest Reference</title>
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <style>
     .flexContainer {
       background: purple;
       display: flex;
       flex-direction: column;
-      justify-content: space-around;
+      flex-wrap: wrap;
+      align-content: space-around;
       width: 70px;
       height: 70px;
       margin-bottom: 5px;
     }
     .bigItem {
       background: blue;
-      width: 200px;
-      height: 20px;
+      flex: none; /* prevent shrinking (so we can intentionally overflow) */
+      width: 20px;
+      height: 72px;
     }
     .smallItem {
       background: teal;
       width: 20px;
       height: 20px;
     }
     .hidden > .bigItem {
       /* To match the testcase's "overflow:hidden"-cropped flex item, we
-         just use a smaller width that exactly fits our container (and
+         just use a smaller height that exactly fits our container (and
          doesn't overflow). */
-      width: 70px;
+      height: 70px;
     }
   </style>
 </head>
 <body>
   <div class="flexContainer"><!-- (overflow un-set) -->
     <div class="bigItem"></div>
     <div class="smallItem"></div>
   </div>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-3.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-5.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-3.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-5.html
@@ -1,37 +1,39 @@
 <!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
+<!-- This testcase checks that we honor "align-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. -->
+     large enough that it overflows the container in the main axis, to be
+     sure that "overflow: hidden" is actually applying. -->
 <html>
 <head>
-  <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'justify-content: space-around'</title>
+  <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'align-content: space-around'</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-  <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-containers">
-  <link rel="match" href="flexbox-overflow-vert-3-ref.html">
+  <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#align-content-property">
+  <link rel="match" href="flexbox-overflow-vert-5-ref.html">
   <style>
     .flexContainer {
       background: purple;
       display: flex;
       flex-direction: column;
-      justify-content: space-around;
+      flex-wrap: wrap;
+      align-content: space-around;
       width: 70px;
       height: 70px;
       margin-bottom: 5px;
     }
     .bigItem {
       background: blue;
-      width: 200px;
-      height: 20px;
+      flex: none; /* prevent shrinking (so we can intentionally overflow) */
+      width: 20px;
+      height: 72px;
     }
     .smallItem {
       background: teal;
       width: 20px;
       height: 20px;
     }
     .hidden { overflow: hidden }
   </style>
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -101,19 +101,23 @@ fuzzy-if(Android,158,32) == flexbox-alig
 == flexbox-mbp-horiz-3.xhtml             flexbox-mbp-horiz-3-ref.xhtml
 == flexbox-mbp-horiz-3-reverse.xhtml     flexbox-mbp-horiz-3-reverse-ref.xhtml
 == flexbox-mbp-horiz-4.xhtml             flexbox-mbp-horiz-4-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-horiz-4.html flexbox-overflow-horiz-4-ref.html
+== flexbox-overflow-horiz-5.html flexbox-overflow-horiz-5-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
+== flexbox-overflow-vert-4.html flexbox-overflow-vert-4-ref.html
+== flexbox-overflow-vert-5.html flexbox-overflow-vert-5-ref.html
 
 # Tests for the order in which we paint flex items
 == flexbox-paint-ordering-1.xhtml flexbox-paint-ordering-1-ref.xhtml
 == flexbox-paint-ordering-2.xhtml flexbox-paint-ordering-2-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
--- a/layout/style/ua.css
+++ b/layout/style/ua.css
@@ -137,20 +137,20 @@
      blocks with overflow: scroll; */
   unicode-bidi: inherit;
   text-overflow: inherit;
   -moz-column-count: inherit;
   -moz-column-width: inherit;
   -moz-column-gap: inherit;
   -moz-column-rule: inherit;
   /* CSS3 flexbox properties that apply to the flex container: */
-  /* align-content: inherit; FIXME: not yet supported (bug 702508) */
+  align-content: inherit;
   align-items: inherit;
   flex-direction: inherit;
-  /* flex-wrap: inherit; FIXME: not yet supported (bug 702508) */
+  flex-wrap: inherit;
   justify-content: inherit;
   /* Do not change these. nsCSSFrameConstructor depends on them to create a good
      frame tree. */
   position: static !important;
   float: none !important;
 }
 
 *|*::-moz-viewport, *|*::-moz-viewport-scroll, *|*::-moz-canvas, *|*::-moz-scrolled-canvas {