layout/reftests/flexbox/pagination/flexbox-empty-2c.html@a63d609f5ebe
layout/reftests/flexbox/pagination/flexbox-empty-2c.html
Thu, 15 Jan 2015 15:55:04 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 15:55:04 +0100
- branch
- TOR_BUG_9701
- changeset 9
- a63d609f5ebe
- permissions
- -rw-r--r--
Back out 97036ab72558 which inappropriately compared turds to third parties.
1 <!DOCTYPE html>
2 <!-- Any copyright is dedicated to the Public Domain.
3 http://creativecommons.org/publicdomain/zero/1.0/ -->
4 <!-- Testcase for how we fragment an empty fixed-height flex container, with
5 margin/border/padding that are larger than the available height,
6 and with the flex container having "flex-direction: column".
7 -->
8 <html>
9 <head>
10 <style>
11 .multicol {
12 height: 10px;
13 width: 100px;
14 -moz-column-width: 20px;
15 -moz-column-fill: auto;
16 border: 2px solid orange;
17 margin-bottom: 2px;
18 }
19 .flexContainer {
20 display: flex;
21 flex-direction: column;
22 background: teal;
23 /* border-width is 0 by default; some sub-testcases will increase it. */
24 border: 0 dashed black;
25 }
26 </style>
27 </head>
28 <body>
29 <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
30 <!-- =================================== -->
31 <!-- margin-top is the available height: -->
32 <div class="multicol">
33 <div class="flexContainer" style="height: 8px;
34 margin-top: 10px"></div>
35 </div>
37 <!-- margin-top is larger than available height: -->
38 <div class="multicol">
39 <div class="flexContainer" style="height: 8px;
40 margin-top: 11px"></div>
41 </div>
43 <!-- margin-bottom is exactly the available height: -->
44 <div class="multicol">
45 <div class="flexContainer" style="height: 8px;
46 margin-bottom: 10px"></div>
47 </div>
49 <!-- margin-bottom is larger than available height: -->
50 <div class="multicol">
51 <div class="flexContainer" style="height: 8px;
52 margin-bottom: 11px"></div>
53 </div>
55 <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
56 <!-- =================================== -->
57 <!-- border-top-width is the available height: -->
58 <div class="multicol">
59 <div class="flexContainer" style="height: 8px;
60 border-top-width: 10px"></div>
61 </div>
63 <!-- border-top-width is larger than available height: -->
64 <div class="multicol">
65 <div class="flexContainer" style="height: 8px;
66 border-top-width: 11px"></div>
67 </div>
69 <!-- border-bottom-width is exactly the available height: -->
70 <div class="multicol">
71 <div class="flexContainer" style="height: 8px;
72 border-bottom-width: 10px"></div>
73 </div>
75 <!-- border-bottom-width is larger than available height: -->
76 <div class="multicol">
77 <div class="flexContainer" style="height: 8px;
78 border-bottom-width: 11px"></div>
79 </div>
81 <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
82 <!-- ==================================== -->
83 <!-- padding-top is the available height: -->
84 <div class="multicol">
85 <div class="flexContainer" style="height: 8px;
86 padding-top: 10px"></div>
87 </div>
89 <!-- padding-top is larger than available height: -->
90 <div class="multicol">
91 <div class="flexContainer" style="height: 8px;
92 padding-top: 11px"></div>
93 </div>
95 <!-- padding-bottom is exactly the available height: -->
96 <div class="multicol">
97 <div class="flexContainer" style="height: 8px;
98 padding-bottom: 10px"></div>
99 </div>
101 <!-- padding-bottom is larger than available height: -->
102 <div class="multicol">
103 <div class="flexContainer" style="height: 8px;
104 padding-bottom: 11px"></div>
105 </div>
107 <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
108 <!-- =========================================== -->
109 <!-- border+padding-top is the available height: -->
110 <div class="multicol">
111 <div class="flexContainer" style="height: 8px;
112 border-top: 5px;
113 padding-top: 5px"></div>
114 </div>
116 <!-- padding-top is larger than available height: -->
117 <div class="multicol">
118 <div class="flexContainer" style="height: 8px;
119 border-top: 6px;
120 padding-top: 6px"></div>
121 </div>
123 <!-- padding-bottom is exactly the available height: -->
124 <div class="multicol">
125 <div class="flexContainer" style="height: 8px;
126 border-bottom: 5px;
127 padding-bottom: 5px"></div>
128 </div>
130 <!-- padding-bottom is larger than available height: -->
131 <div class="multicol">
132 <div class="flexContainer" style="height: 8px;
133 border-bottom: 6px;
134 padding-bottom: 6px"></div>
135 </div>
137 </body>
138 </html>
