layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-1-ref.html

branch
TOR_BUG_9701
changeset 11
deefc01c0e14
equal deleted inserted replaced
-1:000000000000 0:707d4e71209f
1 <!DOCTYPE html>
2 <!--
3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
5 -->
6 <!-- Reference case, using inline-block instead of inline-flex, and with the
7 baseline-aligned items aligned using specific font-size / line-heights,
8 and with unaligned children taken out of baseline-alignment using
9 "vertical-align:top".
10 -->
11 <html>
12 <head>
13 <title>CSS Reftest Reference</title>
14 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
15 <meta charset="utf-8">
16 <style>
17 .flexContainer {
18 display: inline-block;
19 background: lightblue;
20 }
21 .flexContainer > * { display: inline; }
22 .smallFont {
23 font-size: 10px;
24 line-height: 10px;
25 }
26 .bigFont {
27 font-size: 20px;
28 line-height: 20px;
29 }
30 .unaligned { vertical-align: top }
31 </style>
32 </head>
33 <body>
34 a
35 <div class="flexContainer smallFont">
36 <div class="smallFont">b</div
37 ><div class="bigFont unaligned">c</div>
38 </div>
39 <div class="flexContainer bigFont">
40 <div class="bigFont">d</div
41 ><div class="smallFont unaligned">e</div>
42 </div>
43 </body>
44 </html>

mercurial