overflow-inline-003.html | Explore in Territory

<!doctype html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
#container {
  overflow: auto;
  width: 200px;
  height: 100px;
  font: 20px Ahem;
  outline: blue solid 1px;
}
#target {
  padding-bottom: 200px;
  background: yellow;
}
</style>
<p>Overflow of inline block descendant.</p>
<!--
  #target is inside a linebox, and its scroll overflow
  propagates to container.
-->
<div id="container">A<span id="outer"><span id="target" class=padding>T</span></span>Z<br>2</div>

<script>

var container = document.querySelector('#container');
var target = document.querySelector('#target');

test(function() {
  var targetStyle = window.getComputedStyle(target);
  assert_equals(container.scrollHeight,
    parseInt(targetStyle.fontSize) + parseInt(targetStyle.paddingBottom),
    "vertical");
}, "overflow for inline block descendant with padding");

</script>

chromium/third_party/blink/web_tests/overflow/overflow-inline-003.html