layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-1-ref.html@7540298fafa1
layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-1-ref.html
Thu, 15 Jan 2015 21:13:52 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 21:13:52 +0100
- branch
- TOR_BUG_9701
- changeset 12
- 7540298fafa1
- permissions
- -rw-r--r--
Remove forgotten relic of ABI crash risk averse overloaded method change.
1 <!DOCTYPE html>
2 <!--
3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
5 -->
6 <!-- In this reference case, we have inline-blocks instead of inline
7 flex containers. We stick an Ahem whitespace character in each
8 inline-block, with a customized line-height to make the baseline
9 end up at the bottom of the inline-block's content-box. -->
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 <link rel="stylesheet" type="text/css" href="support/ahem.css" />
16 <style>
17 body {
18 font: 20px Ahem;
19 }
20 .flexContainer {
21 display: inline-block;
22 height: 16px;
23 width: 16px;
24 /* Each inline-block's baseline will be the baseline of the single Ahem
25 character that it contains. We want to set up that char such that its
26 baseline is at the bottom of the container's content box (since that's
27 the corresponding flex container's baseline). So, we use a line-height
28 of 20px, which gives us a baseline of 20px * 0.8 = 16px, which is the
29 bottom of the container's content-box -- awesome. */
30 line-height: 20px;
31 background: purple;
32 border: 0px dotted black;
33 /* (Elements that want a border will set their border-width.) */
34 }
35 </style>
36 </head>
37 <body>
38 A
39 <!-- We have to include a character in the inline-blocks in order for them
40 to baseline-align; otherwise, they align the bottom of their
41 border-boxes. -->
42 <div class="flexContainer"> </div>
43 <div class="flexContainer" style="padding-bottom: 20px"> </div>
44 <div class="flexContainer" style="padding: 10px"> </div>
45 <div class="flexContainer" style="border-width: 3px"> </div>
46 <div class="flexContainer" style="border-bottom-width: 4px"> </div>
47 </body>
48 </html>
