layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-2-ref.html@925c144e1f1f
layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-2-ref.html
Fri, 16 Jan 2015 18:13:44 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Fri, 16 Jan 2015 18:13:44 +0100
- branch
- TOR_BUG_9701
- changeset 14
- 925c144e1f1f
- permissions
- -rw-r--r--
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 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 width: 40px;
20 /* Split testcase's 40px height into 20px of padding-top and 20px of
21 height, to set aside space for the testcase's (invisible) second line
22 (which is above the first line, since this is wrap-reverse) */
23 height: 20px;
24 padding-top: 20px;
25 background: lightblue;
26 }
27 .flexContainer > * {
28 width: 20px;
29 display: inline-block;
30 }
32 .smallFont {
33 font-size: 8px;
34 line-height: 8px;
35 }
36 .medFont {
37 font-size: 12px;
38 line-height: 12px;
39 }
40 .bigFont {
41 font-size: 16px;
42 line-height: 16px;
43 }
44 .unaligned { vertical-align: top }
45 </style>
46 </head>
47 <body>
48 a
49 <!-- Flex containers with flex items that have a mix of baselines: -->
50 <div class="flexContainer medFont">
51 <div class="medFont">b</div
52 ><div class="bigFont unaligned">c</div>
53 </div>
55 <div class="flexContainer bigFont">
56 <div class="bigFont">f</div
57 ><div class="smallFont unaligned">g</div>
58 </div>
60 <!-- Flex container with second line baseline-aligned
61 (shouldn't make a difference) -->
62 <div class="flexContainer smallFont">
63 <div class="smallFont">j</div
64 ><div class="bigFont unaligned">k</div>
65 </div>
66 n
68 </body>
69 </html>
