mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1151212 part 4 - [css-grid] Tests for intrinsic track sizing and intrinsic grid container sizing (bug 1174574).

This commit is contained in:
Mats Palmgren 2015-09-04 22:06:58 +02:00
Родитель 0c1cb50609
Коммит f85e46fd5d
15 изменённых файлов: 2060 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

88
layout/reftests/css-grid/grid-col-max-sizing-max-content-001-ref.html Normal file
Просмотреть файл

@ -0,0 +1,88 @@
<!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: Testing track max-sizing 'max-content'</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
.grid {
display: block;
border: dashed blue;
float:left;
clear:left;
}
.c1 { min-width:40px; margin-bottom: 2px; margin-right: 47px; }
.r1 { min-width:70px; margin-left: 38px; margin-top: 2px; }
.c3 { min-width:0; margin: 2px 18px 1px 85px; }
span {
display: block;
background: gray;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 1px 3px;
margin: 1px 5px;
}
x { display:inline-block; width:10px; height:18px; }
</style>
</head>
<body>
<div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1" style="margin-right:54px"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:436px">
<span class="c1" style="margin-right:41px"><x>&nbsp;</x></span>
<span class="r1" style="margin-left:5px"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:500px;">
<span class="c1" style="min-width:20px;margin-right:448px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:583px;">
<span class="c1" style="margin-right:55px"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:389px;">
<span class="c1" style="width:100px"><x>&nbsp;</x></span>
<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:389px;">
<span class="c1" style="width:100px"><x>&nbsp;</x></span>
<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div>
</body>
</html>

90
layout/reftests/css-grid/grid-col-max-sizing-max-content-001.html Normal file
Просмотреть файл

@ -0,0 +1,90 @@
<!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: Testing track max-sizing 'max-content'</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#valdef-grid-template-columns-max-content">
<link rel="match" href="grid-col-max-sizing-max-content-001-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
grid-auto-columns: minmax(min-content,max-content);
border: dashed blue;
float:left;
clear:left;
}
.c1 { grid-column: 1 / span 2; min-width:40px; }
.r1 { grid-column: 2 / span 3; min-width:70px; }
.c3 { grid-column: 3 / span 1; min-width:0; }
span {
background: gray;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 1px 3px;
margin: 1px 5px;
justify-self: flex-start;
}
x { display:inline-block; width:10px; height:18px; }
</style>
</head>
<body>
<div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div>
<div class="grid" style="grid-template-columns: minmax(min-content,max-content) 400px;">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:500px;">
<span class="c1" style="min-width:20px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:30px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px"><x>&nbsp;</x></span>
</div>
<div class="grid" style="grid-template-columns: minmax(min-content,max-content) minmax(min-content,500px);">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1" style="width:100px"><x>&nbsp;</x></span>
<span class="r1" style="width:300px"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1" style="width:100px; border-sizing:border-box"><x>&nbsp;</x></span>
<span class="r1" style="width:300px; border-sizing:border-box"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
</body>
</html>

92
layout/reftests/css-grid/grid-col-max-sizing-max-content-002-ref.html Normal file
Просмотреть файл

@ -0,0 +1,92 @@
<!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: Testing track max-sizing 'max-content'</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
.grid {
display: block;
float:left;
clear:left;
}
.wrap {
border: dashed blue;
overflow:hidden;
clear:left;
}
.c1 { min-width:40px; margin-bottom: 2px; margin-right: 47px; }
.r1 { min-width:70px; margin-left: 38px; margin-top: 2px; }
.c3 { min-width:0; margin: 2px 18px 1px 85px; }
span {
display: block;
background: gray;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 1px 3px;
margin: 1px 5px;
}
x { display:inline-block; width:10px; height:18px; }
</style>
</head>
<body>
<div class="wrap"><div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div></div>
<div class="wrap"><div class="grid">
<span class="c1" style="margin-right:54px"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div></div>
<div class="wrap"><div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div></div>
<div class="wrap"><div class="grid" style="width:436px">
<span class="c1" style="margin-right:41px"><x>&nbsp;</x></span>
<span class="r1" style="margin-left:5px"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div></div>
<div class="wrap" style="float:left;"><div class="grid" style="width:500px;">
<span class="c1" style="min-width:20px;margin-right:448px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
</div></div>
<div class="wrap"><div class="grid" style="width:583px;">
<span class="c1" style="margin-right:55px"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div></div>
<div class="wrap"><div class="grid" style="width:389px;">
<span class="c1" style="width:100px"><x>&nbsp;</x></span>
<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div></div>
<div class="wrap"><div class="grid" style="width:389px;">
<span class="c1" style="width:100px"><x>&nbsp;</x></span>
<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div></div>
</body>
</html>

