layout/reftests/flexbox/flexbox-minSize-horiz-1-ref.xhtml@7e26c7da4463
layout/reftests/flexbox/flexbox-minSize-horiz-1-ref.xhtml
Wed, 31 Dec 2014 06:55:50 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:55:50 +0100
- changeset 2
- 7e26c7da4463
- permissions
- -rw-r--r--
Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2
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 <html xmlns="http://www.w3.org/1999/xhtml">
7 <head>
8 <style>
9 div.flexbox {
10 width: 200px;
11 font-size: 8px;
12 }
13 div.outerContainer {
14 border: 1px dotted black;
15 height: 42px;
16 margin-bottom: 5px;
17 }
18 div.flexbox > * {
19 vertical-align: top;
20 display: inline-block;
21 margin-right: 20px;
22 border: 1px dashed green;
23 background: lightblue;
24 height: 40px;
25 }
26 div.childMinSizeIsMinContent > * {
27 min-width: -moz-min-content;
28 }
29 div.childSizeIsMinContent > * {
30 width: -moz-min-content;
31 }
32 div.smallSize { width: 5px; }
33 div.smallFlexBasis { width: 2px; }
34 div.zeroWidth { width: 0; }
36 </style>
37 </head>
38 <body>
40 <!-- Check that we use the min-content width as a lower-bound when sizing
41 flex items. -->
42 <div class="flexbox childMinSizeIsMinContent outerContainer">
43 <div>abc d e f</div
44 ><div class="smallSize">abc d e f</div
45 ><div class="smallFlexBasis">abc d e f</div>
46 </div>
48 <!-- ... EVEN if our flex container is small and we're overflowing. -->
49 <div class="outerContainer smallSize">
50 <div class="flexbox childSizeIsMinContent">
51 <div>abc d e f</div
52 ><div>abc d e f</div
53 ><div>abc d e f</div>
54 </div>
55 </div>
57 <!-- Test that "min-width: 0" on flex items will keep us from clamping to
58 the min-content width. (So we can now actually honor small 'width'
59 and 'flex-basis' values.) -->
60 <div class="flexbox outerContainer">
61 <div>abc d e f</div
62 ><div class="smallSize">abc d e f</div
63 ><div class="smallFlexBasis">abc d e f</div>
64 </div>
66 <!-- ... and similarly, when we have a small flex container and we trigger
67 shrinking behavior, flex items with "min-width: 0" are allowed to
68 shrink past their min-content width. -->
69 <div class="outerContainer smallSize">
70 <div class="flexbox">
71 <div class="zeroWidth">abc d e f</div
72 ><div class="zeroWidth">abc d e f</div
73 ><div class="zeroWidth">abc d e f</div>
74 </div>
75 </div>
77 </body>
78 </html>
