Bug 1015474 part 2: Add reftests for new "min-width:auto" sizing behavior on flex items. r=dbaron
authorDaniel Holbert <dholbert@cs.stanford.edu>
Tue, 22 Jul 2014 08:24:37 -0700
changeset 195516 dad1229b5cfed5e22abf910bab3f90b2deeda411
parent 195515 f5b98d327bdea311e7b8d4ceff5c1a50b414a872
child 195517 d82a0354fdcd69aca7b3e35a662890310ea3924d
push id27184
push userkwierso@gmail.com
push dateWed, 23 Jul 2014 00:39:18 +0000
treeherdermozilla-central@0ad20ad7b70a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs1015474
milestone34.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 1015474 part 2: Add reftests for new "min-width:auto" sizing behavior on flex items. r=dbaron
layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-001-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-001.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002a.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002b.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002c.html
layout/reftests/w3c-css/submitted/flexbox/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-001-ref.html
@@ -0,0 +1,41 @@
+<!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 Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style>
+      .item {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+        margin-bottom: 2px; /* (Just for spacing things out, visually) */
+      }
+
+      .small { width: 50px; }
+      .big   { width: 80px; }
+
+      .item > * {
+        /* Flex items' contents are gray & fixed-size: */
+        background: gray;
+        height: 10px;
+        width: 80px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="item small"><div></div></div>
+    <div class="item small"><div></div></div>
+    <div class="item small"><div></div></div>
+    <div class="item small"><div></div></div>
+    <div class="item small"><div></div></div>
+    <div class="item small"><div></div></div>
+
+    <div class="item big"><div></div></div>
+    <div class="item big"><div></div></div>
+    <div class="item big"><div></div></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-001.html
@@ -0,0 +1,100 @@
+<!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 Test: Testing min-width:auto</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#min-size-auto">
+    <link rel="match" href="flexbox-min-width-auto-001-ref.html">
+<!--
+     This testcase tests the used value of "min-width:auto" (the property's
+     initial value) on flex items in a horizontal flex container.
+
+     It's supposed to resolve to the smallest of:
+      a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its
+         initial value.
+      b) The computed 'max-width' property
+      c) If there's no intrinsic aspect ratio: the item's min-content width.
+      d) If there is an intrinsic aspect ratio: the item's width derived from
+         the ratio & constraints in the other dimension.
+
+    We measure what the used value is by putting flex items in a small flex
+    container, which will shrink its items down to their min-width.
+
+    This test checks for situations where we should resolve the min-width as
+    (a), (b), or (c) above. Another test will check (d).
+-->
+    <style>
+      .flexbox {
+        display: flex;
+        width: 1px;  /* No available space; shrink flex items to min-width */
+        margin-bottom: 2px; /* (Just for spacing things out, visually) */
+      }
+
+      .flexbox > * {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+      }
+
+      .flexbox > * > * {
+        /* Flex items' contents are gray & fixed-size: */
+        background: gray;
+        height: 10px;
+        width: 80px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Check for min-width:auto resolving correctly when the smallest
+         candidate value is: -->
+    <!-- *** (a) Used 'flex-basis' (from 'width') *** -->
+    <!-- First, without definite max-width: -->
+    <div class="flexbox">
+      <div style="width: 50px"><div></div></div>
+    </div>
+    <!-- ...and now with definite (& large) 'max-width': -->
+    <div class="flexbox">
+      <div style="width: 50px; max-width: 120px;"><div></div></div>
+    </div>
+    <!-- ...and now with used 'flex-basis' being a calc expression:-->
+    <div class="flexbox">
+      <div style="width: calc(10% + 50px)"><div></div></div>
+    </div>
+
+    <!-- *** (b) The computed 'max-width' *** -->
+    <!-- First, with a larger candidate 'flex-basis' value (from 'width') -->
+    <div class="flexbox">
+      <div style="width: 100px; max-width:50px"><div></div></div>
+    </div>
+    <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <div style="flex-basis: 100px; max-width:50px"><div></div></div>
+    </div>
+    <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <div style="flex-basis: 10px; max-width:50px"><div></div></div>
+    </div>
+
+    <!-- *** (c) (no intrinsic aspect ratio) The min-content size *** -->
+    <!-- First, with a larger candidate 'flex-basis' value (from 'width') -->
+    <div class="flexbox">
+      <div style="width: 100px"><div></div></div>
+    </div>
+    <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <div style="flex-basis: 100px"><div></div></div>
+    </div>
+    <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <div style="flex-basis: 10px"><div></div></div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002-ref.html
@@ -0,0 +1,26 @@
+<!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 Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style>
+      img {
+        width: 30px;
+        height: 30px;
+        display: block;
+        border: 2px dotted purple;
+        margin-bottom: 2px; /* (Just for spacing things out, visually) */
+      }
+    </style>
+  </head>
+  <body>
+    <img src="support/solidblue.png" alt="blue square">
+    <img src="support/solidblue.png" alt="blue square">
+    <img src="support/solidblue.png" alt="blue square">
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002a.html
@@ -0,0 +1,67 @@
+<!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 Test: Testing min-width:auto</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#min-size-auto">
+    <link rel="match" href="flexbox-min-width-auto-002-ref.html">
+<!--
+     This testcase tests the used value of "min-width:auto" (the property's
+     initial value) on flex items in a horizontal flex container.
+
+     It's supposed to resolve to the smallest of:
+      a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its
+         initial value.
+      b) The computed 'max-width' property
+      c) If there's no intrinsic aspect ratio: the item's min-content width.
+      d) If there is an intrinsic aspect ratio: the item's width derived from
+         the ratio & constraints in the other dimension.
+
+    We measure what the used value is by putting flex items in a small flex
+    container, which will shrink its items down to their min-width.
+
+    This test checks for situations where we should resolve the min-width as
+    (d) above, with "constraints in the other dimension" being "height".
+-->
+    <style>
+      .flexbox {
+        display: flex;
+        width: 0px;  /* No available space; shrink flex items to min-width */
+        margin-bottom: 2px; /* (Just for spacing things out, visually) */
+      }
+
+      .flexbox > * {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+        /* Flex items have sizing constraint in cross axis: */
+        height: 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Check for min-width:auto resolving correctly when the smallest
+         candidate value is: -->
+
+    <!-- *** (d) (with intrinsic aspect ratio) The width derived from ratio
+                 and constraints in the other dimension *** -->
+    <!-- First, with a larger candidate 'flex-basis' value (from 'width') -->
+    <div class="flexbox">
+      <img style="width: 100px" src="support/solidblue.png" alt="blue square">
+    </div>
+    <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square">
+    </div>
+    <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square">
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002b.html
@@ -0,0 +1,67 @@
+<!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 Test: Testing min-width:auto</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#min-size-auto">
+    <link rel="match" href="flexbox-min-width-auto-002-ref.html">
+<!--
+     This testcase tests the used value of "min-width:auto" (the property's
+     initial value) on flex items in a horizontal flex container.
+
+     It's supposed to resolve to the smallest of:
+      a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its
+         initial value.
+      b) The computed 'max-width' property
+      c) If there's no intrinsic aspect ratio: the item's min-content width.
+      d) If there is an intrinsic aspect ratio: the item's width derived from
+         the ratio & constraints in the other dimension.
+
+    We measure what the used value is by putting flex items in a small flex
+    container, which will shrink its items down to their min-width.
+
+    This test checks for situations where we should resolve the min-width as
+    (d) above, with "constraints in the other dimension" being "min-height".
+-->
+    <style>
+      .flexbox {
+        display: flex;
+        width: 0px;  /* No available space; shrink flex items to min-width */
+        margin-bottom: 2px; /* (Just for spacing things out, visually) */
+      }
+
+      .flexbox > * {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+        /* Flex items have sizing constraint in cross axis: */
+        min-height: 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Check for min-width:auto resolving correctly when the smallest
+         candidate value is: -->
+
+    <!-- *** (d) (with intrinsic aspect ratio) The width derived from ratio
+                 and constraints in the other dimension *** -->
+    <!-- First, with a larger candidate 'flex-basis' value (from 'width') -->
+    <div class="flexbox">
+      <img style="width: 100px" src="support/solidblue.png" alt="blue square">
+    </div>
+    <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square">
+    </div>
+    <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square">
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002c.html
@@ -0,0 +1,69 @@
+<!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 Test: Testing min-width:auto</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#min-size-auto">
+    <link rel="match" href="flexbox-min-width-auto-002-ref.html">
+<!--
+     This testcase tests the used value of "min-width:auto" (the property's
+     initial value) on flex items in a horizontal flex container.
+
+     It's supposed to resolve to the smallest of:
+      a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its
+         initial value.
+      b) The computed 'max-width' property
+      c) If there's no intrinsic aspect ratio: the item's min-content width.
+      d) If there is an intrinsic aspect ratio: the item's width derived from
+         the ratio & constraints in the other dimension.
+
+    We measure what the used value is by putting flex items in a small flex
+    container, which will shrink its items down to their min-width.
+
+    This test checks for situations where we should resolve the min-width as
+    (d) above, with "constraints in the other dimension" being
+    max-height-clamped "height".
+-->
+    <style>
+      .flexbox {
+        display: flex;
+        width: 0px;  /* No available space; shrink flex items to min-width */
+        margin-bottom: 2px; /* (Just for spacing things out, visually) */
+      }
+
+      .flexbox > * {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+        /* Flex items have sizing constraint in cross axis: */
+        max-height: 30px;
+        height: 60px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Check for min-width:auto resolving correctly when the smallest
+         candidate value is: -->
+
+    <!-- *** (d) (with intrinsic aspect ratio) The width derived from ratio
+                 and constraints in the other dimension *** -->
+    <!-- First, with a larger candidate 'flex-basis' value (from 'width') -->
+    <div class="flexbox">
+      <img style="width: 100px" src="support/solidblue.png" alt="blue square">
+    </div>
+    <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square">
+    </div>
+    <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square">
+    </div>
+  </body>
+</html>
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -124,16 +124,22 @@ fuzzy-if(Android,158,32) == flexbox-alig
 == 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
 == flexbox-mbp-horiz-4.xhtml             flexbox-mbp-horiz-4-ref.xhtml
 
+# Tests for min-height:auto / min-width:auto on flex items
+== flexbox-min-width-auto-001.html flexbox-min-width-auto-001-ref.html
+== flexbox-min-width-auto-002a.html flexbox-min-width-auto-002-ref.html
+fails == flexbox-min-width-auto-002b.html flexbox-min-width-auto-002-ref.html # Bug 1041019
+== flexbox-min-width-auto-002c.html flexbox-min-width-auto-002-ref.html
+
 # 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