1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!-- In this reference case, we have inline-blocks instead of inline
flex containers. We stick an Ahem whitespace character in each
inline-block, with a customized line-height to make the baseline
end up at the bottom of the inline-block's content-box. -->
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="support/ahem.css" />
<style>
body {
font: 20px Ahem;
}
.flexContainer {
display: inline-block;
height: 16px;
width: 16px;
/* Each inline-block's baseline will be the baseline of the single Ahem
character that it contains. We want to set up that char such that its
baseline is at the bottom of the container's content box (since that's
the corresponding flex container's baseline). So, we use a line-height
of 20px, which gives us a baseline of 20px * 0.8 = 16px, which is the
bottom of the container's content-box -- awesome. */
line-height: 20px;
background: purple;
border: 0px dotted black;
/* (Elements that want a border will set their border-width.) */
}
</style>
</head>
<body>
A
<!-- We have to include a character in the inline-blocks in order for them
to baseline-align; otherwise, they align the bottom of their
border-boxes. -->
<div class="flexContainer"> </div>
<div class="flexContainer" style="padding-bottom: 20px"> </div>
<div class="flexContainer" style="padding: 10px"> </div>
<div class="flexContainer" style="border-width: 3px"> </div>
<div class="flexContainer" style="border-bottom-width: 4px"> </div>
</body>
</html>
|
