Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-12 17:05:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'

Browse source
This commit is contained in:
WPT Sync Bot 2022-11-10 01:22:36 +00:00
parent ace9b32b1c
commit df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
Download patch file Download diff file Expand all files Collapse all files

4
tests/wpt/web-platform-tests/css/css-grid/subgrid/abs-pos-002-ref.html
View file

@ -61,7 +61,7 @@ x {
<div class="grid">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div class="subgrid">
<x style="grid-column:3; right:27px">x</x>
<x style="grid-column:3; right:33px">x</x>
</div>
</div>
@ -117,7 +117,7 @@ x {
<div class="grid">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div class="subgrid hr">
<x style="grid-column:auto/1; left:-27px">x</x>
<x style="grid-column:auto/1; left:-33px">x</x>
</div>
</div>

131
tests/wpt/web-platform-tests/css/css-grid/subgrid/abs-pos-003-ref.html
View file

@ -1,131 +0,0 @@
<!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: abs.pos. subgrid edge cases</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
html,body {
color:black; background-color:white; font:16px/3em monospace;
}
.grid {
display: inline-grid;
position: relative;
border: 1px solid;
margin-right: 20px;
}
.a { grid-template-areas: '.' }
.c { grid-template-columns: auto }
.r { grid-template-rows: auto }
.subgrid {
position: absolute;
display: grid;
padding: 10px;
}
x {
width: 1em;
height: 1em;
background: grey;
}
a {
position: absolute;
inset: 0;
background: purple;
}
.a > .t1 > x {
margin: -10px 0 0 -10px;
}
.a > .t2 > x,
.c > .t2 > x,
.c > .t1 > x {
margin: 0 0 0 -10px;
}
</style>
</head>
<body>
<div class="grid"><div class="subgrid t1"></div></div>
<div class="grid"><div class="subgrid t1"><x></x></div></div>
<div class="grid"><div class="subgrid t1"><x></x><x></x></div></div>
<div class="grid"><div class="subgrid t1"></div></div>
<div class="grid a"><div class="subgrid t1"></div></div>
<div class="grid a"><div class="subgrid t1"><x></x></div></div>
<div class="grid a"><div class="subgrid t1"><x></x></div></div>
<div class="grid c"><div class="subgrid t1"></div></div>
<div class="grid c"><div class="subgrid t1"><x></x></div></div>
<div class="grid c"><div class="subgrid t1"><x></x><x></x></div></div>
<div class="grid r"><div class="subgrid t1"></div></div>
<div class="grid r"><div class="subgrid t1"><x></x></div></div>
<div class="grid r"><div class="subgrid t1"><x></x></div></div>
<div class="grid"><div class="subgrid t2"></div></div>
<div class="grid"><div class="subgrid t2"><x></x></div></div>
<div class="grid"><div class="subgrid t2"></div></div>
<div class="grid"><div class="subgrid t2"><x></x><x></x></div></div>
<div class="grid a"><div class="subgrid t2"></div></div>
<div class="grid a"><div class="subgrid t2"><x></x></div></div>
<div class="grid a"><div class="subgrid t2"><x></x><x></x></div></div>
<div class="grid c"><div class="subgrid t2"></div></div>
<div class="grid c"><div class="subgrid t2"><x></x></div></div>
<div class="grid c"><div class="subgrid t2"><x></x><x></x></div></div>
<div class="grid r"><div class="subgrid t2"></div></div>
<div class="grid r"><div class="subgrid t2"><x></x></div></div>
<div class="grid r"><div class="subgrid t2"><x></x><x></x></div></div>
<div class="grid"><div class="subgrid t3"></div></div>
<div class="grid"><div class="subgrid t3"><x></x></div></div>
<div class="grid"><div class="subgrid t3"></div></div>
<div class="grid"><div class="subgrid t3"><x></x><x></x></div></div>
<div class="grid a"><div class="subgrid t3"></div></div>
<div class="grid a"><div class="subgrid t3"><x></x></div></div>
<div class="grid a"><div class="subgrid t3"><x></x></div></div>
<div class="grid c"><div class="subgrid t3"></div></div>
<div class="grid c"><div class="subgrid t3"><x></x></div></div>
<div class="grid c"><div class="subgrid t3"><x></x><x></x></div></div>
<div class="grid r"><div class="subgrid t3"></div></div>
<div class="grid r"><div class="subgrid t3"><x></x></div></div>
<div class="grid r"><div class="subgrid t3"><x></x></div></div>
<br>
<div class="grid"><div class="subgrid t1"><a></a></div></div>
<div class="grid"><div class="subgrid t1"><a></a><a></a></div></div>
<div class="grid"><div class="subgrid t1"><a></a></div></div>
<div class="grid a"><div class="subgrid t1"><a></a></div></div>
<div class="grid a"><div class="subgrid t1"><a></a><a></a></div></div>
<div class="grid c"><div class="subgrid t1"><a></a></div></div>
<div class="grid c"><div class="subgrid t1"><a></a><a></a></div></div>
<div class="grid r"><div class="subgrid t1"><a></a></div></div>
<div class="grid r"><div class="subgrid t1"><a></a><a></a></div></div>
<div class="grid"><div class="subgrid t2"><a></a></div></div>
<div class="grid"><div class="subgrid t2"><a></a><a></a></div></div>
<div class="grid"><div class="subgrid t2"><a></a></div></div>
<div class="grid a"><div class="subgrid t2"><a></a></div></div>
<div class="grid a"><div class="subgrid t2"><a></a><a></a></div></div>
<div class="grid c"><div class="subgrid t2"><a></a></div></div>
<div class="grid c"><div class="subgrid t2"><a></a><a></a></div></div>
<div class="grid r"><div class="subgrid t2"><a></a></div></div>
<div class="grid r"><div class="subgrid t2"><a></a><a></a></div></div>
<div class="grid"><div class="subgrid t3"><a></a></div></div>
<div class="grid"><div class="subgrid t3"><a></a></div></div>
<div class="grid"><div class="subgrid t3"><a></a><a></a></div></div>
<div class="grid a"><div class="subgrid t3"><a></a></div></div>
<div class="grid a"><div class="subgrid t3"><a></a><a></a></div></div>
<div class="grid c"><div class="subgrid t3"><a></a></div></div>
<div class="grid c"><div class="subgrid t3"><a></a><a></a></div></div>
<div class="grid r"><div class="subgrid t3"><a></a></div></div>
<div class="grid r"><div class="subgrid t3"><a></a><a></a></div></div>
</body>
</html>

133
tests/wpt/web-platform-tests/css/css-grid/subgrid/abs-pos-003.html
View file

@ -1,133 +0,0 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: abs.pos. subgrid edge cases</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="match" href="abs-pos-003-ref.html">
<style>
html,body {
color:black; background-color:white; font:16px/3em monospace;
}
.grid {
display: inline-grid;
position: relative;
border: 1px solid;
margin-right: 20px;
}
.a { grid-template-areas: '.' }
.c { grid-template-columns: auto }
.r { grid-template-rows: auto }
.subgrid {
position: absolute;
display: grid;
padding: 10px;
}
.t1 { grid: subgrid / subgrid; }
.t2 { grid: none / subgrid; }
.t3 { grid: subgrid / none; }
x {
width: 1em;
height: 1em;
background: grey;
}
a {
position: absolute;
inset: 0;
background: purple;
}
.o { overflow: hidden; }
.abs {
grid-auto-rows: 3em;
grid-auto-columns: 3em;
}
.abs x { width:auto; height:auto; }
</style>
</head>
<body>
<div class="grid"><div class="subgrid t1"></div></div>
<div class="grid"><div class="subgrid t1"><x></x></div></div>
<div class="grid"><div class="subgrid t1"><x></x><x></x></div></div>
<div class="grid abs"><div class="subgrid t1 o"><x></x></div></div>
<div class="grid a"><div class="subgrid t1"></div></div>
<div class="grid a"><div class="subgrid t1"><x></x></div></div>
<div class="grid a"><div class="subgrid t1"><x></x><x></x></div></div>
<div class="grid c"><div class="subgrid t1"></div></div>
<div class="grid c"><div class="subgrid t1"><x></x></div></div>
<div class="grid c"><div class="subgrid t1"><x></x><x></x></div></div>
<div class="grid r"><div class="subgrid t1"></div></div>
<div class="grid r"><div class="subgrid t1"><x></x></div></div>
<div class="grid r"><div class="subgrid t1"><x></x><x></x></div></div>
<div class="grid"><div class="subgrid t2"></div></div>
<div class="grid"><div class="subgrid t2"><x></x></div></div>
<div class="grid abs"><div class="subgrid t2 o"><x></x></div></div>
<div class="grid"><div class="subgrid t2"><x></x><x></x></div></div>
<div class="grid a"><div class="subgrid t2"></div></div>
<div class="grid a"><div class="subgrid t2"><x></x></div></div>
<div class="grid a"><div class="subgrid t2"><x></x><x></x></div></div>
<div class="grid c"><div class="subgrid t2"></div></div>
<div class="grid c"><div class="subgrid t2"><x></x></div></div>
<div class="grid c"><div class="subgrid t2"><x></x><x></x></div></div>
<div class="grid r"><div class="subgrid t2"></div></div>
<div class="grid r"><div class="subgrid t2"><x></x></div></div>
<div class="grid r"><div class="subgrid t2"><x></x><x></x></div></div>
<div class="grid"><div class="subgrid t3"></div></div>
<div class="grid"><div class="subgrid t3"><x></x></div></div>
<div class="grid abs"><div class="subgrid t3 o"><x></x></div></div>
<div class="grid"><div class="subgrid t3"><x></x><x></x></div></div>
<div class="grid a"><div class="subgrid t3"></div></div>
<div class="grid a"><div class="subgrid t3"><x></x></div></div>
<div class="grid a"><div class="subgrid t3"><x></x><x></x></div></div>
<div class="grid c"><div class="subgrid t3"></div></div>
<div class="grid c"><div class="subgrid t3"><x></x></div></div>
<div class="grid c"><div class="subgrid t3"><x></x><x></x></div></div>
<div class="grid r"><div class="subgrid t3"></div></div>
<div class="grid r"><div class="subgrid t3"><x></x></div></div>
<div class="grid r"><div class="subgrid t3"><x></x><x></x></div></div>
<br>
<div class="grid"><div class="subgrid t1"><a></a></div></div>
<div class="grid"><div class="subgrid t1"><a></a><a></a></div></div>
<div class="grid abs"><div class="subgrid t1 o"><a></a></div></div>
<div class="grid a"><div class="subgrid t1"><a></a></div></div>
<div class="grid a"><div class="subgrid t1"><a></a><a></a></div></div>
<div class="grid c"><div class="subgrid t1"><a></a></div></div>
<div class="grid c"><div class="subgrid t1"><a></a><a></a></div></div>
<div class="grid r"><div class="subgrid t1"><a></a></div></div>
<div class="grid r"><div class="subgrid t1"><a></a><a></a></div></div>
<div class="grid"><div class="subgrid t2"><a></a></div></div>
<div class="grid"><div class="subgrid t2"><a></a><a></a></div></div>
<div class="grid abs"><div class="subgrid t2 o"><a></a></div></div>
<div class="grid a"><div class="subgrid t2"><a></a></div></div>
<div class="grid a"><div class="subgrid t2"><a></a><a></a></div></div>
<div class="grid c"><div class="subgrid t2"><a></a></div></div>
<div class="grid c"><div class="subgrid t2"><a></a><a></a></div></div>
<div class="grid r"><div class="subgrid t2"><a></a></div></div>
<div class="grid r"><div class="subgrid t2"><a></a><a></a></div></div>
<div class="grid"><div class="subgrid t3"><a></a></div></div>
<div class="grid"><div class="subgrid t3"><a></a><a></a></div></div>
<div class="grid abs"><div class="subgrid t3 o"><a></a></div></div>
<div class="grid a"><div class="subgrid t3"><a></a></div></div>
<div class="grid a"><div class="subgrid t3"><a></a><a></a></div></div>
<div class="grid c"><div class="subgrid t3"><a></a></div></div>
<div class="grid c"><div class="subgrid t3"><a></a><a></a></div></div>
<div class="grid r"><div class="subgrid t3"><a></a></div></div>
<div class="grid r"><div class="subgrid t3"><a></a><a></a></div></div>
</body>
</html>

198
tests/wpt/web-platform-tests/css/css-grid/subgrid/abs-pos-004-ref.html
View file

@ -1,198 +0,0 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<title>Reference: abs.pos. subgrid edge cases</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
html,body {
color:black; background-color:white; font:15px/1 monospace;
}
body > div {
display: inline-block;
height: 20px;
border: 1px solid;
margin: 1px;
vertical-align: top;
}
body > div > div { height: 20px; background: lightgrey; }
body > div > div > div { height: 20px; }
</style>
</head>
<body>
<script>
let results = [
[ "10px", "0", "10px", "0", "10px", "lime" ],
[ "10px", "0", "10px", "0", "10px", "lime" ],
[ "10px", "0", "10px", "0", "10px", "lime" ],
[ "10px", "0", "10px", "0", "10px", "lime" ],
[ "10px", "0", "10px", "0", "10px", "lime" ],
[ "10px", "0", "10px", "0", "10px", "lime" ],
[ "10px", "0", "10px", "0", "10px", "lime" ],
[ "10px", "0", "10px", "0", "10px", "lime" ],
[ "10px", "0", "10px", "0", "10px", "lime" ],
[ "10px", "0", "10px", "0", "10px", "lime" ],
[ "10px", "0", "10px", "0", "10px", "lime" ],
[ "10px", "0", "10px", "0", "10px", "lime" ],
[ "50px", "0", "50px", "0", "10px", "lime" ],
[ "50px", "0", "50px", "0", "10px", "lime" ],
[ "50px", "0", "50px", "0", "50px", "lime" ],
[ "50px", "0", "50px", "0", "10px", "lime" ],
[ "50px", "0", "50px", "0", "10px", "lime" ],
[ "50px", "0", "50px", "0", "50px", "lime" ],
[ "50px", "0", "40px", "0", "40px", "lime" ],
[ "50px", "0", "40px", "0", "40px", "lime" ],
[ "50px", "0", "40px", "0", "40px", "lime" ],
[ "50px", "0", "40px", "0", "40px", "lime" ],
[ "50px", "0", "40px", "0", "40px", "lime" ],
[ "50px", "0", "40px", "0", "40px", "lime" ],
[ "10px", "0", "10px", "0", "10px", "blue" ],
[ "10px", "0", "10px", "0", "10px", "blue" ],
[ "10px", "0", "10px", "0", "10px", "blue" ],
[ "10px", "0", "10px", "0", "10px", "blue" ],
[ "10px", "0", "10px", "0", "10px", "blue" ],
[ "10px", "0", "10px", "0", "10px", "blue" ],
[ "10px", "0", "10px", "0", "10px", "blue" ],
[ "10px", "0", "10px", "0", "10px", "blue" ],
[ "10px", "0", "10px", "0", "10px", "blue" ],
[ "10px", "0", "10px", "0", "10px", "blue" ],
[ "10px", "0", "10px", "0", "10px", "blue" ],
[ "10px", "0", "10px", "0", "10px", "blue" ],
[ "50px", "0", "50px", "0", "10px", "blue" ],
[ "50px", "0", "50px", "0", "10px", "blue" ],
[ "50px", "0", "50px", "0", "50px", "blue" ],
[ "50px", "0", "50px", "0", "10px", "blue" ],
[ "50px", "0", "50px", "0", "10px", "blue" ],
[ "50px", "0", "50px", "0", "50px", "blue" ],
[ "50px", "0", "40px", "0", "40px", "blue" ],
[ "50px", "0", "40px", "0", "40px", "blue" ],
[ "50px", "0", "40px", "0", "40px", "blue" ],
[ "50px", "0", "40px", "0", "40px", "blue" ],
[ "50px", "0", "40px", "0", "40px", "blue" ],
[ "50px", "0", "40px", "0", "40px", "blue" ],
[ "20px", "0", "20px", "0", "20px", "lime" ],
[ "20px", "0", "20px", "0", "20px", "lime" ],
[ "20px", "0", "20px", "0", "20px", "lime" ],
[ "20px", "0", "20px", "0", "20px", "lime" ],
[ "20px", "0", "20px", "0", "20px", "lime" ],
[ "20px", "0", "20px", "0", "20px", "lime" ],
[ "20px", "0", "20px", "0", "20px", "lime" ],
[ "20px", "0", "20px", "0", "20px", "lime" ],
[ "20px", "0", "20px", "0", "20px", "lime" ],
[ "20px", "0", "20px", "0", "20px", "lime" ],
[ "20px", "0", "20px", "0", "20px", "lime" ],
[ "20px", "0", "20px", "0", "20px", "lime" ],
[ "50px", "0", "0", "20px", "30px", "lime" ],
[ "50px", "0", "0", "20px", "30px", "lime" ],
[ "50px", "0", "0", "20px", "30px", "lime" ],
[ "50px", "0", "0", "20px", "30px", "lime" ],
[ "50px", "0", "0", "20px", "30px", "lime" ],
[ "50px", "0", "0", "20px", "30px", "lime" ],
[ "50px", "0", "0", "0", "30px", "lime" ],
[ "50px", "0", "0", "0", "30px", "lime" ],
[ "50px", "0", "0", "0", "30px", "lime" ],
[ "50px", "0", "0", "0", "30px", "lime" ],
[ "50px", "0", "0", "0", "30px", "lime" ],
[ "50px", "0", "0", "0", "30px", "lime" ],
[ "20px", "0", "20px", "0", "20px", "blue" ],
[ "20px", "0", "20px", "0", "20px", "blue" ],
[ "20px", "0", "20px", "0", "20px", "blue" ],
[ "20px", "0", "20px", "0", "20px", "blue" ],
[ "20px", "0", "20px", "0", "20px", "blue" ],
[ "20px", "0", "20px", "0", "20px", "blue" ],
[ "20px", "0", "20px", "0", "20px", "blue" ],
[ "20px", "0", "20px", "0", "20px", "blue" ],
[ "20px", "0", "20px", "0", "20px", "blue" ],
[ "20px", "0", "20px", "0", "20px", "blue" ],
[ "20px", "0", "20px", "0", "20px", "blue" ],
[ "20px", "0", "20px", "0", "20px", "blue" ],
[ "50px", "0", "0", "20px", "30px", "blue" ],
[ "50px", "0", "0", "20px", "30px", "blue" ],
[ "50px", "0", "0", "20px", "30px", "blue" ],
[ "50px", "0", "0", "20px", "30px", "blue" ],
[ "50px", "0", "0", "20px", "30px", "blue" ],
[ "50px", "0", "0", "20px", "30px", "blue" ],
[ "50px", "0", "0", "0", "30px", "blue" ],
[ "50px", "0", "0", "0", "30px", "blue" ],
[ "50px", "0", "0", "0", "30px", "blue" ],
[ "50px", "0", "0", "0", "30px", "blue" ],
[ "50px", "0", "0", "0", "30px", "blue" ],
[ "50px", "0", "0", "0", "30px", "blue" ],
[ "30px", "0", "30px", "0", "30px", "lime" ],
[ "30px", "0", "30px", "0", "30px", "lime" ],
[ "30px", "0", "30px", "0", "30px", "lime" ],
[ "30px", "0", "30px", "0", "30px", "lime" ],
[ "30px", "0", "30px", "0", "30px", "lime" ],
[ "30px", "0", "30px", "0", "30px", "lime" ],
[ "30px", "0", "30px", "0", "30px", "lime" ],
[ "30px", "0", "30px", "0", "30px", "lime" ],
[ "30px", "0", "30px", "0", "30px", "lime" ],
[ "30px", "0", "30px", "0", "30px", "lime" ],
[ "30px", "0", "30px", "0", "30px", "lime" ],
[ "30px", "0", "30px", "0", "30px", "lime" ],
[ "50px", "20px", "30px", "0", "10px", "lime" ],
[ "50px", "20px", "30px", "0", "10px", "lime" ],
[ "50px", "0", "0", "20px", "30px", "lime" ],
[ "50px", "20px", "30px", "0", "10px", "lime" ],
[ "50px", "20px", "30px", "0", "10px", "lime" ],
[ "50px", "0", "0", "20px", "30px", "lime" ],
[ "50px", "0", "0", "0", "20px", "lime" ],
[ "50px", "0", "0", "0", "20px", "lime" ],
[ "50px", "0", "0", "0", "20px", "lime" ],
[ "50px", "0", "0", "0", "20px", "lime" ],
[ "50px", "0", "0", "0", "20px", "lime" ],
[ "50px", "0", "0", "0", "20px", "lime" ],
[ "30px", "0", "30px", "0", "30px", "blue" ],
[ "30px", "0", "30px", "0", "30px", "blue" ],
[ "30px", "0", "30px", "0", "30px", "blue" ],
[ "30px", "0", "30px", "0", "30px", "blue" ],
[ "30px", "0", "30px", "0", "30px", "blue" ],
[ "30px", "0", "30px", "0", "30px", "blue" ],
[ "30px", "0", "30px", "0", "30px", "blue" ],
[ "30px", "0", "30px", "0", "30px", "blue" ],
[ "30px", "0", "30px", "0", "30px", "blue" ],
[ "30px", "0", "30px", "0", "30px", "blue" ],
[ "30px", "0", "30px", "0", "30px", "blue" ],
[ "30px", "0", "30px", "0", "30px", "blue" ],
[ "50px", "20px", "30px", "0", "10px", "blue" ],
[ "50px", "20px", "30px", "0", "10px", "blue" ],
[ "50px", "0", "0", "20px", "30px", "blue" ],
[ "50px", "20px", "30px", "0", "10px", "blue" ],
[ "50px", "20px", "30px", "0", "10px", "blue" ],
[ "50px", "0", "0", "20px", "30px", "blue" ],
[ "50px", "0", "0", "0", "20px", "blue" ],
[ "50px", "0", "0", "0", "20px", "blue" ],
[ "50px", "0", "0", "0", "20px", "blue" ],
[ "50px", "0", "0", "0", "20px", "blue" ],
[ "50px", "0", "0", "0", "20px", "blue" ],
[ "50px", "0", "0", "0", "20px", "blue" ],
];
results.forEach(function(arr) {
let grid_width, subgrid_width, subgrid_pos, item_pos, item_width, item_bg;
[grid_width, subgrid_pos, subgrid_width, item_pos, item_width, item_bg] = arr;
let grid = document.createElement('div');
grid.style.width = grid_width;
let subgrid = document.createElement('div');
subgrid.style.width = subgrid_width;
subgrid.style.marginLeft = subgrid_pos;
let subgridItem = document.createElement('div');
subgridItem.style.width = item_width;
subgridItem.style.marginLeft = item_pos;
subgridItem.style.backgroundColor = item_bg;
subgrid.appendChild(subgridItem);
grid.appendChild(subgrid);
document.body.appendChild(grid);
});
</script>
</body>
</html>

104
tests/wpt/web-platform-tests/css/css-grid/subgrid/abs-pos-004.html
View file

@ -1,104 +0,0 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<title>CSS Grid Test: abs.pos. subgrid edge cases</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="match" href="abs-pos-004-ref.html">
<style>
html,body {
color:black; background-color:white; font:15px/1 monospace;
}
.grid {
position: relative;
display: inline-grid;
grid-auto-columns: 10px;
grid-auto-rows: 20px;
grid-auto-flow: column;
border: 1px solid;
margin: 1px;
vertical-align: top;
}
.subgrid {
position: absolute;
inset: 0;
display: grid;
background: lightgrey;
}
.t1 { grid: subgrid / subgrid; }
.t2 { grid: none / subgrid; }
.t3 { grid: subgrid / none; }
x {
background: lime;
grid-area: 1/1/-1/-1;
}
fail {
background: red;
}
.a {
position: absolute;
grid-area: 1/1/-1/-1;
inset: 0;
background: blue;
}
.o { overflow: hidden; }
.start .subgrid {
grid-column-start: 3;
}
.end .subgrid {
grid-column-end: 1;
}
.start, .end {
width: 50px;
}
.end {
justify-content: end;
}
.start > fail, .end > fail {
background: initial;
}
</style>
</head>
<body>
<script>
function make_grids(items, abspos) {
["", "o", "start", "end"].forEach(function(grid1) {
["", "o"].forEach(function(subgrid1) {
["t1", "t2", "t3"].forEach(function(subgrid2) {
let grid = document.createElement('div');
for (let i = 0; i < items; ++i) {
grid.appendChild(document.createElement('fail'));
}
grid.className = "grid " + grid1;
document.body.appendChild(grid);
document.body.offsetHeight;
let subgrid = document.createElement('div');
subgrid.className = "subgrid " + subgrid1 + " " + subgrid2;
let subgridItem = document.createElement('x');
if (abspos) {
subgridItem.className = "a";
}
subgrid.appendChild(subgridItem);
grid.appendChild(subgrid);
})
})
});
}
for (let i = 1; i <= 3; ++i) {
make_grids(i, false);
make_grids(i, true);
}
</script>
</body>
</html>

64
tests/wpt/web-platform-tests/css/css-grid/subgrid/auto-track-sizing-002-ref.html Normal file
View file

@ -0,0 +1,64 @@
<!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 auto track sizing</title>
<link rel="author" title="Matt Woodrow" href="https://bugs.webkit.org/show_bug.cgi?id=236951">
<style>
html,body {
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
}
.grid {
display: inline-grid;
max-width: 260px;
padding: 1px 5px;
border: 1px solid;
grid-template-columns: 100px;
}
.subgrid {
display: grid;
grid-template-columns: 100%;
margin: 0px 10px 0px 10px;
background: grey;
}
</style>
</head>
<body>
<article class="grid">
<div class="subgrid">
The cat can not be separated from milk
</div>
</article>
<article class="grid">
<div class="subgrid">
The cat can not be separated from milk
</div>
</article>
<article class="grid">
<div class="subgrid">
The cat can not be separated from milk
</div>
</article>
<article class="grid">
<div class="subgrid">
The cat can not be separated from milk
</div>
</article>
<article class="grid">
<div class="subgrid">
The cat can not be separated from milk
</div>
</article>
</body>
</html>

80
tests/wpt/web-platform-tests/css/css-grid/subgrid/auto-track-sizing-002.html Normal file
View file

@ -0,0 +1,80 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Test: subgrid auto track sizing</title>
<link rel="author" title="Matt Woodrow" href="https://bugs.webkit.org/show_bug.cgi?id=236951">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="match" href="auto-track-sizing-002-ref.html">
<style>
html,body {
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
}
.grid {
display: inline-grid;
max-width: 260px;
padding: 1px 5px;
border: 1px solid;
grid-template-columns: 100px;
}
.subgrid {
display: grid;
grid-template-rows: subgrid;
grid-template-columns: 100%;
margin: 0px 5px 0px 10px;
}
.inner {
margin: 0px 5px 0px 0px;
background: grey;
}
</style>
</head>
<body>
<article class="grid">
<div class="subgrid" style="margin: 0px 10px 0px 10px; background: grey">
The cat can not be separated from milk
</div>
</article>
<article class="grid">
<div class="subgrid">
<div class="subgrid inner">
The cat can not be separated from milk
</div>
</div>
</article>
<article class="grid">
<div class="subgrid" style="grid-template-columns: subgrid">
<div class="subgrid inner">
The cat can not be separated from milk
</div>
</div>
</article>
<article class="grid">
<div class="subgrid">
<div class="subgrid inner" style="grid-template-columns: subgrid">
The cat can not be separated from milk
</div>
</div>
</article>
<article class="grid">
<div class="subgrid" style="grid-template-columns: subgrid">
<div class="subgrid inner" style="grid-template-columns: subgrid">
The cat can not be separated from milk
</div>
</div>
</article>
</body>
</html>

23
tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-subgridded-axis-auto-repeater-crash-003.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid with a subgridded axis and an auto repeater as line name list</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<style>
.grid {
display: grid;
}
.subgrid {
grid-template-columns: subgrid repeat(auto-fill, [x]);
}
</style>
</head>
<body>
<div class="grid">
<div class="grid subgrid">
<div style="grid-column: x"></div>
</div>
</div>
</body>
</html>

3
tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-template-computed-nogrid.html
View file

@ -16,12 +16,15 @@
<script src="/css/support/computed-testcommon.js"></script>
<div id="target"></div>
<script>
test_computed_value("grid-template-columns", "subgrid []");
test_computed_value("grid-template-columns", "subgrid [a]");
test_computed_value("grid-template-columns", "subgrid [a] [b]");
test_computed_value("grid-template-columns", "subgrid [] [b]");
test_computed_value("grid-template-columns", "subgrid [a] [b] [b] [c]");
test_computed_value("grid-template-columns", "subgrid [a] [b c d] [e f] [e f] [g]");
test_computed_value("grid-template-columns", "subgrid [a b c] [d] [e f]");
test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c])");
test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [])");
test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c]) [g] [h i]");
test_computed_value("grid-template-columns", "subgrid [a] repeat(auto-fill, [c]) [g] [h i]");
test_computed_value("grid-template-columns", "subgrid [a b] repeat(auto-fill, [c]) [g]");

