<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS Grid Layout Test Reference: Support for 'grid-auto-columns' and
      'grid-auto-rows' properties with implicit tracks after and before the
      explicit grid</title>
    <style>
    #wrapper {
      display: grid;
      grid-template-columns: 50px 50px 50px 50px;
    }

    div { position: relative; }

    .item-left3 {
      width: 3px;
      height: 3px;
      background: #ff0;
    }
    .item-left2 {
      width: 2px;
      height: 2px;
      background: #ff0;
    }
    .item-left1 {
      width: 3px;
      height: 3px;
      background: #ff0;
    }
    .item-explicit {
      width: 5px;
      height: 5px;
      background: #f0f;
    }
    .item-right1 {
      width: 2px;
      height: 2px;
      background: #0ff;
    }
    .item-right2 {
      width: 3px;
      height: 3px;
      background: #0ff;
    }
    .item-right3 {
      width: 2px;
      height: 2px;
      background: #0ff;
    }

    #zero .item-explicit {
      width: 2px;
      height: 2px;
    }
    #two .item-explicit {
      width: 10px;
      height: 10px;
    }
    #three .item-explicit {
      width: 15px;
      height: 15px;
    }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="zero">
        <div>
          <div class="item-right1"></div>
        </div>
        <div>
          <div class="item-right1"></div>
          <div class="item-right2" style="left:2px;"></div>
        </div>
        <div>
          <div class="item-right1"></div>
          <div class="item-right2" style="left:2px;"></div>
          <div class="item-right3" style="left:5px;"></div>
        </div>

        <div>
          <div class="item-left1"></div>
          <div class="item-explicit" style="left:3px;"></div>
        </div>
        <div>
          <div class="item-left1"></div>
          <div class="item-right1" style="left:3px;"></div>
        </div>
        <div>
          <div class="item-left1"></div>
          <div class="item-right1" style="left:3px;"></div>
          <div class="item-right2" style="left:5px;"></div>
        </div>
        <div>
          <div class="item-left1"></div>
          <div class="item-right1" style="left:3px;"></div>
          <div class="item-right2" style="left:5px;"></div>
          <div class="item-right3" style="left:8px;"></div>
        </div>

        <div>
          <div class="item-left2"></div>
          <div class="item-left1" style="left:2px;"></div>
          <div class="item-explicit" style="left:5px;"></div>
        </div>
        <div>
          <div class="item-left2"></div>
          <div class="item-left1" style="left:2px;"></div>
          <div class="item-right1" style="left:5px;"></div>
        </div>
        <div>
          <div class="item-left2"></div>
          <div class="item-left1" style="left:2px;"></div>
          <div class="item-right1" style="left:5px;"></div>
          <div class="item-right2" style="left:7px;"></div>
        </div>
        <div>
          <div class="item-left2"></div>
          <div class="item-left1" style="left:2px;"></div>
          <div class="item-right1" style="left:5px;"></div>
          <div class="item-right2" style="left:7px;"></div>
          <div class="item-right3" style="left:10px;"></div>
        </div>

        <div>
          <div class="item-left3"></div>
          <div class="item-left2" style="left:3px;"></div>
          <div class="item-left1" style="left:5px;"></div>
          <div class="item-explicit" style="left:8px;"></div>
        </div>
        <div>
          <div class="item-left3"></div>
          <div class="item-left2" style="left:3px;"></div>
          <div class="item-left1" style="left:5px;"></div>
          <div class="item-right1" style="left:8px;"></div>
        </div>
        <div>
          <div class="item-left3"></div>
          <div class="item-left2" style="left:3px;"></div>
          <div class="item-left1" style="left:5px;"></div>
          <div class="item-right1" style="left:8px;"></div>
          <div class="item-right2" style="left:10px;"></div>
        </div>
        <div>
          <div class="item-left3"></div>
          <div class="item-left2" style="left:3px;"></div>
          <div class="item-left1" style="left:5px;"></div>
          <div class="item-right1" style="left:8px;"></div>
          <div class="item-right2" style="left:10px;"></div>
          <div class="item-right3" style="left:13px;"></div>
        </div>
      </div>

      <div id="one">
        <div>
          <div class="item-explicit"></div>
          <div class="item-right1" style="left:5px;"></div>
        </div>
        <div>
          <div class="item-explicit"></div>
          <div class="item-right1" style="left:5px;"></div>
          <div class="item-right2" style="left:7px;"></div>
        </div>
        <div>
          <div class="item-explicit"></div>
          <div class="item-right1" style="left:5px;"></div>
          <div class="item-right2" style="left:7px;"></div>
          <div class="item-right3" style="left:10px;"></div>
        </div>

        <div>
          <div class="item-left1"></div>
          <div class="item-explicit" style="left:3px;"></div>
        </div>
        <div>
          <div class="item-left1"></div>
          <div class="item-explicit" style="left:3px;"></div>
          <div class="item-right1" style="left:8px;"></div>
        </div>
        <div>
          <div class="item-left1"></div>
          <div class="item-explicit" style="left:3px;"></div>
          <div class="item-right1" style="left:8px;"></div>
          <div class="item-right2" style="left:10px;"></div>
        </div>
        <div>
          <div class="item-left1"></div>
          <div class="item-explicit" style="left:3px;"></div>
          <div class="item-right1" style="left:8px;"></div>
          <div class="item-right2" style="left:10px;"></div>
          <div class="item-right3" style="left:13px;"></div>
        </div>

        <div>
          <div class="item-left2"></div>
          <div class="item-left1" style="left:2px;"></div>
          <div class="item-explicit" style="left:5px;"></div>
        </div>
        <div>
          <div class="item-left2"></div>
          <div class="item-left1" style="left:2px;"></div>
          <div class="item-explicit" style="left:5px;"></div>
          <div class="item-right1" style="left:10px;"></div>
        </div>
        <div>
          <div class="item-left2"></div>
          <div class="item-left1" style="left:2px;"></div>
          <div class="item-explicit" style="left:5px;"></div>
          <div class="item-right1" style="left:10px;"></div>
          <div class="item-right2" style="left:12px;"></div>
        </div>
        <div>
          <div class="item-left2"></div>
          <div class="item-left1" style="left:2px;"></div>
          <div class="item-explicit" style="left:5px;"></div>
          <div class="item-right1" style="left:10px;"></div>
          <div class="item-right2" style="left:12px;"></div>
          <div class="item-right3" style="left:15px;"></div>
        </div>

        <div>
          <div class="item-left3"></div>
          <div class="item-left2" style="left:3px;"></div>
          <div class="item-left1" style="left:5px;"></div>
          <div class="item-explicit" style="left:8px;"></div>
        </div>
        <div>
          <div class="item-left3"></div>
          <div class="item-left2" style="left:3px;"></div>
          <div class="item-left1" style="left:5px;"></div>
          <div class="item-explicit" style="left:8px;"></div>
          <div class="item-right1" style="left:13px;"></div>
        </div>
        <div>
          <div class="item-left3"></div>
          <div class="item-left2" style="left:3px;"></div>
          <div class="item-left1" style="left:5px;"></div>
          <div class="item-explicit" style="left:8px;"></div>
          <div class="item-right1" style="left:13px;"></div>
          <div class="item-right2" style="left:15px;"></div>
        </div>
        <div>
          <div class="item-left3"></div>
          <div class="item-left2" style="left:3px;"></div>
          <div class="item-left1" style="left:5px;"></div>
          <div class="item-explicit" style="left:8px;"></div>
          <div class="item-right1" style="left:13px;"></div>
          <div class="item-right2" style="left:15px;"></div>
          <div class="item-right3" style="left:18px;"></div>
        </div>
      </div>

      <div id="two">
        <div>
          <div class="item-explicit"></div>
          <div class="item-right1" style="left:10px;"></div>
        </div>
        <div>
          <div class="item-explicit"></div>
          <div class="item-right1" style="left:10px;"></div>
          <div class="item-right2" style="left:12px;"></div>
        </div>
        <div>
          <div class="item-explicit"></div>
          <div class="item-right1" style="left:10px;"></div>
          <div class="item-right2" style="left:12px;"></div>
          <div class="item-right3" style="left:15px;"></div>
        </div>

        <div>
          <div class="item-left1"></div>
          <div class="item-explicit" style="left:3px;"></div>
        </div>
        <div>
          <div class="item-left1"></div>
          <div class="item-explicit" style="left:3px;"></div>
          <div class="item-right1" style="left:13px;"></div>
        </div>
        <div>
          <div class="item-left1"></div>
          <div class="item-explicit" style="left:3px;"></div>
          <div class="item-right1" style="left:13px;"></div>
          <div class="item-right2" style="left:15px;"></div>
        </div>
        <div>
          <div class="item-left1"></div>
          <div class="item-explicit" style="left:3px;"></div>
          <div class="item-right1" style="left:13px;"></div>
          <div class="item-right2" style="left:15px;"></div>
          <div class="item-right3" style="left:18px;"></div>
        </div>

        <div>
          <div class="item-left2"></div>
          <div class="item-left1" style="left:2px;"></div>
          <div class="item-explicit" style="left:5px;"></div>
        </div>
        <div>
          <div class="item-left2"></div>
          <div class="item-left1" style="left:2px;"></div>
          <div class="item-explicit" style="left:5px;"></div>
          <div class="item-right1" style="left:15px;"></div>
        </div>
        <div>
          <div class="item-left2"></div>
          <div class="item-left1" style="left:2px;"></div>
          <div class="item-explicit" style="left:5px;"></div>
          <div class="item-right1" style="left:15px;"></div>
          <div class="item-right2" style="left:17px;"></div>
        </div>
        <div>
          <div class="item-left2"></div>
          <div class="item-left1" style="left:2px;"></div>
          <div class="item-explicit" style="left:5px;"></div>
          <div class="item-right1" style="left:15px;"></div>
          <div class="item-right2" style="left:17px;"></div>
          <div class="item-right3" style="left:20px;"></div>
        </div>

        <div>
          <div class="item-left3"></div>
          <div class="item-left2" style="left:3px;"></div>
          <div class="item-left1" style="left:5px;"></div>
          <div class="item-explicit" style="left:8px;"></div>
        </div>
        <div>
          <div class="item-left3"></div>
          <div class="item-left2" style="left:3px;"></div>
          <div class="item-left1" style="left:5px;"></div>
          <div class="item-explicit" style="left:8px;"></div>
          <div class="item-right1" style="left:18px;"></div>
        </div>
        <div>
          <div class="item-left3"></div>
          <div class="item-left2" style="left:3px;"></div>
          <div class="item-left1" style="left:5px;"></div>
          <div class="item-explicit" style="left:8px;"></div>
          <div class="item-right1" style="left:18px;"></div>
          <div class="item-right2" style="left:20px;"></div>
        </div>
        <div>
          <div class="item-left3"></div>
          <div class="item-left2" style="left:3px;"></div>
          <div class="item-left1" style="left:5px;"></div>
          <div class="item-explicit" style="left:8px;"></div>
          <div class="item-right1" style="left:18px;"></div>
          <div class="item-right2" style="left:20px;"></div>
          <div class="item-right3" style="left:23px;"></div>
        </div>
      </div>

      <div id="three">
        <div>
          <div class="item-explicit"></div>
          <div class="item-right1" style="left:15px;"></div>
        </div>
        <div>
          <div class="item-explicit"></div>
          <div class="item-right1" style="left:15px;"></div>
          <div class="item-right2" style="left:17px;"></div>
        </div>
        <div>
          <div class="item-explicit"></div>
          <div class="item-right1" style="left:15px;"></div>
          <div class="item-right2" style="left:17px;"></div>
          <div class="item-right3" style="left:20px;"></div>
        </div>

        <div>
          <div class="item-left1"></div>
          <div class="item-explicit" style="left:3px;"></div>
        </div>
        <div>
          <div class="item-left1"></div>
          <div class="item-explicit" style="left:3px;"></div>
          <div class="item-right1" style="left:18px;"></div>
        </div>
        <div>
          <div class="item-left1"></div>
          <div class="item-explicit" style="left:3px;"></div>
          <div class="item-right1" style="left:18px;"></div>
          <div class="item-right2" style="left:20px;"></div>
        </div>
        <div>
          <div class="item-left1"></div>
          <div class="item-explicit" style="left:3px;"></div>
          <div class="item-right1" style="left:18px;"></div>
          <div class="item-right2" style="left:20px;"></div>
          <div class="item-right3" style="left:23px;"></div>
        </div>

        <div>
          <div class="item-left2"></div>
          <div class="item-left1" style="left:2px;"></div>
          <div class="item-explicit" style="left:5px;"></div>
        </div>
        <div>
          <div class="item-left2"></div>
          <div class="item-left1" style="left:2px;"></div>
          <div class="item-explicit" style="left:5px;"></div>
          <div class="item-right1" style="left:20px;"></div>
        </div>
        <div>
          <div class="item-left2"></div>
          <div class="item-left1" style="left:2px;"></div>
          <div class="item-explicit" style="left:5px;"></div>
          <div class="item-right1" style="left:20px;"></div>
          <div class="item-right2" style="left:22px;"></div>
        </div>
        <div>
          <div class="item-left2"></div>
          <div class="item-left1" style="left:2px;"></div>
          <div class="item-explicit" style="left:5px;"></div>
          <div class="item-right1" style="left:20px;"></div>
          <div class="item-right2" style="left:22px;"></div>
          <div class="item-right3" style="left:25px;"></div>
        </div>

        <div>
          <div class="item-left3"></div>
          <div class="item-left2" style="left:3px;"></div>
          <div class="item-left1" style="left:5px;"></div>
          <div class="item-explicit" style="left:8px;"></div>
        </div>
        <div>
          <div class="item-left3"></div>
          <div class="item-left2" style="left:3px;"></div>
          <div class="item-left1" style="left:5px;"></div>
          <div class="item-explicit" style="left:8px;"></div>
          <div class="item-right1" style="left:23px;"></div>
        </div>
        <div>
          <div class="item-left3"></div>
          <div class="item-left2" style="left:3px;"></div>
          <div class="item-left1" style="left:5px;"></div>
          <div class="item-explicit" style="left:8px;"></div>
          <div class="item-right1" style="left:23px;"></div>
          <div class="item-right2" style="left:25px;"></div>
        </div>
        <div>
          <div class="item-left3"></div>
          <div class="item-left2" style="left:3px;"></div>
          <div class="item-left1" style="left:5px;"></div>
          <div class="item-explicit" style="left:8px;"></div>
          <div class="item-right1" style="left:23px;"></div>
          <div class="item-right2" style="left:25px;"></div>
          <div class="item-right3" style="left:28px;"></div>
        </div>
      </div>
    </div>
  </body>
</html>