88
layout/reftests/css-grid/grid-col-max-sizing-max-content-002.html Normal file
Просмотреть файл

@ -0,0 +1,88 @@
<!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: Testing track max-sizing 'max-content'</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#valdef-grid-template-columns-max-content">
<link rel="match" href="grid-col-max-sizing-max-content-002-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
grid-auto-columns: minmax(min-content,max-content);
border: dashed blue;
}
.c1 { grid-column: 1 / span 2; min-width:40px; }
.r1 { grid-column: 2 / span 3; min-width:70px; }
.c3 { grid-column: 3 / span 1; min-width:0; }
span {
background: gray;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 1px 3px;
margin: 1px 5px;
justify-self: flex-start;
}
x { display:inline-block; width:10px; height:18px; }
</style>
</head>
<body>
<div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div>
<div class="grid" style="grid-template-columns: minmax(min-content,max-content) 400px;">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:500px;">
<span class="c1" style="min-width:20px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:30px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px"><x>&nbsp;</x></span>
</div>
<div class="grid" style="grid-template-columns: minmax(min-content,max-content) minmax(min-content,500px);">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1" style="width:100px"><x>&nbsp;</x></span>
<span class="r1" style="width:300px"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1" style="width:100px; border-sizing:border-box"><x>&nbsp;</x></span>
<span class="r1" style="width:300px; border-sizing:border-box"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
</body>
</html>

98
layout/reftests/css-grid/grid-min-max-content-sizing-001-ref.html Normal file
Просмотреть файл

@ -0,0 +1,98 @@
<!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: Testing grid minmax(min-content,max-content) column/rows</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
.grid {
display: block;
border: 2px solid green;
overflow: hidden;
clear: both;
}
.float { float:left; clear:both; border: 2px dashed blue;}
span {
background: lime;
border-style: solid;
border-width: 1px 3px 5px 7px;
float: left;
}
x10 { display:inline-block; width:10px; height:10px; background:yellow; }
x30 { display:inline-block; width:30px; height:30px; background:cyan; }
.c2,.r2 { width:20px; height:20px; background: silver; }
.r2 { background: pink; }
.c1 { margin: 1px 3px 5px 7px; }
.v {
writing-mode:vertical-lr;
-webkit-writing-mode:vertical-lr;
}
</style>
</head>
<body>
<div class="grid">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="clear:left"></span>
</div>
<div class="grid">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="clear:left"></span>
</div>
<div class="grid float">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="clear:left"></span>
</div>
<div class="grid float">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="clear:left"></span>
</div>
<div class="grid">
<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="clear:left"></span>
</div>
<div class="grid">
<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="clear:left"></span>
</div>
<div class="grid float v">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2" style="background:pink"></span>
<span class="r2" style="clear:left;background:silver"></span>
</div>
<div class="grid float v">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2" style="background:pink"></span>
<span class="r2" style="clear:left;background:silver"></span>
</div>
<div class="grid float v" style="padding-bottom:4px">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="clear:left;"></span>
</div>
<div class="grid" style="position:relative">
<span class="c1 v" style="min-width:100px;"><x10>X</x10><x30>y</x30><x10 style="visibility:hidden">z</x10></span>
<span class="c1" style="min-width:50px;margin-left:-113px; border:none; padding:1px 3px 5px 7px; background:none"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c1" style="min-width:10px;max-width:10px;margin-left:-113px"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="clear:left"></span>
</div>
</body>
</html>

105
layout/reftests/css-grid/grid-min-max-content-sizing-001.html Normal file
Просмотреть файл