4
tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-template-invalid.html
View file

@ -22,6 +22,7 @@ test_invalid_value("grid-template-rows", 'subgrid repeat(auto-fill, line)');
test_invalid_value("grid-template-rows", 'subgrid repeat(2, 1px)');
test_invalid_value("grid-template-rows", 'subgrid repeat(2, line)');
test_invalid_value("grid-template-rows", 'subgrid repeat(2,');
test_invalid_value("grid-template-rows", 'subgrid repeat(auto-fill, [a]) repeat(auto-fill, [b]');
test_invalid_value("grid-template-columns", 'subgrid subgrid');
test_invalid_value("grid-template-columns", 'subgrid none');
@ -32,8 +33,9 @@ test_invalid_value("grid-template-columns", 'subgrid repeat(auto-fill, line)');
test_invalid_value("grid-template-columns", 'subgrid repeat(2, 1px)');
test_invalid_value("grid-template-columns", 'subgrid repeat(2, line)');
test_invalid_value("grid-template-columns", 'subgrid repeat(2,');
test_invalid_value("grid-template-columns", 'subgrid repeat(auto-fill, [a]) repeat(auto-fill, [b]');
</script>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-grid/subgrid/grid-template-valid.html
View file

@ -22,6 +22,7 @@ test_valid_value("grid-template-rows", 'subgrid [a] [b] [] [c]');
test_valid_value("grid-template-rows", 'subgrid [] [] [] [c]');
test_valid_value("grid-template-rows", 'subgrid [] [] [] []');
test_valid_value("grid-template-rows", 'subgrid repeat(auto-fill, [a])');
test_valid_value("grid-template-rows", 'subgrid repeat(auto-fill, [])');
test_valid_value("grid-template-rows", 'subgrid [a] repeat(auto-fill, [b])');
test_valid_value("grid-template-rows", 'subgrid [a] repeat(auto-fill, [b]) [c]');
test_valid_value("grid-template-rows", 'subgrid [] repeat(auto-fill, []) []');
@ -41,6 +42,7 @@ test_valid_value("grid-template-columns", 'subgrid [a] [b] [] [c]');
test_valid_value("grid-template-columns", 'subgrid [] [] [] [c]');
test_valid_value("grid-template-columns", 'subgrid [] [] [] []');
test_valid_value("grid-template-columns", 'subgrid repeat(auto-fill, [a])');
test_valid_value("grid-template-columns", 'subgrid repeat(auto-fill, [])');
test_valid_value("grid-template-columns", 'subgrid [a] repeat(auto-fill, [b])');
test_valid_value("grid-template-columns", 'subgrid [a] repeat(auto-fill, [b]) [c]');
test_valid_value("grid-template-columns", 'subgrid [] repeat(auto-fill, []) []');
@ -53,4 +55,4 @@ test_valid_value("grid-template-columns", 'subgrid [a] repeat(2, [b]) repeat(aut
</script>
</body>
</html>
</html>

35
tests/wpt/web-platform-tests/css/css-grid/subgrid/independent-formatting-context-ref.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Test: subgrid disabled if grid item establishes independent formatting context</title>
<link rel="author" title="Matt Woodrow" href="https://bugs.webkit.org/show_bug.cgi?id=237692">
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
<style>
html,body {
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
}
.grid {
display: inline-block;
background-color: green;
width: 100px;
height: 100px;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="grid">
</div>
<div class="grid">
</div>
</body>
</html>

61
tests/wpt/web-platform-tests/css/css-grid/subgrid/independent-formatting-context.html Normal file
View file

@ -0,0 +1,61 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Test: subgrid disabled if grid item establishes independent formatting context</title>
<link rel="author" title="Matt Woodrow" href="https://bugs.webkit.org/show_bug.cgi?id=237692">
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
<link rel="match" href="independent-formatting-context-ref.html">
<style>
html,body {
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
}
.grid {
position: relative;
display: inline-grid;
grid-template-rows: 0px 100px;
width: 100px;
margin-right: 20px;
}
.subgrid {
display: grid;
grid-template-rows: subgrid;
grid-row: 1 / 3;
width: 100px;
height: 100px;
background-color: red;
}
.first {
background-color: green;
grid-row: 1;
}
.second {
background-color: red;
grid-row: 2;
}
</style>
</head>
<body>
<div class="grid">
<div class="subgrid" style="position:absolute">
<div class="first"></div>
</div>
</div>
<div class="grid">
<div class="subgrid" style="contain: layout">
<div class="first"></div>
</div>
</div>
</body>
</html>

40
tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-002-ref.html Normal file
View file

@ -0,0 +1,40 @@
<!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 item using line names from outer grid</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
html,body {
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
}
.grid {
display: grid;
grid: auto / [a] 50px 40px [a] 10px 50px [a];
padding: 20px 10px;
}
.subgrid {
display: grid;
grid: 50px / subgrid;
grid-column: span 3;
}
x { background: grey; }
</style>
</head>
<body>
<div class="grid">
<div class="subgrid">
<x style="grid-column: 3 / 4"></x>
</div>
</div>
</body>
</html>

2
tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-002.html
View file

@ -8,7 +8,7 @@
<title>CSS Grid Test: subgrid item using line names from outer grid</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="match" href="line-names-001-ref.html">
<link rel="match" href="line-names-002-ref.html">
<style>
html,body {
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;

8
tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-005-ref.html
View file

@ -115,7 +115,7 @@ x {
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div class="subgrid2">
<x style="grid-column: span 4 / 11">x</x>
<x style="grid-column: span 3 / 11">x</x>
</div>
</div>
@ -129,7 +129,7 @@ x {
<div style="display:grid; grid: auto / repeat(10, 50px) repeat(10, [a] 50px) [a]">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column: span 10; grid-row:2">
<x style="grid-column: 1 / 11">x</x>
<x style="grid-column: 10 / 11">x</x>
</div>
</div>
@ -141,10 +141,10 @@ x {
</div>
<div style='display:grid; grid-template-areas: ". . . . . . a a a a"'>
<div style='display:grid; grid-template-areas: ". . . . . . . a a a"; grid-template-columns:subgrid; grid-column:span 10;'>
<div style='display:grid; grid-template-areas: ". . . . . . . a a ."; grid-template-columns:subgrid; grid-column:span 10;'>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2">
<x style="grid-column: 2 / 6">x</x>
<x style="grid-column: 2 / 5">x</x>
</div>
</div>
</div>

2
tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-005.html
View file

@ -143,7 +143,7 @@ x {
</div>
<div style='display:grid; grid-template-areas: ". . . . . . a a a a"'>
<div style='display:grid; grid-template-areas: ". . . . . . . a a a"; grid-template-columns:subgrid; grid-column:span 10;'>
<div style='display:grid; grid-template-areas: ". . . . . . . a a ."; grid-template-columns:subgrid; grid-column:span 10;'>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2">
<x style="grid-column: a">x</x>

4
tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-008.html
View file

@ -146,14 +146,14 @@ x {
</div>
</div>
<div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)">
<div class="grid" style="grid-template-columns: 30px [a] repeat(2,30px) [a] 30px repeat(7,30px)">
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
<div class="hr" style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6">
<x style="grid-column: a/span a">x</x>
</div>
</div>
<div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)">
<div class="grid" style="grid-template-columns: 30px [a] repeat(2,30px) [a] 30px repeat(7,30px)">
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
<div class="hr" style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6">
<x style="grid-column: a/a 2">x</x>

75
tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-009-ref.html Normal file
View file

@ -0,0 +1,75 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: subgrid line names are not inherited to a non-subgridded axis</title>
<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<style>
html,body {
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
}
div > div { background: grey; grid-column:2 / span 2; }
i {
grid-row: 1;
counter-increment: i;
}
i::before { content: counter(i, decimal); }
x { background: silver; }
</style>
</head>
<body>
<div style="display:grid;">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid [a][b][c][d][e]; grid-column:2 / 9;">
<div style="display:grid; grid:subgrid/auto; grid-column:1 / 4;">
<x style="grid-column:c">x</x>
</div>
</div>
</div>
<div style="display:grid;">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid [a][b][c][d][e]; grid-column:2 / 9;">
<div style="display:grid; grid:subgrid/auto; grid-column:c / 4;">
<x style="grid-column:span 1">x</x>
</div>
</div>
</div>
<div style="display:grid;">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid [a][b][c][c][c]; grid-column:2 / 9;">
<div style="display:grid; grid:subgrid/auto; grid-column:c 2 / 4;">
<x style="grid-column:4">x</x>
</div>
</div>
</div>
<div style="display:grid;">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid [a][b][c][c][c]; grid-column:2 / 9;">
<div style="display:grid; grid:subgrid/auto; grid-column:c 2 / 4;">
<x style="grid-column:span 1">x</x>
</div>
</div>
</div>
<div style="display:grid;">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid [a][b][c][c][c]; grid-column:2 / 9;">
<div style="display:grid; grid:subgrid/auto; grid-column:c-1 / c 3;">
<x style="grid-column:span 1">x</x>
</div>
</div>
</div>
</body>
</html>

76
tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-009.html Normal file
View file

@ -0,0 +1,76 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: subgrid line names are not inherited to a non-subgridded axis</title>
<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="match" href="line-names-009-ref.html">
<style>
html,body {
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
}
div > div { background: grey; grid-column:2 / span 2; }
i {
grid-row: 1;
counter-increment: i;
}
i::before { content: counter(i, decimal); }
x { background: silver; }
</style>
</head>
<body>
<div style="display:grid;">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid [a][b][c][d][e]; grid-column:2 / 9;">
<div style="display:grid; grid:subgrid/auto; grid-column:1 / 4;">
<x style="grid-column:c">x</x>
</div>
</div>
</div>
<div style="display:grid;">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid [a][b][c][d][e]; grid-column:2 / 9;">
<div style="display:grid; grid:subgrid/auto; grid-column:c / 4;">
<x style="grid-column:span c">x</x>
</div>
</div>
</div>
<div style="display:grid;">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid [a][b][c][c][c]; grid-column:2 / 9;">
<div style="display:grid; grid:subgrid/auto; grid-column:c 2 / 4;">
<x style="grid-column:c 2">x</x>
</div>
</div>
</div>
<div style="display:grid;">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid [a][b][c][c][c]; grid-column:2 / 9;">
<div style="display:grid; grid:subgrid/auto; grid-column:c 2 / 4;">
<x style="grid-column:span c 2">x</x>
</div>
</div>
</div>
<div style="display:grid;">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid [a][b][c][c][c]; grid-column:2 / 9;">
<div style="display:grid; grid:subgrid/auto; grid-column:c-1 / c 3;">
<x style="grid-column:span c">x</x>
</div>
</div>
</div>
</body>
</html>

106
tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-010-ref.html Normal file
View file

@ -0,0 +1,106 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: subgrid implicit line names are clamped to the subgrid axis</title>
<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<style>
html,body {
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
}
div > div { background: grey; grid-column:2 / span 2; }
i {
grid-row: 1;
counter-increment: i;
}
i::before { content: counter(i, decimal); }
x { background: silver; }
</style>
</head>
<body>
<div style="display:grid; grid-template-areas: '. . . . . . a a a ';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;">
<x style="grid-column: 3 / 5">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: 'a a a';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;">
<x style="grid-column: 5">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: '. . . . . . a a a ';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;">
<x style="grid-column: 3 / 5">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: 'a a a';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;">
<x style="grid-column: 5">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: '. . . . . . a a a ';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'";>
<x style="grid-column: 1 / 4">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: 'a a a';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'">
<x style="grid-column: 1 / 4">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: '. . . . . . a a a ';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'">
<x style="grid-column: 1 / 4"">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: 'a a a';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'">
<x style="grid-column: 1 / 4"">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: 'a a a';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column:3 / 9; grid-template-areas: 'a a a'">
<x style="grid-column: 1"">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: 'a a a';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid [a];">
<x style="grid-column: 1 / 3">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: 'a a a';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid [b] [b] [b] [a]; grid-column:1 / 9;">
<x style="grid-column: 1 / 4">x</x>
</div>
</div>
</body>
</html>

107
tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-010.html Normal file
View file

@ -0,0 +1,107 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: subgrid implicit line names are clamped to the subgrid axis</title>
<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="match" href="line-names-010-ref.html">
<style>
html,body {
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
}
div > div { background: grey; grid-column:2 / span 2; }
i {
grid-row: 1;
counter-increment: i;
}
i::before { content: counter(i, decimal); }
x { background: silver; }
</style>
</head>
<body>
<div style="display:grid; grid-template-areas: '. . . . . . a a a ';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;">
<x style="grid-column: a">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: 'a a a';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;">
<x style="grid-column: a">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: '. . . . . . a a a ';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;">
<x style="grid-column: a-start / a-end">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: 'a a a';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;">
<x style="grid-column: a-start / a-end">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: '. . . . . . a a a ';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'";>
<x style="grid-column: a">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: 'a a a';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'">
<x style="grid-column: a">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: '. . . . . . a a a ';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'">
<x style="grid-column: a-start / a-end">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: 'a a a';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'">
<x style="grid-column: a-start / a-end">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: 'a a a';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid; grid-column:3 / 9; grid-template-areas: 'a a a'">
<x style="grid-column: a-start / a-end">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: 'a a a';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid [a];">
<x style="grid-column: a">x</x>
</div>
</div>
<div style="display:grid; grid-template-areas: 'a a a';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:auto/subgrid [b] [b] [b] [a]; grid-column:1 / 9;">
<x style="grid-column: a">x</x>
</div>
</div>
</body>
</html>

41
tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-011-ref.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: subgrid line names do not apply to non-subgrids</title>
<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<style>
html,body {
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
}
div > div { background: grey; grid-column:2 / span 2; }
i {
grid-row: 1;
counter-increment: i;
}
i::before { content: counter(i, decimal); }
x { background: silver; }
</style>
</head>
<body>
<div style="display:grid; grid-template-columns: subgrid [a] [b] [c] [d];">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<x style="grid-column: 2 / 3">x</x>
</div>
<div style="display:grid; grid-template-columns: 'auto [a] auto [b]';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:subgrid [c] [d] [d] [e] / auto; ">
<x style="grid-column: 3">x</x>
</div>
</div>
</body>
</html>

42
tests/wpt/web-platform-tests/css/css-grid/subgrid/line-names-011.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: subgrid line names do not apply to non-subgrids</title>
<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="match" href="line-names-011-ref.html">
<style>
html,body {
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
}
div > div { background: grey; grid-column:2 / span 2; }
i {
grid-row: 1;
counter-increment: i;
}
i::before { content: counter(i, decimal); }
x { background: silver; }
</style>
</head>
<body>
<div style="display:grid; grid-template-columns: subgrid [a] [b] [c] [d];">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<x style="grid-column: a / d">x</x>
</div>
<div style="display:grid; grid-template-columns: 'auto [a] auto [b]';">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div style="display:grid; grid:subgrid [c] [d] [d] [e] / auto; ">
<x style="grid-column: c">x</x>
</div>
</div>
</body>
</html>

52
tests/wpt/web-platform-tests/css/css-grid/subgrid/parent-repeat-auto-fit-001.html
View file

@ -14,6 +14,10 @@ html,body {
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
}
#report {
white-space: pre-wrap;
}
.grid {
display: inline-grid;
width: 50px;
@ -28,8 +32,8 @@ html,body {
background: grey;
}
.fit-0a { grid-template-columns: repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] 1px [z] }
.fit-0b { grid-template-columns: [x] repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] }
.fit-0a { grid-template-columns: repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] 1px [z] minmax(0, auto) }
.fit-0b { grid-template-columns: [x] repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] minmax(0, auto) minmax(0, auto) }
.fit-0c { grid-template-columns: [x] 1px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] }
.fit-0d { grid-template-columns: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
.fit-0e { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] }
@ -49,18 +53,18 @@ html,body {
.fit-1e { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
.fit-2a { grid-template-columns: repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] }
.fit-2b { grid-template-columns: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
.fit-2c { grid-template-columns: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] }
.fit-2b { grid-template-columns: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] minmax(0, auto) }
.fit-2c { grid-template-columns: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] minmax(0, auto) }
.fit-2d { grid-template-columns: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
.fit-3a { grid-template-columns: repeat(auto-fit, [y] 10px) [z] 1px [z] }
.fit-3b { grid-template-columns: [x] repeat(auto-fit, [y] 10px) [z] }
.fit-3c { grid-template-columns: [x] 2px [x] repeat(auto-fit, [y] 10px) }
.fit-3a { grid-template-columns: repeat(auto-fit, [y] 10px) [z] 1px [z] minmax(0, auto) }
.fit-3b { grid-template-columns: [x] repeat(auto-fit, [y] 10px) [z] minmax(0, auto) }
.fit-3c { grid-template-columns: [x] 2px [x] repeat(auto-fit, [y] 10px) minmax(0, auto) }
.fit-4a { grid-template-columns: repeat(auto-fit, [y] 10px) [z] }
.fit-4b { grid-template-columns: [x] repeat(auto-fit, [y] 10px) }
.fit-4a { grid-template-columns: repeat(auto-fit, [y] 10px) [z] minmax(0, auto) }
.fit-4b { grid-template-columns: [x] repeat(auto-fit, [y] 10px) minmax(0, auto) }
.fit-5 { grid-template-columns: repeat(auto-fit, [y] 10px) }
.fit-5 { grid-template-columns: repeat(auto-fit, [y] 10px) minmax(0, auto) }
.subgrid > :nth-child(2n) { background: black; }
.subgrid > :nth-child(2n+1) { background: pink; }
@ -433,10 +437,12 @@ html,body {
<div style="grid-column:y -5"></div>
</div></div>
<div id="report"></div>
<script>
const expectedResults = [
"[y] 0px [z] 1px [z] 1px [z] 1px [z] 1px [z]",
"[x y] 0px [z] 1px [z] 1px [z] 1px [z]",
"[y] 0px [z] 1px [z] 1px [z] 1px [z] 1px [z] 46px",
"[x y] 0px [z] 1px [z] 1px [z] 1px [z] 23.5px 23.5px",
"[x] 1px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z] 1px [z]",
"[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z] 1px [z]",
"[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px [z]",
@ -454,23 +460,23 @@ html,body {
"[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z]",
"[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px",
"[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]",
"[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]",
"[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z]",
"[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 29px",
"[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 18px",
"[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px",
"[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]",
"[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]",
"[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px",
"[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]",
"[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px",
"[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px",
"[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 29px",
"[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z] 20px",
"[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px 18px",
"[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z] 20px",
"[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px 20px",
"[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px 20px",
];
[...document.querySelectorAll('.grid')].forEach(function(grid, i) {
let actual = window.getComputedStyle(grid)['grid-template-columns'];
let expected = expectedResults[i];
if (actual != expected) {
let err = "Unexpected getComputedStyle value for grid " + i + " with className '" + grid.className + "':" +
" Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
document.body.appendChild(document.createTextNode(err));
let err = "\nUnexpected getComputedStyle value for grid " + i + " with className '" + grid.className + "':" +
" Actual: \"" + actual + "\", Expected: \"" + expected + "\"\n";
report.appendChild(document.createTextNode(err));
}
});
</script>

52
tests/wpt/web-platform-tests/css/css-grid/subgrid/parent-repeat-auto-fit-002.html
View file

@ -14,6 +14,10 @@ html,body {
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
}
#report {
white-space: pre-wrap;
}
.grid {
display: inline-grid;
height: 50px;
@ -32,8 +36,8 @@ html,body {
background: grey;
}
.fit-0a { grid-template-rows: repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] 1px [z] }
.fit-0b { grid-template-rows: [x] repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] }
.fit-0a { grid-template-rows: repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] 1px [z] minmax(0, auto) }
.fit-0b { grid-template-rows: [x] repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] minmax(0, auto) minmax(0, auto) }
.fit-0c { grid-template-rows: [x] 1px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] }
.fit-0d { grid-template-rows: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
.fit-0e { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] }
@ -53,18 +57,18 @@ html,body {
.fit-1e { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
.fit-2a { grid-template-rows: repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] }
.fit-2b { grid-template-rows: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
.fit-2c { grid-template-rows: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] }
.fit-2b { grid-template-rows: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] minmax(0, auto) }
.fit-2c { grid-template-rows: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] minmax(0, auto) }
.fit-2d { grid-template-rows: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
.fit-3a { grid-template-rows: repeat(auto-fit, [y] 10px) [z] 1px [z] }
.fit-3b { grid-template-rows: [x] repeat(auto-fit, [y] 10px) [z] }
.fit-3c { grid-template-rows: [x] 2px [x] repeat(auto-fit, [y] 10px) }
.fit-3a { grid-template-rows: repeat(auto-fit, [y] 10px) [z] 1px [z] minmax(0, auto) }
.fit-3b { grid-template-rows: [x] repeat(auto-fit, [y] 10px) [z] minmax(0, auto) }
.fit-3c { grid-template-rows: [x] 2px [x] repeat(auto-fit, [y] 10px) minmax(0, auto) }
.fit-4a { grid-template-rows: repeat(auto-fit, [y] 10px) [z] }
.fit-4b { grid-template-rows: [x] repeat(auto-fit, [y] 10px) }
.fit-4a { grid-template-rows: repeat(auto-fit, [y] 10px) [z] minmax(0, auto) }
.fit-4b { grid-template-rows: [x] repeat(auto-fit, [y] 10px) minmax(0, auto) }
.fit-5 { grid-template-rows: repeat(auto-fit, [y] 10px) }
.fit-5 { grid-template-rows: repeat(auto-fit, [y] 10px) minmax(0, auto) }
.subgrid > :nth-child(2n) { background: black; }
.subgrid > :nth-child(2n+1) { background: pink; }
@ -437,10 +441,12 @@ html,body {
<div style="grid-row:y -5"></div>
</div></div>
<div id="report"></div>
<script>
const expectedResults = [
"[y] 0px [z] 1px [z] 1px [z] 1px [z] 1px [z]",
"[x y] 0px [z] 1px [z] 1px [z] 1px [z]",
"[y] 0px [z] 1px [z] 1px [z] 1px [z] 1px [z] 46px",
"[x y] 0px [z] 1px [z] 1px [z] 1px [z] 23.5px 23.5px",
"[x] 1px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z] 1px [z]",
"[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z] 1px [z]",
"[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px [z]",
@ -458,23 +464,23 @@ html,body {
"[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z]",
"[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px",
"[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]",
"[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]",
"[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z]",
"[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 29px",
"[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 18px",
"[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px",
"[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]",
"[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]",
"[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px",
"[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]",
"[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px",
"[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px",
"[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 29px",
"[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z] 20px",
"[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px 18px",
"[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z] 20px",
"[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px 20px",
"[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px 20px",
];
[...document.querySelectorAll('.grid')].forEach(function(grid, i) {
let actual = window.getComputedStyle(grid)['grid-template-rows'];
let expected = expectedResults[i];
if (actual != expected) {
let err = "Unexpected getComputedStyle value for grid " + i + " with className '" + grid.className + "':" +
" Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
document.body.appendChild(document.createTextNode(err));
let err = "\nUnexpected getComputedStyle value for grid " + i + " with className '" + grid.className + "':" +
" Actual: \"" + actual + "\", Expected: \"" + expected + "\"\n";
report.appendChild(document.createTextNode(err));
}
});
</script>

55
tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-baseline-001-ref.html Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>Reference: baseline-aligned subgrid item with padding</title>
<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
html,body {
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
}
.grid {
display: grid;
grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
place-content: start;
place-items: baseline start;
border: 1px solid;
text-decoration: underline blue;
}
.subgrid {
background: lightgrey;
grid-column: 2 / span 4;
grid-row: 3 / span 2;
min-width: 10px;
min-height: 0;
background: yellow;
padding-top: 20px;
}
x, z {
display: block;
min-width: 20px;
min-height: 10px;
font-size: 8em;
background: silver;
}
z {
width: 20px;
height: 10px;
}
</style>
</head>
<body>
<div class="grid">
<y style="grid-area:3/1">A&nbsp;</y>
<div class="subgrid">
<z></z><x>&nbsp;A</x>
</div>
</div>
</body>
</html>

56
tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-baseline-001.html Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: baseline-aligned subgrid item with padding</title>
<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<link rel="match" href="subgrid-baseline-001-ref.html">
<style>
html,body {
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
}
.grid {
display: grid;
grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
place-content: start;
place-items: baseline start;
border: 1px solid;
text-decoration: underline blue;
}
.subgrid {
display: grid;
grid: subgrid / auto;
background: lightgrey;
grid-column: 2 / span 4;
grid-row: 3 / span 2;
min-width: 10px;
min-height: 0;
background: yellow;
place-content: inherit;
place-items: inherit;
padding-top: 20px;
}
x {
min-width: 20px;
min-height: 10px;
font-size: 8em;
background: silver;
}
</style>
</head>
<body>
<div class="grid">
<y style="grid-area:4/1">A&nbsp;</y>
<div class="subgrid">
<x style="grid-row:2">&nbsp;A</x><x></x>
</div>
</div>
</body>
</html>

54
tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-baseline-002-ref.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>Reference: baseline-aligned subgrid item with orthogonal writing-mode</title>
<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
html,body {
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
}
.grid {
display: grid;
grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
place-content: start;
place-items: baseline start;
border: 1px solid;
text-decoration: underline blue;
}
.subgrid {
background: lightgrey;
grid-column: 2 / span 4;
grid-row: 3 / span 2;
min-width: 10px;
min-height: 0;
background: yellow;
}
x, z {
display: block;
min-width: 20px;
min-height: 10px;
font-size: 8em;
background: silver;
}
z {
width: 20px;
height: 10px;
}
</style>
</head>
<body>
<div class="grid">
<y style="grid-area:3/1">A&nbsp;</y>
<div class="subgrid">
<z></z><x style="margin-left: 20px">&nbsp;A</x>
</div>
</div>
</body>
</html>

57
tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-baseline-002.html Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: baseline-aligned subgrid item with orthogonal writing-mode</title>
<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<link rel="match" href="subgrid-baseline-002-ref.html">
<style>
html,body {
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
}
.grid {
display: grid;
grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
place-content: start;
place-items: baseline start;
border: 1px solid;
text-decoration: underline blue;
}
.subgrid {
display: grid;
grid: auto / subgrid;
background: lightgrey;
grid-column: 2 / span 4;
grid-row: 3 / span 2;
min-width: 10px;
min-height: 0;
background: yellow;
place-content: inherit;
place-items: start baseline;
writing-mode: vertical-rl;
}
x {
min-width: 20px;
min-height: 10px;
font-size: 8em;
background: silver;
writing-mode: horizontal-tb;
}
</style>
</head>
<body>
<div class="grid">
<y style="grid-area:4/1">A&nbsp;</y>
<div class="subgrid">
<x style="grid-column:2">&nbsp;A</x><x></x>
</div>
</div>
</body>
</html>

37
tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-baseline-003-ref.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Test: baseline-aligned subgrid item</title>
<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
html,body {
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
}
.grid {
display: grid;
grid-template-columns: auto auto;
max-width: 100px;
place-items: baseline start;
}
.first {
font-size: 3em;
}
.second {
font-size: 2em;
}
</style>
</head>
<body>
<div class="grid">
<div class="first">A</div>
<div class="second">A</div>
</div>
</body>
</html>

52
tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-baseline-003.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Test: baseline-aligned subgrid item</title>
<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<link rel="match" href="subgrid-baseline-003-ref.html">
<style>
html,body {
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
}
.grid {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
max-width: 100px;
place-items: baseline start;
}
.subgrid {
display: grid;
grid-template-rows: subgrid;
grid-row: 1 / 3;
grid-column: 2;
padding-bottom: 20px;
place-items: inherit;
}
.first {
font-size: 3em;
grid-row: 2;
}
.second {
font-size: 2em;
grid-row: 2;
}
</style>
</head>
<body>
<div class="grid">
<div class="first">A</div>
<div class="subgrid">
<div class="second">A</div>
</div>
</div>
</body></html>

36
tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-baseline-004-ref.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Test: baseline-aligned subgrid item</title>
<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
html,body {
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
}
.grid {
display: grid;
grid-template-columns: 50px 50px;
place-items: baseline start;
}
.first {
font-size: 3em;
}
.second {
font-size: 2em;
}
</style>
</head>
<body>
<div class="grid">
<div class="first">A</div>
<div class="second">A</div>
</div>
</body>
</html>

54
tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-baseline-004.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Test: baseline-aligned subgrid item</title>
<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<link rel="match" href="subgrid-baseline-004-ref.html">
<style>
html,body {
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
}
.grid {
display: grid;
grid-template-columns: 50px 50px;
grid-template-rows: auto auto;
place-items: baseline start;
}
.subgrid {
display: grid;
grid-template-columns: subgrid;
grid-row: 1 / 3;
grid-column: 2;
padding-bottom: 20px;
writing-mode: vertical-lr;
place-items: start baseline;
}
.first {
font-size: 3em;
grid-row: 2;
}
.second {
font-size: 2em;
grid-column: 2;
writing-mode: horizontal-tb;
}
</style>
</head>
<body>
<div class="grid">
<div class="first">A</div>
<div class="subgrid">
<div class="second">A</div>
</div>
</div>
</body>
</html>

233
tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-mbp-overflow-001-ref.html
View file

@ -1,233 +0,0 @@
<!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>

222
tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-mbp-overflow-001.html
View file

@ -1,222 +0,0 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: subgrid margin/border/padding that overflow the edge track</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="match" href="subgrid-mbp-overflow-001-ref.html">
<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;
grid: auto / subgrid;
min-width: 0;
min-height: 30px;
background: pink;
border:1px solid;
margin: 0 4px 0 3px;
position: relative;
}
.c1 { grid-column: 2 / span 1; }
.c2 { grid-column: 2 / span 2; }
.c3 { grid-column: 2 / span 3; }
.pr { padding-right: 30px; }
.pl { padding-left: 30px; }
.plr { padding: 0 50px 0 80px; }
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; }
</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><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c3 pl"><x></x><a></a><b></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></x><a></a><b></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 pr"><x></x><a></a><b></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></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c3 plr"><x></x><a></a><b></b><x></x><a></a><b></b><x></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></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c2 pl"><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 c2 plr"><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 c2 pr"><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 c2 pl"><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 c2 plr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
</div>
<div class=f>
<div class="grid">
<y></y><y></y>
<div class="subgrid c1 pr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c1 pl"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c1 plr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c1 pr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c1 pl"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c1 plr"><x></x><a></a><b></b></div>
</div>
</div>
</body>
</html>

224
tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-mbp-overflow-002.html
View file

@ -1,224 +0,0 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: orthogonal writing-mode subgrid margin/border/padding that overflow the edge track</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="match" href="subgrid-mbp-overflow-001-ref.html">
<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;
grid: subgrid / auto;
min-width: 0;
min-height: 30px;
background: pink;
border:1px solid;
margin: 0 4px 0 3px;
position: relative;
writing-mode: vertical-lr;
}
.rtl > .subgrid { writing-mode: vertical-rl; }
.c1 { grid-column: 2 / span 1; }
.c2 { grid-column: 2 / span 2; }
.c3 { grid-column: 2 / span 3; }
.pr { padding-right: 30px; }
.pl { padding-left: 30px; }
.plr { padding: 0 50px 0 80px; }
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-row-start: 1;
inset: 0;
top: 3px;
border-top: 2px solid grey;
}
a:nth-of-type(2) {
grid-row-start: 2;
top: 6px;
}
a:nth-of-type(3) {
grid-row-start: 3;
top: 9px;
}
b {
position: absolute;
grid-row-end: 1;
inset: 0;
top: 12px;
border-top: 2px solid grey;
}
b:nth-of-type(2) {
grid-row-end: 2;
top: 15px;
}
b:nth-of-type(3) {
grid-row-end: 3;
top: 18px;
}
.f { float:left; margin-left:80px; }
</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><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c3 pl"><x></x><a></a><b></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></x><a></a><b></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 pr"><x></x><a></a><b></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></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c3 plr"><x></x><a></a><b></b><x></x><a></a><b></b><x></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></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c2 pl"><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 c2 plr"><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 c2 pr"><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 c2 pl"><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 c2 plr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
</div>
<div class=f>
<div class="grid">
<y></y><y></y>
<div class="subgrid c1 pr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c1 pl"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c1 plr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c1 pr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c1 pl"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c1 plr"><x></x><a></a><b></b></div>
</div>
</div>
</body>
</html>

