layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-2.xhtml@b8a032363ba2
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-2.xhtml
Thu, 22 Jan 2015 13:21:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 22 Jan 2015 13:21:57 +0100
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
- permissions
- -rw-r--r--
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
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 <!-- Testcase for how a baseline-aligned flex item's position is impacted by
7 cross-axis margins, in a fixed-size flex container.
8 -->
9 <html xmlns="http://www.w3.org/1999/xhtml">
10 <head>
11 <title>CSS Test: Baseline alignment of flex items in fixed-size single-line flex container</title>
12 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
13 <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#baseline-participation"/>
14 <link rel="match" href="flexbox-align-self-baseline-horiz-2-ref.xhtml"/>
15 <style>
16 .flexbox {
17 display: flex;
18 align-items: baseline;
19 width: 40px;
20 height: 40px;
21 border: 1px solid gray;
22 margin: 5px; /* just for visual separation */
23 float: left;
24 }
26 .flexbox > * {
27 background: yellow;
28 border: 1px solid black;
29 height: 20px;
30 flex: 1;
31 }
32 </style>
33 </head>
34 <body>
35 <!-- ZEROTH ROW: NO MARGINS -->
36 <!-- No margins on flex item: -->
37 <div class="flexbox">
38 <div>a</div>
39 </div>
42 <!-- FIRST ROW: SETTING MARGIN-TOP: -->
43 <br style="clear: both"/>
45 <!-- auto: -->
46 <div class="flexbox">
47 <div style="margin-top: auto">a</div>
48 </div>
50 <!-- Negative: -->
51 <div class="flexbox">
52 <div style="margin-top: -4px">a</div>
53 </div>
55 <!-- Small: -->
56 <div class="flexbox">
57 <div style="margin-top: 4px">a</div>
58 </div>
60 <!-- Large (pushing us out of container): -->
61 <div class="flexbox">
62 <div style="margin-top: 25px">a</div>
63 </div>
66 <!-- SECOND ROW: SETTING MARGIN-BOTTOM: -->
67 <br style="clear: both"/>
69 <!-- auto: -->
70 <div class="flexbox">
71 <div style="margin-bottom: auto">a</div>
72 </div>
74 <!-- Negative: -->
75 <div class="flexbox">
76 <div style="margin-bottom: -4px">a</div>
77 </div>
79 <!-- Small: -->
80 <div class="flexbox">
81 <div style="margin-bottom: 4px">a</div>
82 </div>
84 <!-- Large: -->
85 <div class="flexbox">
86 <div style="margin-bottom: 25px">a</div>
87 </div>
89 </body>
90 </html>