@ -0,0 +1,105 @@
<!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: Testing grid minmax(min-content,max-content) column/rows</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#valdef-grid-template-columns-max-content">
<link rel="match" href="grid-min-max-content-sizing-001-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
.grid {
display: grid;
border: 2px solid green;
grid-template-columns: minmax(min-content,max-content) 30px;
grid-template-rows: minmax(min-content,max-content);
clear: both;
}
.float { float:left; clear:both; border: 2px dashed blue; }
.flex-min {
grid-template-columns: minmax(1fr,max-content) 30px;
grid-template-rows: minmax(1fr,max-content);
}
span {
background: lime;
border-style: solid;
border-width: 1px 3px 5px 7px;
grid-row: 1;
}
x10 { display:inline-block; width:10px; height:10px; background:yellow; }
x30 { display:inline-block; width:30px; height:30px; background:cyan; }
.c2,.r2 { width:20px; height:20px; background: silver; }
.r2 { background: pink; }
.c1 { margin: 1px 3px 5px 7px; grid-column:1; }
.v {
writing-mode:vertical-lr;
-webkit-writing-mode:vertical-lr;
}
</style>
</head>
<body>
<div class="grid">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
<div class="grid flex-min">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
<div class="grid float">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
<div class="grid float flex-min">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
<div class="grid">
<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
<div class="grid flex-min">
<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
<div class="grid float">
<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
<div class="grid float flex-min">
<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
<div class="grid float v">
<span class="c1 zv"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
<div class="grid" style="grid-template-columns: minmax(auto,max-content) 47px;">
<span class="c1 v" style="min-width:100px"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c1" style="min-width:50px"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c1" style="min-width:10px;max-width:10px"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
</body>
</html>

139
layout/reftests/css-grid/grid-track-intrinsic-sizing-001-ref.html Normal file
Просмотреть файл

@ -0,0 +1,139 @@
<!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: Distribute space beyond growth limits</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
display: block;
border: 1px solid;
width: 500px;
}
.grid div.c1 {
display: table-row;
}
.grid div {
display: table-cell;
}
.c1 { }
x { display:block; width:396px; border:2px solid; }
.c2 { background: grey; }
.c3 { background: blue; }
.h10 { height:10px; }
</style>
</head>
<body>
<div class="grid t1">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x>1 2 3 4 5</x></td>
</tr><tr>
<td class="c2">&nbsp;</td>
<td class="c3">&nbsp;</td>
</tr></table>
</div>
<div class="grid t1">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x>1 2 3 4 5</x></td>
</tr><tr>
<td class="c2">&nbsp;</td>
<td class="c3">&nbsp;</td>
</tr></table>
</div>
<div class="grid t1">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x>1 2 3 4 5</x></td>
</tr><tr>
<td class="c2 h10"></td>
<td class="c3 h10"></td>
</tr></table>
</div>
<div class="grid t1">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x>1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</x></td>
</tr><tr>
<td class="c2">&nbsp;</td>
<td class="c3">&nbsp;</td>
</tr></table>
</div>
<div class="grid t1">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x>1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</x></td>
</tr><tr>
<td class="c2">&nbsp;</td>
<td class="c3">&nbsp;</td>
</tr></table>
</div>
<div class="grid t1">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x>1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</x></td>
</tr><tr>
<td class="c2 h10"></td>
<td class="c3 h10"></td>
</tr></table>
</div>
<div class="grid t1">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x style="width:-webkit-max-content;width:-moz-max-content;width:max-content">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4</x></td>
</tr><tr>
<td class="c2">&nbsp;</td>
<td class="c3">&nbsp;</td>
</tr></table>
</div>
<div class="grid t2">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x style="width:auto">1 2 3 4 5&nbsp;</x></td>
</tr><tr>
<td class="c2">&nbsp;</td>
<td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr></table>
</div>
<div class="grid t2">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x style="width:auto">1 2 3 4 5&nbsp;</x></td>
</tr><tr>
<td class="c2">&nbsp;</td>
<td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr></table>
</div>
<div class="grid t2">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x style="width:auto">1 2 3 4 5</x></td>
</tr><tr>
<td class="c2"></td>
<td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr></table>
</div>
<div class="grid t2">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x style="width:auto">1 2 3 4 5</x></td>
</tr><tr>
<td class="c3 h10" colspan="2"></td>
</tr></table>
</div>
<div class="grid t2">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x style="width:auto">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5&nbsp;</x></td>
</tr><tr>
<td class="c2">&nbsp;</td>
<td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr></table>
</div>
<div class="grid t2">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x style="width:auto">1 2 3 4 5&nbsp;</x></td>
</tr><tr>
<td class="c2">&nbsp;</td>
<td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr></table>
</div>
</body>
</html>

