layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-4-ref.xhtml@6474c204b198
layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-4-ref.xhtml
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
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 <title>CSS Reftest Reference</title>
9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
10 <style>
11 body { margin-top: 0px; } /* We'll apply margins w/ style attribute */
12 div.flexbox {
13 margin-right: 4px;
14 float: left;
15 }
16 div.a {
17 width: 10px;
18 height: 35px;
19 background: lightgreen;
20 border-style: solid;
21 border-color: purple;
22 border-top-width: 4px;
23 border-right-width: 3px;
24 border-bottom-width: 2px;
25 border-left-width: 1px;
26 padding: 2px;
27 }
28 div.b {
29 width: 10px;
30 height: 40px;
31 background: pink;
32 padding: 1px 2px 3px 4px;
33 margin: 5px 4px 3px 2px;
34 }
35 div.c {
36 width: 10px;
37 height: 45px;
38 background: orange;
39 margin: 3px;
40 margin-top: 6px; /* Increased to counteract for collapsing */
41 border: 2px dashed teal;
42 }
43 </style>
44 </head>
45 <body>
47 <!-- default (start) -->
48 <div class="flexbox" style="margin-top: 100px">
49 <div class="a"/>
50 </div>
51 <div class="flexbox" style="margin-top: 100px">
52 <div class="a"/><div class="b"></div>
53 </div>
54 <div class="flexbox" style="margin-top: 100px">
55 <div class="a"/><div class="b"/><div class="c"/>
56 </div>
58 <!-- flex-start -->
59 <div class="flexbox" style="margin-top: 100px">
60 <div class="a"/>
61 </div>
62 <div class="flexbox" style="margin-top: 100px">
63 <div class="a"/><div class="b"/>
64 </div>
65 <div class="flexbox" style="margin-top: 100px">
66 <div class="a"/><div class="b"/><div class="c"/>
67 </div>
69 <!-- flex-end -->
70 <div class="flexbox" style="margin-top: 85px">
71 <div class="a"/>
72 </div>
73 <div class="flexbox" style="margin-top: 33px">
74 <div class="a"/><div class="b"/>
75 </div>
76 <div class="flexbox" style="margin-top: -22px">
77 <div class="a"/><div class="b"/><div class="c"/>
78 </div>
80 <!-- center -->
81 <div class="flexbox" style="margin-top: 92.5px">
82 <div class="a"/>
83 </div>
84 <div class="flexbox" style="margin-top: 66.5px">
85 <div class="a"/><div class="b"/>
86 </div>
87 <div class="flexbox" style="margin-top: 39px">
88 <div class="a"/><div class="b"/><div class="c"/>
89 </div>
91 <!-- space-between -->
92 <div class="flexbox" style="margin-top: 100px">
93 <div class="a"/>
94 </div>
95 <div class="flexbox" style="margin-top: 100px">
96 <div class="a"/><div class="b"/>
97 </div>
98 <div class="flexbox" style="margin-top: 100px">
99 <div class="a"/><div class="b"/><div class="c"/>
100 </div>
102 <!-- space-around -->
103 <div class="flexbox" style="margin-top: 92.5px">
104 <div class="a"/>
105 </div>
106 <div class="flexbox" style="margin-top: 66.5px">
107 <div class="a"/><div class="b"/>
108 </div>
109 <div class="flexbox" style="margin-top: 39px">
110 <div class="a"/><div class="b"/><div class="c"/>
111 </div>
113 </body>
114 </html>
