blob: 71e8ee443735b8fce97c01dfd43f603f4001aac3 (
plain)
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
|
<!DOCTYPE html>
<html>
<head>
<title>inline-block + vertical-align</title>
</head>
<style type="text/css">
#outer {
border: 1px solid blue;
}
#inner {
display: inline-block;
vertical-align: text-bottom;
border: 1px solid green;
}
</style>
<body>
<p>The bottom line of the green box should be above the bottom line of the blue box.</p>
<p>
<span id="outer">
[Text]
<span id="inner">
[Inline Block]
</span>
</span>
</p>
<p id="result"></p>
<script type="text/javascript">
if (window.testRunner)
window.testRunner.dumpAsText();
var result = document.getElementById('result');
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var outerBottom = outer.offsetTop + outer.offsetHeight;
var innerBottom = inner.offsetTop + inner.offsetHeight;
if (outerBottom >= innerBottom) {
result.innerHTML = 'PASS';
result.style.color = 'green';
} else {
result.innerHTML = 'FAIL (outerBottom = ' + outerBottom + ', innerBottom = ' + innerBottom + ')';
result.style.color = 'red';
}
</script>
</body>
</html>
|