101
layout/reftests/css-grid/grid-track-intrinsic-sizing-001.html Normal file
Просмотреть файл

@ -0,0 +1,101 @@
<!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: Distribute space beyond growth limits</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="https://drafts.csswg.org/css-grid/#distribute-extra-space">
<link rel="match" href="grid-track-intrinsic-sizing-001-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
border: 1px solid;
width: 500px;
}
.t1 {
grid-template-columns: minmax(max-content,200px) minmax(max-content,200px);
}
.t2 {
grid-template-columns: minmax(0,auto) minmax(max-content,auto);
}
.c1 { grid-column: span 2; border:2px solid; min-width:0; }
.c2 { background: grey; min-height:10px; min-width:0; }
.c3 { background: blue; min-width:0;}
</style>
</head>
<body>
<div class="grid t1">
<span class="c1">1 2 3 4 5</span>
<div class="c2">&nbsp;</div>
<div class="c3">&nbsp;</div>
</div>
<div class="grid t1">
<span class="c1">1 2 3 4 5</span>
<div class="c2">&nbsp;</div>
<div class="c3"></div>
</div>
<div class="grid t1">
<span class="c1">1 2 3 4 5</span>
<div class="c2"></div>
<div class="c3"></div>
</div>
<div class="grid t1">
<span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</span>
<div class="c2">&nbsp;</div>
<div class="c3">&nbsp;</div>
</div>
<div class="grid t1">
<span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</span>
<div class="c2">&nbsp;</div>
<div class="c3"></div>
</div>
<div class="grid t1">
<span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</span>
<div class="c2"></div>
<div class="c3"></div>
</div>
<div class="grid t1">
<span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4</span>
<div class="c2">&nbsp;</div>
<div class="c3">&nbsp;</div>
</div>
<div class="grid t2">
<span class="c1">1 2 3 4 5</span>
<div class="c2">&nbsp;</div>
<div class="c3">&nbsp;</div>
</div>
<div class="grid t2">
<span class="c1">1 2 3 4 5</span>
<div class="c2">&nbsp;</div>
<div class="c3"></div>
</div>
<div class="grid t2">
<span class="c1">1 2 3 4 5</span>
<div class="c2"></div>
<div class="c3">&nbsp;</div>
</div>
<div class="grid t2">
<span class="c1">1 2 3 4 5</span>
<div class="c2"></div>
<div class="c3"></div>
</div>
<div class="grid t2">
<span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</span>
<div class="c2">&nbsp;</div>
<div class="c3">&nbsp;</div>
</div>
<div class="grid t2">
<span class="c1">1 2 3 4 5</span>
<div class="c2">&nbsp;</div>
<div class="c3">&nbsp;</div>
</div>
</body>
</html>

166
layout/reftests/css-grid/grid-track-intrinsic-sizing-002-ref.html Normal file
Просмотреть файл

@ -0,0 +1,166 @@
<!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: Intrinsic track sizing (w/o span:1)</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
position: relative;
display: grid;
border: 1px dashed;
width: 500px;
grid-template-columns: auto;
padding-bottom:10px;
}
.d1 {
position: absolute;
bottom: 0;
background: grey;
}
.g1 .d1 {
width: 52px;
}
.g2 .d1 {
width: 56px;
}
.g2f .d1 {
width: 52px;
}
.g3 .d1 {
width: 56px;
}
.g4 .d1 {
width: 96px;
}
.g4f .d1 {
width: 92px;
}
.g5 .d1 {
width: 96px;
}
.g6 .d1 {
width: 69px;
}
.g6f .d1 {
width: 77px;
}
.g7 .d1 {
width: 69px;
}
.g8 .t {
width: 196px;
}
.g8 .d1 {
width: 200px;
}
.g9 .d1 {
width: 69px;
}
.gA .d1 {
width: 93px;
}
.gB .d1 {
width: 93px;
}
.gC .d1 {
width: 93px;
}
.gD .d1 {
width: 93px;
}
.t { grid-column: span 1; border:2px solid; }
div { min-width:0; min-height:10px; }
t { display:inline-block; width:20px; }
</style>
</head>
<body>
<div class="g1 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g2 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g2f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g3 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g4 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g4f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g5 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g6 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g6f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g7 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g8 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g9 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="gA grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="gB grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="gC grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="gD grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
</body>
</html>

