<!DOCTYPE html>
<style>
#container {
  background-color: lime;
}

img, canvas {
  max-height: 100%;
}
</style>

<p>
Tests that a replaced child with percentage max-height should keep the aspect
ratio when the size of its container changes.
</p>

<div id="container">
  <img src="resources/square-blue-100x100.png" data-expected-width="50"
      data-expected-height="50">
  <canvas width="400" height="400" data-expected-width="50"
      data-expected-height="50"></canvas>
</div>

<script src="../../resources/check-layout.js"></script>

<script>
 function runTest() {
   document.body.offsetTop;
   var container = document.getElementById('container');
   container.style.height = "50px";
   document.body.offsetTop;
   checkLayout("#container");
 }
window.onload = runTest;
</script>