blob: 3e570c2c546f1824d0d16e845ec88e41d798bdfb [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../../../fast/js/resources/js-test-pre.js"></script>
<style>
.button {
-webkit-appearance: outer-spin-button;
display: inline-block;
}
</style>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
document.getElementById('description').innerHTML = 'Test sizes of outer-spin-button. A spin-button height should be equal to or less than the corresponding text field height.';
var body = document.body;
for (var size = 8; size < 20; size++) {
var div = document.createElement('div');
body.appendChild(div);
div.innerHTML = '<input style="font-size:' + size + 'px" id=input' + size + '>'
+ '<span class="button" style="font-size:' + size + 'px" id=span' + size + '></span>';
var input = document.getElementById('input' + size);
var spinButton = document.getElementById('span' + size);
// 6 is border-top + border-bottom + padding-top + padding-bottom in the default style.
shouldBeTrue('spinButton.offsetHeight <= input.offsetHeight + 6');
}
</script>
<script src="../../../../fast/js/resources/js-test-post.js"></script>
</body>
</html>