190
layout/reftests/css-grid/grid-track-intrinsic-sizing-002.html Normal file
Просмотреть файл

@ -0,0 +1,190 @@
<!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: Intrinsic track sizing (w/o span:1)</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content">
<link rel="match" href="grid-track-intrinsic-sizing-002-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
border: 1px dashed;
width: 500px;
}
.g1 {
grid-template-columns: minmax(0,auto)
minmax(max-content,auto)
minmax(max-content,max-content);
}
.g2 {
grid-template-columns: minmax(max-content,auto)
minmax(min-content,auto)
minmax(max-content,max-content);
}
.g2f {
grid-template-columns: minmax(max-content,auto)
minmax(1fr,auto)
minmax(max-content,max-content);
}
.g3 {
grid-template-columns: minmax(max-content,max-content)
minmax(min-content,max-content)
minmax(max-content,max-content);
}
.g4 {
grid-template-columns: minmax(max-content,max-content)
minmax(min-content,max-content)
minmax(min-content,max-content);
}
.g4f {
grid-template-columns: minmax(max-content,max-content)
minmax(1fr,max-content)
minmax(min-content,max-content);
}
.g5 {
grid-template-columns: minmax(max-content,auto)
minmax(min-content,max-content)
minmax(min-content,auto);
}
.g6 {
grid-template-columns: minmax(min-content,auto)
minmax(min-content,max-content)
minmax(min-content,auto);
}
.g6f {
grid-template-columns: minmax(min-content,auto)
minmax(min-content,max-content)
minmax(1fr,auto);
}
.g7 {
grid-template-columns: minmax(min-content,auto)
minmax(min-content,auto)
minmax(min-content,auto);
}
.g8 {
grid-template-columns: minmax(auto,min-content)
minmax(200px,min-content)
minmax(min-content,min-content);
}
.g9 {
grid-template-columns: minmax(auto,auto)
minmax(auto,auto)
minmax(auto,auto);
}
.gA {
grid-template-columns: minmax(auto,auto)
minmax(min-content,min-content)
minmax(min-content,min-content);
}
.gB {
grid-template-columns: minmax(auto,auto)
minmax(max-content,min-content)
minmax(min-content,min-content);
}
.gC {
grid-template-columns: minmax(auto,auto)
minmax(max-content,min-content)
minmax(min-content,max-content);
}
.gD {
grid-template-columns: minmax(auto,auto)
minmax(max-content,max-content)
minmax(min-content,max-content);
}
.t { grid-column: span 3; border:2px solid; }
.c1 { grid-column: 1; }
.d1 { grid-column: 1 / span 2; background: grey; }
div { min-width:0; min-height:10px; }
t { display:inline-block; width:20px; }
</style>
</head>
<body>
<div class="g1 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g2 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g2f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g3 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g4 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g4f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g5 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g6 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g6f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g7 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g8 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g9 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="gA grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="gB grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="gC grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="gD grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
</body>
</html>

220
layout/reftests/css-grid/grid-track-intrinsic-sizing-003-ref.html Normal file
Просмотреть файл