173
tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-mbp-overflow-003-ref.html
View file

@ -1,173 +0,0 @@
<!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; }
.ltr { direction: ltr; }
.subgrid {
display: grid;
justify-content: space-between;
justify-self: self-start;
min-width: 0;
min-height: 30px;
background: pink;
border:1px solid;
margin: 0 4px 0 3px;
position: relative;
}
.c1 { grid-column: 4 / span 1; }
.c3 { grid-column: 2 / span 3; }
y {
background: blue;
height: 10px;
}
y:nth-of-type(1) { grid-column: 2; }
y:nth-of-type(2) { grid-column: 4; }
x { background: silver; border-inline-start: 2px solid lime; }
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:10px; }
.c1 { width: 30px; }
.ltr.c1.pl > x, .rtl.c1.pr > x {
padding-inline-start: 15px;
border-inline: none;
border-inline-end: 2px solid lime;
background: pink;
}
.ltr.c1.pl > x { padding-inline-start: 16px; }
.rtl.c1.pr > a { width: 15px; margin-inline-start: 15px; }
.ltr.c1.pl > a { width: 14px; margin-inline-start: 16px;}
.rtl.c1.pr > b { width: 15px; }
.ltr.c1.pl > b { width: 16px; }
.c3 { width: 55px; grid: auto / 15px 10px 26px; }
.rtl.c3.pl { padding-inline-end: 4px; }
.ltr.c3.pr { padding-inline-end: 5px; }
.ltr.c3 { grid: auto / 16px 10px 25px; }
.rtl.c3.pr > a:nth-of-type(1) { width: 40px; right: 15px; }
.ltr.c3.pl > a:nth-of-type(1) { width: 39px; left: 16px; }
.rtl.c3.pr > b:nth-of-type(1),
.rtl.c3.pr > b:nth-of-type(2){ width: 15px; }
.ltr.c3.pl > b:nth-of-type(1),
.ltr.c3.pl > b:nth-of-type(2){ width: 16px; }
x.zero { background: pink; }
</style>
</head>
<body>
<div class=f>
<div class="grid ltr">
<y></y><y></y>
<div class="subgrid rtl c3 pr"><x class="zero" style="margin-right:15px"></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid ltr">
<y></y><y></y>
<div class="subgrid rtl c3 pl"><x></x><a></a><b></b><x></x><a></a><b></b><x class="zero"></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid ltr c3 pr"><x></x><a></a><b></b><x></x><a></a><b></b><x class="zero"></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid ltr c3 pl"><x class="zero" style="margin-left:16px"></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
</div>
<div class=f>
<div class="grid ltr">
<y></y><y></y>
<div class="subgrid rtl c1 pr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid ltr">
<y></y><y></y>
<div class="subgrid rtl c1 pl"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid ltr c1 pr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid ltr c1 pl"><x></x><a></a><b></b></div>
</div>
</div>
</body>
</html>

