layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-1-ref.xhtml@6474c204b198
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-1-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 <!-- Reference case for align-items / align-self behavior, using blocks in
7 place of flex items and using float and width keywords to emulate the
8 align-items / align-self properties. -->
9 <html xmlns="http://www.w3.org/1999/xhtml">
10 <head>
11 <title>CSS Reftest Reference</title>
12 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
13 <style>
14 .flexbox {
15 border: 1px dashed blue;
16 width: 200px;
17 font-size: 10px;
18 }
20 div.big {
21 font-size: 20px;
22 width: 50px;
23 }
25 .flexbox > * {
26 clear: both;
27 }
29 /* Classes for each of the various align-self values */
30 .flex-start {
31 background: lime;
32 float: left;
33 }
34 .flex-end {
35 background: orange;
36 float: right;
37 }
38 .center {
39 background: lightblue;
40 margin: auto;
41 }
42 .baseline {
43 background: teal;
44 float: left;
45 }
46 .stretch {
47 background: pink;
48 width: 100%;
49 }
50 .auto {
51 background: yellow;
52 margin: auto;
53 }
54 .unspecified {
55 background: lightgreen;
56 margin: auto;
57 }
58 .initial {
59 background: aqua;
60 margin: auto;
61 }
62 .inherit {
63 background: violet;
64 float: right;
65 }
67 <!-- We center shrinkwrapped text by putting it into an inline-block, and
68 then wrapping that inline-block in a helper-div that has
69 "text-align:center" set. -->
70 .centerParent {
71 text-align: center;
72 }
73 .centerParent > * {
74 display: inline-block;
75 text-align: left; /* Keep parent's centering from tweaking my text */
76 }
77 </style>
78 </head>
79 <body>
80 <div class="flexbox">
81 <div class="flex-start">start</div>
82 <div class="flex-start big">a b c d e f</div>
83 <div class="flex-end">end</div>
84 <div class="flex-end big">a b c d e f</div>
85 <div class="centerParent">
86 <div class="center">center</div>
87 </div>
88 <div class="center big">a b c d e f</div>
89 <div class="baseline">base</div>
90 <div class="baseline big">abc</div>
91 <div class="stretch">stretch</div>
92 <div class="stretch big">a b c d e f</div>
93 <div class="centerParent">
94 <div class="auto">auto</div>
95 </div>
96 <div class="centerParent">
97 <div class="unspecified">unspec</div>
98 </div>
99 <div class="centerParent">
100 <div class="initial">initial</div>
101 </div>
102 <div class="inherit">inherit</div>
103 <!-- Since that last div is floated right, the container doesn't include
104 its height by default. So we add some invisible hacky text (of the
105 same font) to make sure our container is tall enough. -->
106 <span style="visibility:hidden">hacky text</span>
107 </div>
108 </body>
109 </html>
