45 lines
1.1 KiB
HTML
45 lines
1.1 KiB
HTML
<!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>
|