<!DOCTYPE html>
<link href="resources/grid.css" rel="stylesheet">
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
<style>
body {
   margin: 0;
}
.container {
   width: 100px;
}
.grid {
  border: 5px solid;
  grid-template-rows: 50px;
  font: 25px/1 Ahem;
}
</style>
<script src="../../resources/check-layout.js"></script>
<script>
    function runTest() {
       document.body.offsetTop;
       document.body.style.width = "99%";
       document.body.offsetTop;
       document.body.style.width = "100%";
       checkLayout('.grid');
    }
</script>
<body onload="runTest();">
<p>Regresison test for bug 628565 - Ensure that we get the same sizing results when doing several layouts.</p>
<div class="grid fit-content" data-expected-width="160" data-expected-height="60">
  <div class="firstRowFirstColumn verticalLR" data-expected-width="50" data-expected-height="50">XX X</div>
  <div class="firstRowSecondColumn" data-expected-width="100" data-expected-height="50">XX X</div>
</div>
<br>
<div class="grid min-content" data-expected-width="110" data-expected-height="60">
  <div class="firstRowFirstColumn verticalLR" data-expected-width="50" data-expected-height="50">XX X</div>
  <div class="firstRowSecondColumn" data-expected-width="50" data-expected-height="50">XX X</div>
</div>
<br>
<div class="grid max-content" data-expected-width="160" data-expected-height="60">
  <div class="firstRowFirstColumn verticalLR" data-expected-width="50" data-expected-height="50">XX X</div>
  <div class="firstRowSecondColumn" data-expected-width="100" data-expected-height="50">XX X</div>
</div>
</body>