151
tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-mbp-overflow-003.html
View file

@ -1,151 +0,0 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: subgrid margin/border/padding that overflow the edge track</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="match" href="subgrid-mbp-overflow-003-ref.html">
<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; }
.ltr { direction: ltr; }
.subgrid {
display: grid;
grid: auto / subgrid;
justify-self: self-start;
min-width: 0;
min-height: 30px;
background: pink;
border:1px solid;
margin: 0 4px 0 3px;
position: relative;
}
.c1 { grid-column: 4 / span 1; }
.c3 { grid-column: 2 / span 3; }
.pr { padding-right: 30px; }
.pl { padding-left: 30px; }
y {
background: blue;
height: 10px;
}
y:nth-of-type(1) { grid-column: 2; }
y:nth-of-type(2) { grid-column: 4; }
x { background: silver; border-inline-start: 2px solid lime; }
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:10px; }
</style>
</head>
<body>
<div class=f>
<div class="grid ltr">
<y></y><y></y>
<div class="subgrid rtl c3 pr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid ltr">
<y></y><y></y>
<div class="subgrid rtl c3 pl"><x></x><a></a><b></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 ltr c3 pr"><x></x><a></a><b></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 ltr c3 pl"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
</div>
<div class=f>
<div class="grid ltr">
<y></y><y></y>
<div class="subgrid rtl c1 pr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid ltr">
<y></y><y></y>
<div class="subgrid rtl c1 pl"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid ltr c1 pr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid ltr c1 pl"><x></x><a></a><b></b></div>
</div>
</div>
</body>
</html>

