blob: d8f2f918750348632ff71b663fed68b4e9bba7c4 [file] [log] [blame]
<!doctype html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
#container {
overflow: auto;
outline: black solid 1px;
line-height: 0px;
width: 100px;
padding: 5px 10px 15px 20px;
}
#target {
font: 10px Ahem;
color: rgba(0,255.0, 0.3);
background-color: rgba(0, 255, 0, 0.3);
}
</style>
<p>Overflow with container padding for inline children: container padding
block_end and inline_end are part of overflow.</p>
<div id="container"><span id="target">01234567890123456789</span></div>
<script>
var container = document.querySelector('#container');
var target = document.querySelector('#target');
test(function() {
var containerStyle = window.getComputedStyle(container);
assert_equals(container.scrollHeight, target.offsetHeight +
parseInt(containerStyle.paddingTop) +
parseInt(containerStyle.paddingBottom), "vertical");
assert_equals(container.scrollWidth, target.offsetWidth +
parseInt(containerStyle.paddingLeft) +
parseInt(containerStyle.paddingRight), "horizontal");
}, "overflow with padding");
</script>