Fri, 16 Jan 2015 18:13:44 +0100
Integrate suggestion from review to improve consistency with existing code.
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 unaligned children taken out of baseline-alignment with
8 "vertical-align:top".
9 -->
10 <html>
11 <head>
12 <title>CSS Reftest Reference</title>
13 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
14 <meta charset="utf-8">
15 <style>
16 body {
17 margin: 0;
18 font-size: 20px;
19 line-height: 20px;
20 }
21 .flexContainer {
22 display: inline-block;
23 background: lightblue;
24 vertical-align: top;
25 }
26 .hugeAndUnaligned {
27 font-size: 35px;
28 line-height: 35px;
29 vertical-align: top;
30 }
31 .smallFont {
32 font-size: 10px;
33 line-height: 10px;
34 }
35 .flexContainer > * { display: inline; }
36 </style>
37 </head>
38 <body>
39 a
40 <div class="flexContainer">
41 <div class="smallFont">b</div
42 ><div>c</div
43 ><div class="hugeAndUnaligned">d</div>
44 </div>
45 <div class="flexContainer">
46 <div class="hugeAndUnaligned">e</div
47 ><div>f</div
48 ><div class="smallFont">g</div>
49 </div>
50 <div class="flexContainer">
51 <div class="hugeAndUnaligned">h</div
52 ><div class="smallFont">i</div
53 ><div>j</div>
54 </div>
55 </body>
56 </html>