73
tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-mbp-overflow-004-ref.html
View file

@ -1,73 +0,0 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Grid Reference: Subgrid with margin/border/padding and 'overflow' property</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
.grid {
display: block;
border: 2px solid #f76707;
background-color: #fff4e6;
width: 150px;
height: 150px;
}
.subgrid {
/* Mock subgrid with grid. */
display: grid;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
box-sizing: border-box;
width: 140px;
height: 140px;
background-color: #ffd8a8;
margin: 5px;
border: 7px solid #ffa94d;
padding: 11px;
}
.subitem {
grid-area: 1 / 1 / span 1 / span 1;
background-color: green;
width: 30px;
height: 30px;
border: 5px solid black;
}
.top { align-self: start; }
.bottom { align-self: end; }
.left { justify-self: start; }
.right { justify-self: end; }
</style>
<p>All the following grid containers should have the same rendering.</p>
<p>Test 1: Subgrid has overflow:visible</p>
<div class="grid">
<div class="subgrid">
<div class="subitem top left"></div>
<div class="subitem top right"></div>
<div class="subitem bottom left"></div>
<div class="subitem bottom right"></div>
</div>
</div>
<p>Test 2: Subgrid has overflow:auto</p>
<div class="grid">
<div class="subgrid" style="overflow: auto;">
<div class="subitem top left"></div>
<div class="subitem top right"></div>
<div class="subitem bottom left"></div>
<div class="subitem bottom right"></div>
</div>
</div>
<p>Test 3: Subgrid has overflow:hidden</p>
<div class="grid">
<div class="subgrid" style="overflow: hidden;">
<div class="subitem top left"></div>
<div class="subitem top right"></div>
<div class="subitem bottom left"></div>
<div class="subitem bottom right"></div>
</div>
</div>
</html>

