layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-1-ref.html@7540298fafa1
layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-1-ref.html
Thu, 15 Jan 2015 21:13:52 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 21:13:52 +0100
- branch
- TOR_BUG_9701
- changeset 12
- 7540298fafa1
- permissions
- -rw-r--r--
Remove forgotten relic of ABI crash risk averse overloaded method change.
1 <!DOCTYPE html>
2 <!--
3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
5 -->
6 <html>
7 <head>
8 <title>CSS Reftest Reference</title>
9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
10 <meta charset="utf-8">
11 <style>
12 div.flexbox {
13 border: 1px dashed black;
14 width: 12px;
15 height: 100px;
16 margin-right: 2px;
17 float: left;
18 }
19 div.halfMainSize {
20 height: 48px;
21 border: 1px solid blue;
22 background: lightblue;
23 }
24 div.hugeMainSize {
25 height: 148px;
26 border: 1px solid purple;
27 background: fuchsia;
28 }
29 div.fullCrossSize {
30 width: 10px;
31 }
32 div.halfCrossSize {
33 width: 4px;
34 }
35 </style>
36 </head>
37 <body>
39 <!-- Single small flex item -->
40 <div class="flexbox">
41 <div class="halfMainSize fullCrossSize"></div>
42 </div>
44 <!-- Single small flex item with 'margin-left' set to push it to protrude
45 from the far edge of the container (and to shrink as a result) -->
46 <div class="flexbox">
47 <div class="halfMainSize fullCrossSize"
48 style="margin-top: 80px; height: 18px"></div>
49 </div>
51 <!-- Single small inflexible flex item with 'margin-left' set to push it to
52 protrude from the far edge of the container -->
53 <div class="flexbox">
54 <div class="halfMainSize fullCrossSize"
55 style="margin-top: 80px"></div>
56 </div>
58 <!-- Two flex items, exactly large enough to fit in line (no wrapping): -->
59 <div class="flexbox">
60 <div class="halfMainSize fullCrossSize"></div>
61 <div class="halfMainSize fullCrossSize"></div>
62 </div>
64 <!-- and now with some margin on first item, to force second item to wrap: -->
65 <div class="flexbox">
66 <div class="halfMainSize halfCrossSize" style="float: left"></div>
67 <div class="halfMainSize halfCrossSize" style="float: left"></div>
68 </div>
70 <!-- and now with some margin on second item, again forcing it to wrap: -->
71 <div class="flexbox">
72 <div class="halfMainSize halfCrossSize" style="float: left"></div>
73 <div class="halfMainSize halfCrossSize" style="float: left"></div>
74 </div>
76 <!-- Single large flex item: overflows (but does not wrap) and is shrunk
77 to fit container's main-size -->
78 <div class="flexbox">
79 <div class="hugeMainSize fullCrossSize" style="height: 98px"></div>
80 </div>
82 <!-- Single large flex item: overflows (but does not wrap) -->
83 <div class="flexbox">
84 <div class="hugeMainSize fullCrossSize"></div>
85 </div>
87 <!-- Small flex item, followed by large flex item (which wraps to
88 its own line and then shrink to container's main-size) -->
89 <div class="flexbox">
90 <div class="halfMainSize halfCrossSize" style="float: left"></div>
91 <div class="hugeMainSize halfCrossSize" style="float: left; height: 98px"></div>
92 </div>
94 <!-- Small flex item, followed by large inflexible flex item (which wraps to
95 its own line and then shrink to container's main-size) -->
96 <div class="flexbox">
97 <div class="halfMainSize halfCrossSize" style="float: left"></div>
98 <div class="hugeMainSize halfCrossSize" style="float: left"></div>
99 </div>
101 </body>
102 </html>
