repeating-layout-must-produce-the-same-results.html

<!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;
}
.i1 {
  color: magenta;
  background: cyan;
  writing-mode: vertical-lr;
}
.i2 {
  color: red;
  background: blue;
  grid-column: 2;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<script>
    function runTest() {
        document.body.offsetLeft;
        document.body.offsetLeft;
        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="i1" data-expected-width="50" data-expected-height="50">XX X</div>
  <div class="i2" 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="i1" data-expected-width="50" data-expected-height="50">XX X</div>
  <div class="i2" 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="i1" data-expected-width="50" data-expected-height="50">XX X</div>
  <div class="i2" data-expected-width="100" data-expected-height="50">XX X</div>
</div>
</body
chromium/third_party/blink/web_tests/fast/css-grid-layout/repeating-layout-must-produce-the-same-results.html