@ -0,0 +1,220 @@
<!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: Intrinsic track sizing (w/o span:1, with flex)</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
position: relative;
display: grid;
border: 1px dashed;
width: 500px;
grid-template-columns: auto;
padding-bottom:10px;
}
.d1 {
position: absolute;
bottom: 0;
background: grey;
}
.g1 .d1 {
width: 52px;
}
.g2 .d1 {
width: 56px;
}
.g2f .d1 {
width: 56px;
}
.g3 .d1 {
width: 56px;
}
.g4 .d1 {
width: 96px;
}
.g4f .d1 {
width: 104px;
}
.g5 .d1 {
width: 96px;
}
.g6 .d1 {
width: 69px;
}
.g6f .d1 {
width: 89px;
}
.g7 .d1 {
width: 69px;
}
.g8 .t {
width: 196px;
}
.g8 .d1 {
width: 200px;
}
.g9 .d1 {
width: 69px;
}
.gA .d1 {
width: 93px;
}
.gB .d1 {
width: 93px;
}
.gC .d1 {
width: 93px;
}
.gD .d1 {
width: 93px;
}
.d2 {
position: absolute;
bottom: 0;
right: 0;
background: blue;
}
.g1 .d2 {
width: 448px;
}
.g2 .d2 {
width: 444px;
}
.g2f .d2 {
width: 448px;
}
.g3 .d2 {
width: 444px;
}
.g4 .d2 {
width: 404px;
}
.g4f .d2 {
width: 396px;
}
.g5 .d2 {
width: 404px;
}
.g6 .d2 {
width: 431px;
}
.g6f .d2 {
width: 423px;
}
.g7 .d2 {
width: 431px;
}
.g8 .d2 {
width: 300px;
}
.g9 .d2 {
width: 431px;
}
.gA .d2 {
width: 407px;
}
.gB .d2 {
width: 407px;
}
.gC .d2 {
width: 407px;
}
.gD .d2 {
width: 407px;
}
.t { grid-column: span 1; border:2px solid; }
div { min-width:0; min-height:10px; }
t { display:inline-block; width:20px; }
</style>
</head>
<body>
<div class="g1 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g2 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g2f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g3 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g4 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g4f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g5 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g6 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g6f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g7 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g8 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g9 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="gA grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="gB grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="gC grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="gD grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
</body>
</html>

206
layout/reftests/css-grid/grid-track-intrinsic-sizing-003.html Normal file
Просмотреть файл

@ -0,0 +1,206 @@
<!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: Intrinsic track sizing (w/o span:1, with flex)</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content">
<link rel="match" href="grid-track-intrinsic-sizing-003-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
border: 1px dashed;
width: 500px;
}
.g1 {
grid-template-columns: minmax(0,auto)
minmax(max-content,auto)
minmax(max-content,max-content)
1fr;
}
.g2 {
grid-template-columns: minmax(max-content,auto)
minmax(min-content,auto)
minmax(max-content,max-content)
1fr;
}
.g2f {
grid-template-columns: minmax(max-content,auto)
minmax(1fr,auto)
minmax(max-content,max-content)
1fr;
}
.g3 {
grid-template-columns: minmax(max-content,max-content)
minmax(min-content,max-content)
minmax(max-content,max-content)
1fr;
}
.g4 {
grid-template-columns: minmax(max-content,max-content)
minmax(min-content,max-content)
minmax(min-content,max-content)
1fr;
}
.g4f {
grid-template-columns: minmax(max-content,max-content)
minmax(min-content,max-content)
minmax(1fr,max-content)
1fr;
}
.g5 {
grid-template-columns: minmax(max-content,auto)
minmax(min-content,max-content)
minmax(min-content,auto)
1fr;
}
.g6 {
grid-template-columns: minmax(min-content,auto)
minmax(min-content,max-content)
minmax(min-content,auto)
1fr;
}
.g6f {
grid-template-columns: minmax(min-content,auto)
minmax(min-content,max-content)
minmax(1fr,auto)
1fr;
}
.g7 {
grid-template-columns: minmax(min-content,auto)
minmax(min-content,auto)
minmax(min-content,auto)
1fr;
}
.g8 {
grid-template-columns: minmax(auto,min-content)
minmax(200px,min-content)
minmax(min-content,min-content)
1fr;
}
.g9 {
grid-template-columns: minmax(auto,auto)
minmax(auto,auto)
minmax(auto,auto)
1fr;
}
.gA {
grid-template-columns: minmax(auto,auto)
minmax(min-content,min-content)
minmax(min-content,min-content)
1fr;
}
.gB {
grid-template-columns: minmax(auto,auto)
minmax(max-content,min-content)
minmax(min-content,min-content)
1fr;
}
.gC {
grid-template-columns: minmax(auto,auto)
minmax(max-content,min-content)
minmax(min-content,max-content)
1fr;
}
.gD {
grid-template-columns: minmax(auto,auto)
minmax(max-content,max-content)
minmax(min-content,max-content)
1fr;
}
.t { grid-column: span 3; border:2px solid; }
.d1 { grid-column: 1 / span 2; background: grey; }
.d3 { grid-column: 3 / span 2; background: blue; }
div { min-width:0; min-height:10px; }
t { display:inline-block; width:20px; }
</style>
</head>
<body>
<div class="g1 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g2 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g2f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g3 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g4 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g4f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g5 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g6 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g6f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g7 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g8 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g9 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="gA grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="gB grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="gC grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="gD grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
</body>
</html>

