1 files changed, 453 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-003-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-003-ref.html
new file mode 100644
index 0000000000..5489a9bffe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-003-ref.html
@@ -0,0 +1,453 @@
+<!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>