grid-painting-item-overflow.html | Explore in Territory

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="match" href="grid-painting-item-overflow-expected.html">

<p>This test verifies grid layout painting when the item has overflowing contents.</p>
<p>This test passes if it matches the reference. You should see green and not red.</p>

<iframe height="100px" width="200px" srcdoc="
  <style>
    body {
      background: red;
      overflow: hidden;
    }
   .grid {
      display: grid;
      grid: 50px 50px / 100px 100px;
      margin-left: -300px;
      margin-top: -200px;
    }
  </style>

  <div class='grid'>
    <div>
      <div style='background: green; width: 800px; height: 600px;'></div>
    </div>
  </div>
">
</iframe>

<iframe height="100px" width="200px" srcdoc="
  <style>
    body {
      background: red;
      overflow: hidden;
    }
   .grid {
      display: grid;
      grid: 400px 50px 50px / 500px 100px 100px;
      margin-left: -800px;
      margin-top: -700px;
    }
  </style>

  <div class='grid'>
    <div style='grid-column: 2; grid-row: 2;'>
      <div style='background: green; width: 800px; height: 600px;'></div>
    </div>
  </div>
">
</iframe>

chromium/third_party/blink/web_tests/fast/css-grid-layout/grid-painting-item-overflow.html