247
layout/reftests/css-grid/grid-track-intrinsic-sizing-004-ref.html Normal file
Просмотреть файл

@ -0,0 +1,247 @@
<!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: Intrinsic track sizing (with span:1)</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
position: relative;
display: grid;
border: 1px solid black;
width: 500px;
grid-template-columns: auto;
padding-bottom:10px;
}
.d1 {
position: absolute;
bottom: 0;
background: grey;
}
.g1 .d1 {
width: 52px;
}
.g2 .d1 {
width: 56px;
}
.g2f .d1 {
width: 52px;
}
.g3 .d1 {
left: 41px;
width: 2px;
}
.g4 .d1 {
left: 81px;
width: 2px;
}
.g4f .d1 {
left: 83px;
width: 0px;
}
.g5 .d1 {
left: 81px;
width: 2px;
}
.g6 .d1 {
left: 28px;
width: 28px;
}
.g6f .d1 {
left: 27px;
width: 28px;
}
.g7 .d1 {
left: 28px;
width: 28px;
}
.g8 .t {
width: 216px;
}
.g8 .d1 {
left:0;
width: 200px;
}
.g9 .d1 {
left: 28px;
width: 28px;
}
.gA .d1 {
left: 80px;
width: 2px;
}
.gB .d1 {
left: 0;
width: 82px;
}
.gC .d1 {
left: 0;
width: 82px;
}
.gD .d1 {
left: 0;
width: 82px;
}
.d2 {
position: absolute;
bottom: 0;
background: blue;
}
.g1 .d2 {
width: 104px;
left: 0;
}
.g2 .d2 {
width: 102px;
left: 2px;
}
.g2f .d2 {
width: 104px;
}
.g3 .d2 {
width: 61px;
left: 43px;
}
.g4 .d2 {
width: 21px;
left: 83px;
}
.g4f .d2 {
width: 22px;
left: 82px;
}
.g5 .d2 {
width: 21px;
left: 83px;
}
.g6 .d2 {
width: 48px;
left: 56px;
}
.g6f .d2 {
width: 49px;
left: 55px;
}
.g7 .d2 {
width: 48px;
left: 56px;
}
.g8 .d2 {
width: 20px;
left: 200px;
}
.g9 .d2 {
width: 48px;
left: 56px;
}
.gA .d2 {
width: 22px;
left: 82px;
}
.gB .d2 {
width: 22px;
left: 82px;
}
.gC .d2 {
width: 22px;
left: 82px;
}
.gD .d2 {
width: 22px;
left: 82px;
}
.t { grid-column: span 1; border:2px solid; }
div { min-width:0; min-height:10px; }
t { display:inline-block; width:20px; }
</style>
</head>
<body>
<div class="g1 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g2 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g2f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g3 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g4 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g4f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g5 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g6 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g6f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g7 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g8 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g9 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="gA grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="gB grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="gC grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="gD grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
</body>
</html>

223
layout/reftests/css-grid/grid-track-intrinsic-sizing-004.html Normal file
Просмотреть файл

