block-width-recalc-with-relative-height.html

<!DOCTYPE html>
<style>
#container {
  display: inline-block;
  height: 100%;
}
#middle {
  height: 100%;
}
#stylefloat {
  height: 100%;
  float: left;
}
img {
  display: block;
  min-height: 100%;
}
</style>

<p>
Tests that recalculate block width when parent changes height
when it has relative height and width auto.
</p>

<div style="height:100px">
  <div id="parent1" style="height:100px">
    <div id="container" data-expected-width=25>
      <img src='data:image/svg+xml;utf8,<svg height="2px" width="1px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg>'>
    </div>
  </div>
</div>

<div id="parent2" style="height:100px;">
  <div id="stylefloat" data-expected-width=25>
    <div id="middle" data-expected-width=25>
      <img src='data:image/svg+xml;utf8,<svg height="2px" width="1px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg>'>
    </div>
  </div>
</div>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<script>
document.body.offsetTop;
document.getElementById("parent1").style.height = "50px";
checkLayout("#container");

document.body.offsetTop;
document.getElementById("parent2").style.height = "50px";
checkLayout("#stylefloat");
</script>
chromium/third_party/blink/web_tests/fast/block/block-width-recalc-with-relative-height.html
