layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-3.xhtml@fc2d59ddac77
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-3.xhtml
Wed, 31 Dec 2014 07:22:50 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 07:22:50 +0100
- branch
- TOR_BUG_3246
- changeset 4
- fc2d59ddac77
- permissions
- -rw-r--r--
Correct previous dual key logic pending first delivery installment.
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 with the cross axis
8 reversed via "flex-wrap: wrap-reverse".
9 -->
10 <html xmlns="http://www.w3.org/1999/xhtml">
11 <head>
12 <title>CSS Test: Baseline alignment of flex items in fixed-size single-line flex container, with cross axis reversed</title>
13 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
14 <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#baseline-participation"/>
15 <link rel="match" href="flexbox-align-self-baseline-horiz-3-ref.xhtml"/>
16 <style>
17 .flexbox {
18 display: flex;
19 align-items: baseline;
20 flex-wrap: wrap-reverse; /* Just to flip cross-axis */
21 width: 40px;
22 height: 40px;
23 border: 1px solid gray;
24 margin: 5px; /* just for visual separation */
25 float: left;
26 }
28 .flexbox > * {
29 background: yellow;
30 border: 1px solid black;
31 height: 20px;
32 flex: 1;
33 }
34 </style>
35 </head>
36 <body>
37 <!-- ZEROTH ROW: NO MARGINS -->
38 <!-- No margins on flex item: -->
39 <div class="flexbox">
40 <div>a</div>
41 </div>
44 <!-- FIRST ROW: SETTING MARGIN-TOP: -->
45 <br style="clear: both"/>
47 <!-- auto: -->
48 <div class="flexbox">
49 <div style="margin-top: auto">a</div>
50 </div>
52 <!-- Negative: -->
53 <div class="flexbox">
54 <div style="margin-top: -4px">a</div>
55 </div>
57 <!-- Small: -->
58 <div class="flexbox">
59 <div style="margin-top: 4px">a</div>
60 </div>
62 <!-- Large (pushing us out of container): -->
63 <div class="flexbox">
64 <div style="margin-top: 25px">a</div>
65 </div>
68 <!-- SECOND ROW: SETTING MARGIN-BOTTOM: -->
69 <br style="clear: both"/>
71 <!-- auto: -->
72 <div class="flexbox">
73 <div style="margin-bottom: auto">a</div>
74 </div>
76 <!-- Negative: -->
77 <div class="flexbox">
78 <div style="margin-bottom: -4px">a</div>
79 </div>
81 <!-- Small: -->
82 <div class="flexbox">
83 <div style="margin-bottom: 4px">a</div>
84 </div>
86 <!-- Large: -->
87 <div class="flexbox">
88 <div style="margin-bottom: 25px">a</div>
89 </div>
91 </body>
92 </html>
