Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
-->
<html class="reftest-wait"><head>
<meta charset="utf-8">
<title>CSS Grid Test: repeat(auto-fit) with grid-aligned abs.pos. with removed start/middle tracks</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1237805">
<link rel="match" href="grid-repeat-auto-fill-fit-007-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
.grid {
display: grid;
position: relative;
border: 1px solid;
grid-auto-rows: 30px;
grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 20px;
grid-gap: 2px;
width: 160px;
height: 30px;
}
.c1 { width: 160px; }
.c2 { width: 150px; }
.c3 { width: 140px; }
.p1 { padding-left:5px; }
.t2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
x {
width: 18px;
border:1px solid;
background: grey;
}
a {
position: absolute;
left:0; top:0; height:3px; right:0;
background: cyan;
grid-column: 7 / auto;
}
b {
position: absolute;
left:0; bottom:0; height:3px; right:0;
background: brown;
grid-column: auto / 7;
}
c {
position: absolute;
left:0; bottom:5px; height:3px; right:0;
background: pink;
grid-column: 6 / 7;
}
d {
position: absolute;
left:0; bottom:10px; height:3px; right:0;
background: silver;
grid-column: 3 / 6;
}
e {
position: absolute;
left:0; bottom:15px; height:3px; right:0;
background: magenta;
grid-column: 3 / 7;
}
f {
position: absolute;
left:0; bottom:20px; height:3px; right:0;
background: orange;
grid-column: auto / 6;
}
x:first-child {
background: lime;
}
x:last-child {
background: blue;
}
.t1 x:last-child {
grid-column-end:-1;
}
float { float:left; margin-right:20px; }
.m x:first-child , .n x:first-child {
background: cyan;
grid-column:2;
}
.n x:nth-child(2) , .o x:nth-child(2) {
background: purple;
grid-column:4;
}
</style>
</head>
<body>
<float>
<div class="grid c1 t1 n"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 n"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 n"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 m"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 m"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 m"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
</float>
<float>
<div class="grid c1 t1 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
</float>
<script>
function testGridTemplateColumns(elem, expected) {
var actual = window.getComputedStyle(elem).gridTemplateColumns;
if (actual != expected) {
var err = "FAIL: gridTemplateColumns " + elem.className +
", GOT=" + actual +
", EXPECTED=" + expected;
document.body.appendChild(document.createTextNode(err));
}
}
var a1 = [
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c d] 20px",
"[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px"
];
var a2 = [
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d]",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d]",
"[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d]",
"[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c d]",
"[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c d]",
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]"
];
function runTest() {
var t1 = document.querySelectorAll('.t1');
for (var i = 0; i < t1.length; ++i) {
testGridTemplateColumns(t1[i], a1[i]);
}
var t2 = document.querySelectorAll('.t2');
for (var i = 0; i < t2.length; ++i) {
testGridTemplateColumns(t2[i], a2[i]);
}
document.documentElement.className='';
}
document.addEventListener('MozReftestInvalidate', runTest);
</script>
</body>
</html>