layout/reftests/flexbox/flexbox-minSize-vert-1.xhtml@925c144e1f1f
layout/reftests/flexbox/flexbox-minSize-vert-1.xhtml
Fri, 16 Jan 2015 18:13:44 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Fri, 16 Jan 2015 18:13:44 +0100
- branch
- TOR_BUG_9701
- changeset 14
- 925c144e1f1f
- permissions
- -rw-r--r--
Integrate suggestion from review to improve consistency with existing code.
1 <?xml version="1.0" encoding="UTF-8"?>
2 <!--
3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
5 -->
6 <!--
7 This test checks that we correctly handle flex items with an explicit
8 "min-height: -moz-min-content".
10 We check that such flex items can't shrink below their min-content height,
11 unless we explicitly reduce their min-height with e.g. "min-height: 0".
12 -->
13 <html xmlns="http://www.w3.org/1999/xhtml">
14 <head>
15 <style>
16 div.flexbox {
17 height: 140px;
18 display: flex;
19 flex-direction: column;
20 margin-right: 5px;
21 font-size: 8px;
22 border: 1px dotted black;
23 float: left;
24 }
25 div.flexbox > * {
26 margin-bottom: 20px;
27 border: 1px dashed green;
28 background: lightblue;
29 width: 40px;
30 min-height: -moz-min-content; /* not yet supported -- see bug 852367 */
31 }
32 div.smallSize { height: 5px; }
33 div.smallFlexBasis { flex-basis: 2px; }
34 div.zeroMinHeight { min-height: 0; }
36 </style>
37 </head>
38 <body>
40 <!-- Check that we honor "min-height: min-content" as a lower-bound when
41 sizing flex items. -->
42 <div class="flexbox">
43 <div>a b</div>
44 <div class="smallSize">a b</div>
45 <div class="smallFlexBasis">a b</div>
46 </div>
48 <!-- ... EVEN if our flex container is small and we're overflowing. -->
49 <div class="flexbox smallSize">
50 <div>a b</div>
51 <div class="smallSize">a b</div>
52 <div class="smallFlexBasis">a b</div>
53 </div>
55 <!-- Test that we don't clamp when we've got "min-height: 0" on our
56 flex items, though. -->
57 <div class="flexbox">
58 <div class="zeroMinHeight">a b</div>
59 <div class="zeroMinHeight smallSize">a b</div>
60 <div class="zeroMinHeight smallFlexBasis">a b</div>
61 </div>
63 <!-- ... and similarly, when we have a small flex container and we trigger
64 shrinking behavior, flex items with "min-height: 0" are allowed to
65 shrink past their min-content height. -->
66 <div class="flexbox smallSize">
67 <div class="zeroMinHeight">a b</div>
68 <div class="zeroMinHeight smallSize">a b</div>
69 <div class="zeroMinHeight smallFlexBasis">a b</div>
70 </div>
72 </body>
73 </html>
