mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-08 19:04:45 +00:00
Bug 1264067 - [css-grid] Update tests that use 'fr' min-sizing.
This commit is contained in:
Mats Palmgren
parent
50649ed4b4
commit
adbc189b42
@ -5,7 +5,7 @@
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: flex min-sizing</title>
|
||||
<title>Reference: flex/auto min-sizing</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; }
|
||||
@ -42,9 +42,9 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||
}
|
||||
|
||||
.g4 {
|
||||
grid-template-columns: minmax(0,0)
|
||||
minmax(0,0)
|
||||
minmax(0,0)
|
||||
grid-template-columns: minmax(2px,0)
|
||||
minmax(1px,0)
|
||||
minmax(1px,0)
|
||||
1fr;
|
||||
}
|
||||
|
||||
@ -56,9 +56,9 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||
}
|
||||
|
||||
.g6 {
|
||||
grid-template-columns: minmax(0,0)
|
||||
minmax(0,0)
|
||||
minmax(0,0)
|
||||
grid-template-columns: minmax(2px,0)
|
||||
minmax(1px,0)
|
||||
minmax(1px,0)
|
||||
20px;
|
||||
}
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: flex min-sizing</title>
|
||||
<title>CSS Grid Test: flex/auto min-sizing</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/#valdef-grid-template-columns-minmax">
|
||||
<link rel="match" href="grid-flex-min-sizing-001-ref.html">
|
||||
@ -22,108 +22,113 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||
width:140px;
|
||||
}
|
||||
|
||||
/*
|
||||
* NOTE Due to a spec change, 'fr' min-sizing inside minmax() is now
|
||||
* invalid, so they were replaced in this test with 'auto' instead (for now).
|
||||
*/
|
||||
|
||||
.g1 {
|
||||
grid-template-columns: minmax(1fr,min-content)
|
||||
minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
grid-template-columns: minmax(auto,min-content)
|
||||
minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
1fr;
|
||||
}
|
||||
|
||||
.g2 {
|
||||
grid-template-columns: minmax(1fr,max-content)
|
||||
minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
grid-template-columns: minmax(auto,max-content)
|
||||
minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
1fr;
|
||||
}
|
||||
|
||||
.g3 {
|
||||
grid-template-columns: minmax(1fr,auto)
|
||||
minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
grid-template-columns: minmax(auto,auto)
|
||||
minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
1fr;
|
||||
}
|
||||
|
||||
.g4 {
|
||||
grid-template-columns: minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
grid-template-columns: minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
1fr;
|
||||
}
|
||||
|
||||
.g5 {
|
||||
grid-template-columns: minmax(20px,0)
|
||||
minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
1fr;
|
||||
}
|
||||
|
||||
.g6 {
|
||||
grid-template-columns: minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
grid-template-columns: minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
20px;
|
||||
}
|
||||
|
||||
.g7 {
|
||||
grid-template-columns: minmax(20px,1fr)
|
||||
minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
20px;
|
||||
}
|
||||
|
||||
.g8 {
|
||||
grid-template-columns: minmax(1fr,1fr)
|
||||
minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
grid-template-columns: minmax(auto,1fr)
|
||||
minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
20px;
|
||||
}
|
||||
|
||||
.g9 {
|
||||
grid-template-columns: 20px
|
||||
30px
|
||||
minmax(1fr,0)
|
||||
minmax(auto,0)
|
||||
10px;
|
||||
}
|
||||
|
||||
.gA {
|
||||
grid-template-columns: minmax(1fr,0)
|
||||
grid-template-columns: minmax(auto,0)
|
||||
minmax(min-content,40px)
|
||||
minmax(1fr,0)
|
||||
minmax(auto,0)
|
||||
20px;
|
||||
}
|
||||
|
||||
.gB {
|
||||
grid-template-columns: minmax(1fr,0)
|
||||
grid-template-columns: minmax(auto,0)
|
||||
minmax(auto,40px)
|
||||
minmax(1fr,0)
|
||||
minmax(auto,0)
|
||||
20px;
|
||||
}
|
||||
|
||||
.gC {
|
||||
grid-template-columns: minmax(1fr,20px)
|
||||
grid-template-columns: minmax(auto,20px)
|
||||
minmax(auto,40px)
|
||||
minmax(1fr,0)
|
||||
minmax(auto,0)
|
||||
20px;
|
||||
}
|
||||
|
||||
.gD {
|
||||
grid-template-columns: minmax(auto,20px)
|
||||
minmax(auto,40px)
|
||||
minmax(1fr,0)
|
||||
minmax(auto,0)
|
||||
min-content;
|
||||
}
|
||||
|
||||
.gE {
|
||||
grid-template-columns: minmax(auto,20px)
|
||||
minmax(auto,40px)
|
||||
minmax(1fr,20px)
|
||||
minmax(auto,20px)
|
||||
auto;
|
||||
}
|
||||
|
||||
.gF {
|
||||
grid-template-columns: minmax(auto,20px)
|
||||
minmax(min-content,max-content)
|
||||
minmax(1fr,40px)
|
||||
minmax(auto,40px)
|
||||
auto;
|
||||
}
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: flex min-sizing</title>
|
||||
<title>Reference: flex/auto min-sizing</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; }
|
||||
@ -25,47 +25,45 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||
}
|
||||
|
||||
.g1 {
|
||||
grid-template-columns: minmax(min-content,min-content)
|
||||
minmax(min-content,0)
|
||||
minmax(min-content,0)
|
||||
grid-template-columns: minmax(4px,0)
|
||||
minmax(0,0)
|
||||
minmax(0,0)
|
||||
1fr;
|
||||
}
|
||||
|
||||
.g2 {
|
||||
grid-template-columns: minmax(min-content,max-content)
|
||||
minmax(min-content,0)
|
||||
minmax(min-content,0)
|
||||
grid-template-columns: minmax(4px,0)
|
||||
0
|
||||
0
|
||||
1fr;
|
||||
}
|
||||
|
||||
.g3 {
|
||||
grid-template-columns: minmax(min-content,auto)
|
||||
minmax(min-content,0)
|
||||
minmax(min-content,0)
|
||||
grid-template-columns: minmax(4px,0)
|
||||
0
|
||||
0
|
||||
1fr;
|
||||
}
|
||||
|
||||
.g4 {
|
||||
grid-template-columns: minmax(0,0)
|
||||
minmax(0,0)
|
||||
minmax(0,0)
|
||||
grid-template-columns: minmax(2px,0)
|
||||
1px
|
||||
1px
|
||||
1fr;
|
||||
min-width:24px;
|
||||
}
|
||||
|
||||
.g5 {
|
||||
grid-template-columns: minmax(20px,0)
|
||||
minmax(0,0)
|
||||
minmax(0,0)
|
||||
4px;
|
||||
0;
|
||||
}
|
||||
|
||||
.g6 {
|
||||
grid-template-columns: minmax(0,0)
|
||||
minmax(0,0)
|
||||
minmax(0,0)
|
||||
grid-template-columns: minmax(2px,0)
|
||||
minmax(1px,0)
|
||||
minmax(1px,0)
|
||||
20px;
|
||||
min-width:44px;
|
||||
}
|
||||
|
||||
.g7 {
|
||||
@ -97,37 +95,37 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||
}
|
||||
|
||||
.gB {
|
||||
grid-template-columns: minmax(min-content,0)
|
||||
minmax(auto,40px)
|
||||
minmax(0,0)
|
||||
grid-template-columns: minmax(4px,0)
|
||||
0
|
||||
0
|
||||
20px;
|
||||
}
|
||||
|
||||
.gC {
|
||||
grid-template-columns: minmax(min-content,20px)
|
||||
minmax(auto,40px)
|
||||
minmax(0,0)
|
||||
grid-template-columns: minmax(4px,0)
|
||||
0
|
||||
0
|
||||
20px;
|
||||
}
|
||||
|
||||
.gD {
|
||||
grid-template-columns: minmax(min-content,20px)
|
||||
minmax(auto,40px)
|
||||
minmax(0,0)
|
||||
min-content;
|
||||
grid-template-columns: minmax(4px,0)
|
||||
0
|
||||
0
|
||||
0;
|
||||
}
|
||||
|
||||
.gE {
|
||||
grid-template-columns: minmax(min-content,20px)
|
||||
minmax(min-content,40px)
|
||||
minmax(7px,20px)
|
||||
auto;
|
||||
grid-template-columns: minmax(2px,0)
|
||||
minmax(1px,0)
|
||||
minmax(1px,0)
|
||||
0px;
|
||||
}
|
||||
|
||||
.gF {
|
||||
grid-template-columns: minmax(min-content,20px)
|
||||
minmax(0,max-content)
|
||||
minmax(0,40px)
|
||||
grid-template-columns: 22px
|
||||
1px
|
||||
1px
|
||||
auto;
|
||||
}
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: flex min-sizing</title>
|
||||
<title>CSS Grid Test: flex/auto min-sizing</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/#valdef-grid-template-columns-minmax">
|
||||
<link rel="match" href="grid-flex-min-sizing-002-ref.html">
|
||||
@ -26,108 +26,113 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
/*
|
||||
* NOTE Due to a spec change, 'fr' min-sizing inside minmax() is now
|
||||
* invalid, so they were replaced in this test with 'auto' instead (for now).
|
||||
*/
|
||||
|
||||
.g1 {
|
||||
grid-template-columns: minmax(1fr,min-content)
|
||||
minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
grid-template-columns: minmax(auto,min-content)
|
||||
minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
1fr;
|
||||
}
|
||||
|
||||
.g2 {
|
||||
grid-template-columns: minmax(1fr,max-content)
|
||||
minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
grid-template-columns: minmax(auto,max-content)
|
||||
minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
1fr;
|
||||
}
|
||||
|
||||
.g3 {
|
||||
grid-template-columns: minmax(1fr,auto)
|
||||
minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
grid-template-columns: minmax(auto,auto)
|
||||
minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
1fr;
|
||||
}
|
||||
|
||||
.g4 {
|
||||
grid-template-columns: minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
grid-template-columns: minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
1fr;
|
||||
}
|
||||
|
||||
.g5 {
|
||||
grid-template-columns: minmax(20px,0)
|
||||
minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
1fr;
|
||||
}
|
||||
|
||||
.g6 {
|
||||
grid-template-columns: minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
grid-template-columns: minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
20px;
|
||||
}
|
||||
|
||||
.g7 {
|
||||
grid-template-columns: minmax(20px,1fr)
|
||||
minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
20px;
|
||||
}
|
||||
|
||||
.g8 {
|
||||
grid-template-columns: minmax(1fr,1fr)
|
||||
minmax(1fr,0)
|
||||
minmax(1fr,0)
|
||||
grid-template-columns: minmax(auto,1fr)
|
||||
minmax(auto,0)
|
||||
minmax(auto,0)
|
||||
20px;
|
||||
}
|
||||
|
||||
.g9 {
|
||||
grid-template-columns: 20px
|
||||
30px
|
||||
minmax(1fr,0)
|
||||
minmax(auto,0)
|
||||
10px;
|
||||
}
|
||||
|
||||
.gA {
|
||||
grid-template-columns: minmax(1fr,0)
|
||||
grid-template-columns: minmax(auto,0)
|
||||
minmax(min-content,40px)
|
||||
minmax(1fr,0)
|
||||
minmax(auto,0)
|
||||
20px;
|
||||
}
|
||||
|
||||
.gB {
|
||||
grid-template-columns: minmax(1fr,0)
|
||||
grid-template-columns: minmax(auto,0)
|
||||
minmax(auto,40px)
|
||||
minmax(1fr,0)
|
||||
minmax(auto,0)
|
||||
20px;
|
||||
}
|
||||
|
||||
.gC {
|
||||
grid-template-columns: minmax(1fr,20px)
|
||||
grid-template-columns: minmax(auto,20px)
|
||||
minmax(auto,40px)
|
||||
minmax(1fr,0)
|
||||
minmax(auto,0)
|
||||
20px;
|
||||
}
|
||||
|
||||
.gD {
|
||||
grid-template-columns: minmax(auto,20px)
|
||||
minmax(auto,40px)
|
||||
minmax(1fr,0)
|
||||
minmax(auto,0)
|
||||
min-content;
|
||||
}
|
||||
|
||||
.gE {
|
||||
grid-template-columns: minmax(auto,20px)
|
||||
minmax(auto,40px)
|
||||
minmax(1fr,20px)
|
||||
minmax(auto,20px)
|
||||
auto;
|
||||
}
|
||||
|
||||
.gF {
|
||||
grid-template-columns: minmax(auto,20px)
|
||||
minmax(min-content,max-content)
|
||||
minmax(1fr,40px)
|
||||
minmax(auto,40px)
|
||||
auto;
|
||||
}
|
||||
|
||||
|
||||
@ -33,7 +33,7 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||
width: 56px;
|
||||
}
|
||||
.g2f .d1 {
|
||||
width: 52px;
|
||||
width: 69px;
|
||||
}
|
||||
.g3 .d1 {
|
||||
width: 56px;
|
||||
@ -42,7 +42,7 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||
width: 96px;
|
||||
}
|
||||
.g4f .d1 {
|
||||
width: 92px;
|
||||
width: 69px;
|
||||
}
|
||||
.g5 .d1 {
|
||||
width: 96px;
|
||||
@ -51,7 +51,7 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||
width: 69px;
|
||||
}
|
||||
.g6f .d1 {
|
||||
width: 77px;
|
||||
width: 69px;
|
||||
}
|
||||
.g7 .d1 {
|
||||
width: 69px;
|
||||
|
||||
@ -33,7 +33,7 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||
width: 56px;
|
||||
}
|
||||
.g2f .d1 {
|
||||
width: 56px;
|
||||
width: 69px;
|
||||
}
|
||||
.g3 .d1 {
|
||||
width: 56px;
|
||||
@ -90,7 +90,9 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||
width: 444px;
|
||||
}
|
||||
.g2f .d2 {
|
||||
width: 448px;
|
||||
right: auto;
|
||||
left: 69px;
|
||||
width: 35px;
|
||||
}
|
||||
.g3 .d2 {
|
||||
width: 444px;
|
||||
@ -99,7 +101,9 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||
width: 404px;
|
||||
}
|
||||
.g4f .d2 {
|
||||
width: 396px;
|
||||
right: auto;
|
||||
left: 69px;
|
||||
width: 35px;
|
||||
}
|
||||
.g5 .d2 {
|
||||
width: 404px;
|
||||
@ -108,7 +112,9 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||
width: 431px;
|
||||
}
|
||||
.g6f .d2 {
|
||||
width: 423px;
|
||||
right: auto;
|
||||
left: 69px;
|
||||
width: 35px;
|
||||
}
|
||||
.g7 .d2 {
|
||||
width: 431px;
|
||||
|
||||
@ -33,7 +33,8 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||
width: 56px;
|
||||
}
|
||||
.g2f .d1 {
|
||||
width: 52px;
|
||||
left: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
.g3 .d1 {
|
||||
left: 41px;
|
||||
@ -44,8 +45,8 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||
width: 2px;
|
||||
}
|
||||
.g4f .d1 {
|
||||
left: 83px;
|
||||
width: 0px;
|
||||
left: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
.g5 .d1 {
|
||||
left: 81px;
|
||||
@ -56,7 +57,7 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||
width: 28px;
|
||||
}
|
||||
.g6f .d1 {
|
||||
left: 27px;
|
||||
left: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
.g7 .d1 {
|
||||
@ -104,7 +105,8 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||
left: 2px;
|
||||
}
|
||||
.g2f .d2 {
|
||||
width: 104px;
|
||||
width: 48px;
|
||||
left: 56px;
|
||||
}
|
||||
.g3 .d2 {
|
||||
width: 61px;
|
||||
@ -115,8 +117,8 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||
left: 83px;
|
||||
}
|
||||
.g4f .d2 {
|
||||
width: 22px;
|
||||
left: 82px;
|
||||
width: 48px;
|
||||
left: 56px;
|
||||
}
|
||||
.g5 .d2 {
|
||||
width: 21px;
|
||||
@ -127,8 +129,8 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||
left: 56px;
|
||||
}
|
||||
.g6f .d2 {
|
||||
width: 49px;
|
||||
left: 55px;
|
||||
width: 48px;
|
||||
left: 56px;
|
||||
}
|
||||
.g7 .d2 {
|
||||
width: 48px;
|
||||
|
||||
@ -5996,7 +5996,6 @@ if (IsCSSPropertyPrefEnabled("layout.css.grid.enabled")) {
|
||||
"[a] calc(1%) [b] repeat(auto-fit,[a b] minmax(1mm, 1%) [c]) [c]",
|
||||
"repeat(auto-fill,minmax(1%,auto))",
|
||||
"repeat(auto-fill,minmax(1em,min-content)) minmax(min-content,0)",
|
||||
"repeat(auto-fill,minmax(1fr,1em)) [a] minmax(0, max-content)",
|
||||
"repeat(auto-fill,minmax(max-content,1mm))",
|
||||
],
|
||||
invalid_values: [
|
||||
@ -6051,6 +6050,7 @@ if (IsCSSPropertyPrefEnabled("layout.css.grid.enabled")) {
|
||||
"repeat(auto-fit,minmax(auto,auto))",
|
||||
"repeat(auto-fit,minmax(min-content,1fr))",
|
||||
"repeat(auto-fit,minmax(1fr,auto))",
|
||||
"repeat(auto-fill,minmax(1fr,1em))",
|
||||
"repeat(auto-fill, 10px) auto",
|
||||
"auto repeat(auto-fit, 10px)",
|
||||
"minmax(min-content,max-content) repeat(auto-fit, 0)",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user