73
tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-mbp-overflow-004.html
View file

@ -1,73 +0,0 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Grid Test: Subgrid with margin/border/padding and 'overflow' property</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrids">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1709491">
<link rel="match" href="subgrid-mbp-overflow-004-ref.html">
<style>
.grid {
display: grid;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
border: 2px solid #f76707;
background-color: #fff4e6;
width: 150px;
height: 150px;
}
.subgrid {
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
background-color: #ffd8a8;
margin: 5px;
border: 7px solid #ffa94d;
padding: 11px;
}
.subitem {
background-color: green;
width: 30px;
height: 30px;
border: 5px solid black;
}
.top { align-self: start; }
.bottom { align-self: end; }
.left { justify-self: start; }
.right { justify-self: end; }
</style>
<p>All the following grid containers should have the same rendering.</p>
<p>Test 1: Subgrid has overflow:visible</p>
<div class="grid">
<div class="subgrid">
<div class="subitem top left"></div>
<div class="subitem top right"></div>
<div class="subitem bottom left"></div>
<div class="subitem bottom right"></div>
</div>
</div>
<p>Test 2: Subgrid has overflow:auto</p>
<div class="grid">
<div class="subgrid" style="overflow: auto;">
<div class="subitem top left"></div>
<div class="subitem top right"></div>
<div class="subitem bottom left"></div>
<div class="subitem bottom right"></div>
</div>
</div>
<p>Test 3: Subgrid has overflow:hidden</p>
<div class="grid">
<div class="subgrid" style="overflow: hidden;">
<div class="subitem top left"></div>
<div class="subitem top right"></div>
<div class="subitem bottom left"></div>
<div class="subitem bottom right"></div>
</div>
</div>
</html>

