layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-2.xhtml@925c144e1f1f
layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-2.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 testcase checks how "min-height" and "max-height" affect the sizing
8 of horizontal flex containers that have no explicit "height" property.
9 -->
10 <html xmlns="http://www.w3.org/1999/xhtml">
11 <head>
12 <title>CSS Test: Testing sizing of an auto-sized horizontal flex container with min-height and max-height constraints</title>
13 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
14 <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#layout-algorithm"/>
15 <link rel="match" href="flexbox-sizing-horiz-2-ref.xhtml"/>
16 <style>
17 div { width: 200px; }
18 div.flexbox {
19 border: 1px dashed blue;
20 background: lightgreen;
21 font-size: 10px;
22 display: flex;
23 margin-bottom: 5px;
24 }
25 </style>
26 </head>
27 <body>
28 <!-- auto-height horizontal flexbox should shrinkwrap its contents. -->
29 <div class="flexbox">
30 <div>text</div>
31 </div>
33 <!-- Adding a small min-size shouldn't affect that. -->
34 <div class="flexbox" style="min-height: 2px">
35 <div>text</div>
36 </div>
38 <!-- ...nor should a large max-size. -->
39 <div class="flexbox" style="max-height: 300px">
40 <div>text</div>
41 </div>
43 <!-- OK. Now, if we set a minimum size that's larger than the shrinkwrap
44 size, we should jump up to that size.-->
45 <div class="flexbox" style="min-height: 30px">
46 <div>text</div>
47 </div>
49 <!-- If we set a maximum size that's smaller than the shrinkwrap size,
50 we should max out at that size.-->
51 <div class="flexbox" style="max-height: 6px">
52 <div>text</div>
53 </div>
55 <!-- But if we add a min-size, it beats the max-size. -->
56 <div class="flexbox" style="min-height: 30px; max-height: 5px">
57 <div>text</div>
58 </div>
60 </body>
61 </html>
