summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-004.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-004.html')
-rw-r--r--testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-004.html63
1 files changed, 63 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-004.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-004.html
new file mode 100644
index 0000000000..a04b9b573e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-004.html
@@ -0,0 +1,63 @@
+<!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-height:auto & 'overflow' interaction</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">
+ <link rel="match" href="flexbox-min-height-auto-004-ref.html">
+<!--
+ This testcase checks how "overflow-x" indirectly impacts the sizing
+ behavior of flex items with "min-height:auto" (the new initial value
+ for "min-height"), via its influence on "overflow-y".
+
+ In particular, the flex-item-specific "min-height:auto" behavior is
+ supposed to be disabled (e.g. we end up with min-height:0) when
+ "overflow-y" is non-"visible". Moreover, when "overflow-x" is set to a
+ scrolling value, it forces "overflow-y" to compute to a scrolling value
+ as well, as described at
+ http://www.w3.org/TR/css-overflow-3/#overflow-properties
+ So, "overflow-x" has an indirect effect (via "overflow-y") here.
+-->
+ <style>
+ .flexbox {
+ display: flex;
+ flex-direction: column;
+ height: 30px; /* Shrink flex items below min-height */
+ margin-right: 2px; /* (Just for spacing things out, visually) */
+ float: left;
+ }
+
+ .flexbox > * {
+ /* Flex items have purple border: */
+ border: 2px dotted purple;
+ }
+
+ .flexbox > * > * {
+ /* Flex items' contents are gray & fixed-size: */
+ background: gray;
+ width: 40px;
+ height: 80px;
+ }
+
+ .xvisible { overflow-x: visible; }
+ .xhidden { overflow-x: hidden; }
+ .xscroll { overflow-x: scroll; }
+ .xauto { overflow-x: auto; }
+ </style>
+ </head>
+ <body>
+ <!-- min-height:auto should prevent shrinking below intrinsic height when
+ the flex item has "overflow-x: visible", but not for any other
+ overflow-x values (because of overflow-x's influence on overflow-y).
+ -->
+ <div class="flexbox"><div class="xvisible"><div></div></div></div>
+ <div class="flexbox"><div class="xhidden"><div></div></div></div>
+ <div class="flexbox"><div class="xscroll"><div></div></div></div>
+ <div class="flexbox"><div class="xauto"><div></div></div></div>
+ </body>
+</html>