1 files changed, 233 insertions, 0 deletions
diff --git a/tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-mbp-overflow-001-ref.html b/tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-mbp-overflow-001-ref.html
new file mode 100644
index 00000000000..30f4bf7a969
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-mbp-overflow-001-ref.html
@@ -0,0 +1,233 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid margin/border/padding that overflow the edge track</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; margin:0; padding:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid: auto / 7px 30px 10px 20px 5px;
+  justify-content: space-around;
+  align-content: start;
+  border: 3px solid;
+  width: 80px;
+}
+.rtl { direction: rtl; }
+
+.subgrid {
+  display: grid;
+  min-width: 0;
+  min-height: 30px;
+  background: pink;
+  border:1px solid;
+  margin: 0 4px 0 3px;
+  position: relative;
+  justify-content: space-between;
+}
+.c1 { width: 30px; grid-column: 2 / span 1; grid: auto / 26px; }
+.rtl > .c1 { grid: auto / 25px; }
+.c1.plr { padding-right: 100px; }
+.rtl > .c1.plr { padding: 0 0 0 100px; }
+
+.c2 { width: 33px; grid-column: 2 / span 2; grid: auto / 26px 5px; }
+.rtl > .c2 { grid: auto / 25px 6px; }
+.c2.plr { padding-right: 97px; }
+.rtl > .c2.plr { padding: 0 0 0 97px; }
+
+.c3 { width: 55px; grid-column: 2 / span 3; grid: auto / 26px 10px 15px; }
+.rtl > .c3 { grid: auto / 25px 10px 16px; }
+.c3.plr { padding-right: 75px; }
+.rtl > .c3.plr { padding: 0 0 0 75px; }
+
+y {
+  background: blue;
+  height: 10px;
+}
+y:nth-of-type(1) { grid-column: 2; }
+y:nth-of-type(2) { grid-column: 4; }
+
+x { background: silver; }
+x:nth-of-type(2) { background: purple; }
+x:nth-of-type(3) { background: magenta; }
+
+a {
+  position: absolute;
+  grid-column-start: 1;
+  inset: 0;
+  top: 3px;
+  border-top: 2px solid grey;
+}
+a:nth-of-type(2) {
+  grid-column-start: 2;
+  top: 6px;
+}
+a:nth-of-type(3) {
+  grid-column-start: 3;
+  top: 9px;
+}
+
+b {
+  position: absolute;
+  grid-column-end: 1;
+  inset: 0;
+  top: 12px;
+  border-top: 2px solid grey;
+}
+b:nth-of-type(2) {
+  grid-column-end: 2;
+  top: 15px;
+}
+b:nth-of-type(3) {
+  grid-column-end: 3;
+  top: 18px;
+}
+
+.f { float:left; margin-left:80px; }
+.z { height:0; }
+.s2 { grid-column:2; }
+.gl { left: -2px; }
+.e2 { grid-column-end:2; }
+.gr { right: -2px; }
+</style>
+</head>
+<body>
+
+<div class=f>
+<div class="grid">
+  <y></y><y></y>
+  <div class="subgrid c3 pr"><x></x><a></a><b></b><x></x><a></a><b></b><a></a><b></b></div>
+</div>
+
+<br>
+
+<div class="grid">
+  <y></y><y></y>
+  <div class="subgrid c3 pl"><x class="z"></x><a class="s2 gl"></a><b class="e2"></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
+</div>
+
+<br>
+
+<div class="grid">
+  <y></y><y></y>
+  <div class="subgrid c3 plr"><x class="z"></x><a class="s2 gl"></a><b class="e2"></b><x></x><a></a><b></b><x class="z"></x><a></a><b></b></div>
+</div>
+
+<br>
+
+<div class="grid rtl">
+  <y></y><y></y>
+  <div class="subgrid c3 pr"><x class="z"></x><a class="s2 gr"></a><b class="e2"></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
+</div>
+
+<br>
+
+<div class="grid rtl">
+  <y></y><y></y>
+  <div class="subgrid c3 pl"><x></x><a></a><b></b><x></x><a></a><b></b><x class="z"></x><a></a><b></b></div>
+</div>
+
+<br>
+
+<div class="grid rtl">
+  <y></y><y></y>
+  <div class="subgrid c3 plr"><x class="z"></x><a class="s2 gr"></a><b class="e2"></b><x></x><a></a><b></b><x class="z"></x><a></a><b></b></div>
+</div>
+
+</div>
+
+<div class=f>
+<div class="grid">
+  <y></y><y></y>
+  <div class="subgrid c2 pr"><x></x><a></a><b></b><x class="z"></x><a></a><b></b></div>
+</div>
+
+<br>
+
+<div class="grid">
+  <y></y><y></y>
+  <div class="subgrid c2 pl"><x class="z"></x><a class="s2 gl"></a><b class="e2"></b><x></x><a></a><b></b></div>
+</div>
+
+<br>
+
+<div class="grid">
+  <y></y><y></y>
+  <div class="subgrid c2 plr"><a class="s2 gl"></a><b class="e2"></b><a></a><b></b></div>
+</div>
+
+<br>
+
+<div class="grid rtl">
+  <y></y><y></y>
+  <div class="subgrid c2 pr"><x class="z"></x><a class="s2 gr"></a><b class="e2"></b><x></x><a></a><b></b></div>
+</div>
+
+<br>
+
+<div class="grid rtl">
+  <y></y><y></y>
+  <div class="subgrid c2 pl"><x></x><a></a><b></b><x class="z"></x><a></a><b></b></div>
+</div>
+
+<br>
+
+<div class="grid rtl">
+  <y></y><y></y>
+  <div class="subgrid c2 plr"><a class="s2 gr"></a><b class="e2"></b><a></a><b></b></div>
+</div>
+
+</div>
+
+<div class=f>
+<div class="grid">
+  <y></y><y></y>
+  <div class="subgrid c1 pr"><a></a><b></b></div>
+</div>
+
+<br>
+
+<div class="grid">
+  <y></y><y></y>
+  <div class="subgrid c1 pl"><a class="s2"></a><b class="e2"></b></div>
+</div>
+
+<br>
+
+<div class="grid">
+  <y></y><y></y>
+  <div class="subgrid c1 plr"><a class="s2"></a><b class="e2"></b></div>
+</div>
+
+<br>
+
+<div class="grid rtl">
+  <y></y><y></y>
+  <div class="subgrid c1 pr"><a class="s2"></a><b class="e2"></b></div>
+</div>
+
+<br>
+
+<div class="grid rtl">
+  <y></y><y></y>
+  <div class="subgrid c1 pl"><a></a><b></b></div>
+</div>
+
+<br>
+
+<div class="grid rtl">
+  <y></y><y></y>
+  <div class="subgrid c1 plr"><a class="s2"></a><b class="e2"></b></div>
+</div>
+
+</div>
+
+</body>
+</html>