@ -0,0 +1,223 @@
<!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: Intrinsic track sizing (with span:1)</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content">
<link rel="match" href="grid-track-intrinsic-sizing-004-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
border: 1px solid black;
width: 500px;
}
.float { width:auto; float:left; }
.g1 {
grid-template-columns: minmax(0,auto)
minmax(max-content,auto)
minmax(max-content,max-content);
}
.g2 {
grid-template-columns: minmax(max-content,auto)
minmax(min-content,auto)
minmax(max-content,max-content);
}
.g2f {
grid-template-columns: minmax(max-content,auto)
minmax(1fr,auto)
minmax(max-content,max-content);
}
.g3 {
grid-template-columns: minmax(max-content,max-content)
minmax(min-content,max-content)
minmax(max-content,max-content);
}
.g4 {
grid-template-columns: minmax(max-content,max-content)
minmax(min-content,max-content)
minmax(min-content,max-content);
}
.g4f {
grid-template-columns: minmax(max-content,max-content)
minmax(1fr,max-content)
minmax(min-content,max-content);
}
.g5 {
grid-template-columns: minmax(max-content,auto)
minmax(min-content,max-content)
minmax(min-content,auto);
}
.g6 {
grid-template-columns: minmax(min-content,auto)
minmax(min-content,max-content)
minmax(min-content,auto);
}
.g6f {
grid-template-columns: minmax(1fr,auto)
minmax(min-content,max-content)
minmax(min-content,auto);
}
.g7 {
grid-template-columns: minmax(min-content,auto)
minmax(min-content,auto)
minmax(min-content,auto);
}
.g8 {
grid-template-columns: minmax(auto,min-content)
minmax(200px,min-content)
minmax(min-content,min-content);
}
.g9 {
grid-template-columns: minmax(auto,auto)
minmax(auto,auto)
minmax(auto,auto);
}
.gA {
grid-template-columns: minmax(auto,auto)
minmax(min-content,min-content)
minmax(min-content,min-content);
}
.gB {
grid-template-columns: minmax(auto,auto)
minmax(max-content,min-content)
minmax(min-content,min-content);
}
.gC {
grid-template-columns: minmax(auto,auto)
minmax(max-content,min-content)
minmax(min-content,max-content);
}
.gD {
grid-template-columns: minmax(auto,auto)
minmax(max-content,max-content)
minmax(min-content,max-content);
}
.t { grid-column: span 3; border:2px solid; }
.c1 { grid-column: 1; height:10px; }
.c2 { grid-column: 2; background: grey; height:10px; }
.c3 { grid-column: 3; background: blue; height:10px; }
div { min-width:0; min-height:10px; }
t { display:inline-block; width:20px; }
</style>
</head>
<body>
<div class="g1 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g2 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g2f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g3 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g4 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g4f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g5 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g6 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g6f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g7 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g8 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g9 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="gA grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="gB grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="gC grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="gD grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
</body>
</html>

7
layout/reftests/css-grid/reftest.list
Просмотреть файл

@ -26,3 +26,10 @@ pref(layout.css.vertical-text.enabled,true) == vlr-grid-placement-auto-row-spars
pref(layout.css.vertical-text.enabled,true) == vrl-grid-placement-auto-row-sparse-001.html vrl-grid-placement-auto-row-sparse-001-ref.html
== grid-relpos-items-001.html grid-relpos-items-001-ref.html
== grid-item-dir-001.html grid-item-dir-001-ref.html
fuzzy-if(winWidget,70,130) fuzzy-if(cocoaWidget,85,180) == grid-col-max-sizing-max-content-001.html grid-col-max-sizing-max-content-001-ref.html
fuzzy-if(winWidget,70,130) fuzzy-if(cocoaWidget,85,180) == grid-col-max-sizing-max-content-002.html grid-col-max-sizing-max-content-002-ref.html
== grid-min-max-content-sizing-001.html grid-min-max-content-sizing-001-ref.html
== grid-track-intrinsic-sizing-001.html grid-track-intrinsic-sizing-001-ref.html
== grid-track-intrinsic-sizing-002.html grid-track-intrinsic-sizing-002-ref.html
== grid-track-intrinsic-sizing-003.html grid-track-intrinsic-sizing-003-ref.html
== grid-track-intrinsic-sizing-004.html grid-track-intrinsic-sizing-004-ref.html