15
tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-reflow-root-crash.html Normal file
View file

@ -0,0 +1,15 @@
<style>
* {
grid-template-rows: subgrid;
display: inline-grid;
}
html {
contain: strict;
}
</style>
<script>
window.addEventListener('load', () => {
document.head.appendChild(document.createElement('style'))
})
</script>

42
tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-stretch-ref.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: The subgrid is always stretched in its subgridded dimension(s)</title>
<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
<style>
body {
margin: 0;
}
.grid {
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<br>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
</body>
</html>

96
tests/wpt/web-platform-tests/css/css-grid/subgrid/subgrid-stretch.html Normal file
View file

@ -0,0 +1,96 @@
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: The subgrid is always stretched in its subgridded dimension(s)</title>
<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
<link rel="match" href="subgrid-stretch-ref.html">
<style>
body {
margin: 0;
}
.grid {
display: inline-grid;
grid-template-columns: 100px;
grid-template-rows: 100px;
}
.subgrid {
display: grid;
background-color: blue;
}
.rows {
grid-template-rows: subgrid;
align-self: baseline;
}
.columns {
grid-template-columns: subgrid;
justify-self: baseline;
}
.vrl {
writing-mode: vertical-rl;
}
.vrl.rows {
align-self: initial;
justify-self: baseline;
}
.vrl.columns {
justify-self: initial;
align-self: baseline;
}
</style>
</head>
<body>
<div class="grid">
<div class="subgrid rows" style="height: 50px;"></div>
</div>
<div class="grid">
<div class="subgrid rows" style="height: 150px;"></div>
</div>
<div class="grid">
<div class="subgrid rows" style="max-height: 50px;"></div>
</div>
<div class="grid">
<div class="subgrid rows" style="min-height: 150px;"></div>
</div>
<div class="grid">
<div class="subgrid columns" style="width: 50px;"></div>
</div>
<div class="grid">
<div class="subgrid columns" style="width: 150px;"></div>
</div>
<div class="grid">
<div class="subgrid columns" style="max-width: 50px;"></div>
</div>
<div class="grid">
<div class="subgrid columns" style="min-width: 150px;"></div>
</div>
<br>
<div class="grid">
<div class="subgrid vrl rows" style="width: 50px;"></div>
</div>
<div class="grid">
<div class="subgrid vrl rows" style="width: 150px;"></div>
</div>
<div class="grid">
<div class="subgrid vrl rows" style="max-width: 50px;"></div>
</div>
<div class="grid">
<div class="subgrid vrl rows" style="min-width: 150px;"></div>
</div>
<div class="grid">
<div class="subgrid vrl columns" style="height: 50px;"></div>
</div>
<div class="grid">
<div class="subgrid vrl columns" style="height: 150px;"></div>
</div>
<div class="grid">
<div class="subgrid vrl columns" style="max-height: 50px;"></div>
</div>
<div class="grid">
<div class="subgrid vrl columns" style="min-height: 150px;"></div>
</div>
</body>
</html>