зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1218178 part 4 - [css-grid][css-align] Add more reftests with image grid items.
This commit is contained in:
Mats Palmgren
Родитель
49f3373b77
Коммит
15f5e457ab
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Testing track 'auto' min-sizing function with 'min-width:min-content' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
.col { grid-auto-rows:10px; }
|
||||
.col img { min-height:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var coltest = [
|
||||
"height:30px; max-width:48px", "height:30px; width:48px", "height:30px; width:12px",
|
||||
"width:12px", "max-width:12px", "height:30px", "height:4px; width:80px", "height:1px",
|
||||
"height:1px; width:20px", "max-height:1px", "max-height:1px; max-width:6px",
|
||||
"min-height:4px", "min-height:4px; max-width: 30px"
|
||||
];
|
||||
var results = [
|
||||
"48px", "48px", "24px", "24px", "24px", "360px", "80px", "24px", "24px", "24px",
|
||||
"24px", "48px", "30px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < coltest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid col");
|
||||
grid.setAttribute("style","grid-template-columns:minmax("+results[i]+",0)");
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-24x2.png");
|
||||
img.setAttribute("style",coltest[i] + "; min-width:"+ results[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-width:min-content' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<link rel="match" href="grid-auto-min-sizing-min-content-min-size-001-ref.html">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.col { grid-template-columns:minmax(auto,0.0001fr); grid-auto-rows:10px; }
|
||||
.col img {
|
||||
min-height: 0;
|
||||
min-width: -moz-min-content;
|
||||
min-width: -webkit-min-content;
|
||||
min-width: min-content;
|
||||
}
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var coltest = [
|
||||
"height:30px; max-width:48px", "height:30px; width:48px", "height:30px; width:12px",
|
||||
"width:12px", "max-width:12px", "height:30px", "height:4px; width:80px", "height:1px",
|
||||
"height:1px; width:20px", "max-height:1px", "max-height:1px; max-width:6px",
|
||||
"min-height:4px", "min-height:4px; max-width: 30px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < coltest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid col");
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-24x2.png");
|
||||
img.setAttribute("style",coltest[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Testing track 'auto' min-sizing function with 'min-width:min-content' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
.col { grid-template-columns:minmax(auto,0); grid-auto-rows:10px; }
|
||||
.col img { min-height:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var coltest = [
|
||||
"height:30px; max-width:200%", "height:30px; width:200%", "height:30px; width:50%",
|
||||
"width:50%", "max-width:50%", "height:30px", "height:200%; width:80px", "height:50%",
|
||||
"height:50%; width:20px", "max-height:50%", "max-height:50%; max-width:6px",
|
||||
"min-height:40%", "min-height:40%; max-width:30px"
|
||||
];
|
||||
var results = [
|
||||
"360px", "360px", "360px", "24px", "24px", "360px", "80px", "24px", "24px", "24px",
|
||||
"24px", "24px", "24px"
|
||||
];
|
||||
var item_width = [
|
||||
"48px", "48px", "24px", "24px", "24px;max-width:none;", "360px", "80px", "60px", "24px", "24px",
|
||||
"24px;max-width:none;", "48px", "30px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < coltest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid col");
|
||||
grid.setAttribute("style","grid-template-columns:minmax("+results[i]+",0)");
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-24x2.png");
|
||||
img.setAttribute("style",coltest[i] + "; width:"+ item_width[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-width:min-content' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<link rel="match" href="grid-auto-min-sizing-min-content-min-size-002-ref.html">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.col { grid-template-columns:minmax(auto,0.0001fr); grid-auto-rows:10px; }
|
||||
.col img {
|
||||
min-height: 0;
|
||||
min-width: -moz-min-content;
|
||||
min-width: -webkit-min-content;
|
||||
min-width: min-content;
|
||||
}
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<script>
|
||||
var coltest = [
|
||||
"height:30px; max-width:200%", "height:30px; width:200%", "height:30px; width:50%",
|
||||
"width:50%", "max-width:50%", "height:30px", "height:200%; width:80px", "height:50%",
|
||||
"height:50%; width:20px", "max-height:50%", "max-height:50%; max-width:6px",
|
||||
"min-height:40%", "min-height:40%; max-width:30px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < coltest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid col");
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-24x2.png");
|
||||
img.setAttribute("style",coltest[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Testing track 'auto' min-sizing function with 'min-height:min-content' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
.row { }
|
||||
.row img { min-width:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var coltest = [
|
||||
"12px", "12px", "4px", "1px", "2px", "1px", "1px", "1px", "1px", "3px", "5px"
|
||||
];
|
||||
var rowtest = [
|
||||
"width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px",
|
||||
"height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px",
|
||||
"width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px"
|
||||
];
|
||||
var results = [
|
||||
"24px", "48px", "12px", "12px", "24px", "12px", "12px", "12px", "20px", "36px", "30px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < rowtest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid row");
|
||||
grid.setAttribute("style","grid:minmax("+results[i]+",0) / " + coltest[i]);
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-2x24.png");
|
||||
img.setAttribute("style",rowtest[i] + "; min-height:"+ results[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-height:min-content' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<link rel="match" href="grid-auto-min-sizing-min-content-min-size-003-ref.html">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.row { grid-template-rows:minmax(auto,0.0001fr); }
|
||||
.row img {
|
||||
min-width: 0;
|
||||
min-height: -moz-min-content;
|
||||
min-height: -webkit-min-content;
|
||||
min-height: min-content;
|
||||
}
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var rowtest = [
|
||||
"width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px",
|
||||
"height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px",
|
||||
"width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < rowtest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid row");
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-2x24.png");
|
||||
img.setAttribute("style",rowtest[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Testing track 'auto' min-sizing function with 'min-height:min-content' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
body { overflow:hidden; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
.row { }
|
||||
.row img { min-width:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var rowtest = [
|
||||
"width:50%; max-height:200%", "width:50%; height:200%", "width:4px; height:50%",
|
||||
"height:50%", "max-height:200%", "max-height:50%", "max-width:50%", "width:50%; height:20px",
|
||||
"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
|
||||
];
|
||||
var results = [
|
||||
"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "24px/2px", "20px/2px", "20px/2px", "24px/2px", "24px/52px"
|
||||
];
|
||||
var item_height = [
|
||||
"0", "0", "0", "0", "0", "0", "12px", "20px", "20px", "24px", "312px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < rowtest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid row");
|
||||
grid.setAttribute("style","grid:" + results[i]);
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-2x24.png");
|
||||
img.setAttribute("style",rowtest[i] + "; max-height:auto; height:"+ item_height[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-height:min-content' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<link rel="match" href="grid-auto-min-sizing-min-content-min-size-004-ref.html">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
body { overflow:hidden; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.row { grid-template-rows:minmax(auto,0.0001fr); }
|
||||
.row img {
|
||||
min-width: 0;
|
||||
min-height: -moz-min-content;
|
||||
min-height: -webkit-min-content;
|
||||
min-height: min-content;
|
||||
}
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var rowtest = [
|
||||
"width:50%; max-height:200%", "width:50%; height:200%", "width:4px; height:50%",
|
||||
"height:50%", "max-height:200%", "max-height:50%", "max-width:50%", "width:50%; height:20px",
|
||||
"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < rowtest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid row");
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-2x24.png");
|
||||
img.setAttribute("style",rowtest[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Testing track 'auto' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
.col { grid-auto-rows:10px; }
|
||||
.col img { min-height:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var coltest = [
|
||||
"height:30px; max-width:48px", "height:30px; width:48px", "height:30px; width:12px",
|
||||
"width:12px", "max-width:12px", "height:30px", "height:4px; width:80px", "height:1px",
|
||||
"height:1px; width:20px", "max-height:1px", "max-height:1px; max-width:6px",
|
||||
"min-height:4px", "min-height:4px; max-width: 30px"
|
||||
];
|
||||
var results = [
|
||||
"48px", "48px", "12px", "12px", "12px", "360px", "80px", "12px", "20px", "12px",
|
||||
"6px", "48px", "30px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < coltest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid col");
|
||||
grid.setAttribute("style","grid-template-columns:minmax("+results[i]+",0)");
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-24x2.png");
|
||||
img.setAttribute("style",coltest[i] + "; min-width:"+ results[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<link rel="match" href="grid-auto-min-sizing-transferred-size-001-ref.html">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.col { grid-template-columns:minmax(auto,0.0001fr); grid-auto-rows:10px; }
|
||||
.col img { min-height:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var coltest = [
|
||||
"height:30px; max-width:48px", "height:30px; width:48px", "height:30px; width:12px",
|
||||
"width:12px", "max-width:12px", "height:30px", "height:4px; width:80px", "height:1px",
|
||||
"height:1px; width:20px", "max-height:1px", "max-height:1px; max-width:6px",
|
||||
"min-height:4px", "min-height:4px; max-width: 30px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < coltest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid col");
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-24x2.png");
|
||||
img.setAttribute("style",coltest[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Testing track 'auto' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
.col { grid-template-columns:minmax(auto,0); grid-auto-rows:10px; }
|
||||
.col img { min-height:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var coltest = [
|
||||
"height:30px; max-width:200%", "height:30px; width:200%", "height:30px; width:50%",
|
||||
"width:50%", "max-width:50%", "height:30px", "height:200%; width:80px", "height:50%",
|
||||
"height:50%; width:20px", "max-height:50%", "max-height:50%; max-width:6px",
|
||||
"min-height:40%", "min-height:40%; max-width:30px"
|
||||
];
|
||||
var results = [
|
||||
"360px", "360px", "360px", "24px", "24px", "360px", "80px", "24px", "20px", "24px",
|
||||
"6px", "24px", "24px"
|
||||
];
|
||||
var item_width = [
|
||||
"0px", "0px", "0px", "0px", "0px", "360px", "80px", "60px", "20px", "24px",
|
||||
"6px", "48px", "30px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < coltest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid col");
|
||||
grid.setAttribute("style","grid-template-columns:minmax("+results[i]+",0)");
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-24x2.png");
|
||||
img.setAttribute("style",coltest[i] + "; width:"+ item_width[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<link rel="match" href="grid-auto-min-sizing-transferred-size-002-ref.html">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.col { grid-template-columns:minmax(auto,0.0001fr); grid-auto-rows:10px; }
|
||||
.col img { min-height:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<script>
|
||||
var coltest = [
|
||||
"height:30px; max-width:200%", "height:30px; width:200%", "height:30px; width:50%",
|
||||
"width:50%", "max-width:50%", "height:30px", "height:200%; width:80px", "height:50%",
|
||||
"height:50%; width:20px", "max-height:50%", "max-height:50%; max-width:6px",
|
||||
"min-height:40%", "min-height:40%; max-width:30px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < coltest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid col");
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-24x2.png");
|
||||
img.setAttribute("style",coltest[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Testing track 'auto' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
.row { }
|
||||
.row img { min-width:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var coltest = [
|
||||
"12px", "12px", "4px", "1px", "2px", "1px", "1px", "1px", "1px", "3px", "5px"
|
||||
];
|
||||
var rowtest = [
|
||||
"width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px",
|
||||
"height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px",
|
||||
"width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px"
|
||||
];
|
||||
var results = [
|
||||
"24px", "48px", "12px", "12px", "24px", "12px", "12px", "12px", "20px", "36px", "30px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < rowtest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid row");
|
||||
grid.setAttribute("style","grid:minmax("+results[i]+",0) / " + coltest[i]);
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-2x24.png");
|
||||
img.setAttribute("style",rowtest[i] + "; min-height:"+ results[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<link rel="match" href="grid-auto-min-sizing-transferred-size-003-ref.html">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.row { grid-template-rows:minmax(auto,0.0001fr); }
|
||||
.row img { min-width:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var rowtest = [
|
||||
"width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px",
|
||||
"height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px",
|
||||
"width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < rowtest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid row");
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-2x24.png");
|
||||
img.setAttribute("style",rowtest[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Testing track 'auto' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
body { overflow:hidden; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
.row { }
|
||||
.row img { min-width:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var rowtest = [
|
||||
"width:50%; max-height:200%", "width:50%; height:200%", "width:4px; height:50%",
|
||||
"height:50%", "max-height:200%", "max-height:50%", "max-width:50%", "width:50%; height:20px",
|
||||
"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
|
||||
];
|
||||
var results = [
|
||||
"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "24px/2px", "20px/2px", "20px/2px", "24px/2px", "24px/52px"
|
||||
];
|
||||
var item_height = [
|
||||
"0", "0", "0", "0", "0", "0", "12px", "20px", "20px", "24px", "312px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < rowtest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid row");
|
||||
grid.setAttribute("style","grid:" + results[i]);
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-2x24.png");
|
||||
img.setAttribute("style",rowtest[i] + "; max-height:auto; height:"+ item_height[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<link rel="match" href="grid-auto-min-sizing-transferred-size-004-ref.html">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
body { overflow:hidden; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.row { grid-template-rows:minmax(auto,0.0001fr); }
|
||||
.row img { min-width:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var rowtest = [
|
||||
"width:50%; max-height:200%", "width:50%; height:200%", "width:4px; height:50%",
|
||||
"height:50%", "max-height:200%", "max-height:50%", "max-width:50%", "width:50%; height:20px",
|
||||
"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < rowtest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid row");
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-2x24.png");
|
||||
img.setAttribute("style",rowtest[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<!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: stretching intrinsic ratio item with min/max-size</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
border: 1px solid;
|
||||
margin: 5px;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
}
|
||||
.vertical-tests div { vertical-align:bottom }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="height:96px; width:8px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="height:48px; width:4px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png" style="width:20px; height:calc(2px * (20 / 24))">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="width:96px; height:8px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; height:120px; width:10px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:96px; height:8px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:96px; height:8px">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start unsafe; height:120px; width:10px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start safe; height:120px; width:10px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:end unsafe; height:120px; width:10px; margin-bottom:-24px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:end safe; height:120px; width:10px; margin-top:-24px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 4px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start unsafe; width:48px; height:4px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start safe; width:48px; height:4px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:end unsafe; width:48px; height:4px; margin-right:-38px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px; margin-left: 80px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:end safe; width:48px; height:4px; margin-left:-38px">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="vertical-tests">
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="height:96px; width:8px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="height:48px; width:4px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png" style="width:20px; height:calc(2px * (20 / 24))">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="width:96px; height:8px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; height:120px; width:10px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:96px; height:8px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:96px; height:8px">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start unsafe; height:120px; width:10px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start safe; height:120px; width:10px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:end unsafe; height:120px; width:10px; margin-bottom:-24px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:end safe; height:120px; width:10px; margin-top:-24px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 4px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start unsafe; width:48px; height:4px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start safe; width:48px; height:4px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:end unsafe; width:48px; height:4px; margin-right:-38px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px; margin-left: 80px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:end safe; width:48px; height:4px; margin-left:-38px">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<!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: stretching intrinsic ratio item with min/max-size</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
|
||||
<link rel="match" href="grid-item-intrinsic-ratio-stretch-001-ref.html">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
border: 1px solid;
|
||||
margin: 5px;
|
||||
}
|
||||
.vertical-tests img { writing-mode: vertical-rl; }
|
||||
.vertical-tests div { vertical-align:bottom }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start safe;">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start unsafe;">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:end safe;">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:end unsafe;">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 4px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start safe">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start unsafe">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:end safe">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px; margin-left: 80px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:end unsafe">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="vertical-tests">
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start safe;">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start unsafe;">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:end safe;">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 10px">
|
||||
<img src="support/lime-2x24.png" style="align-self:end unsafe;">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 4px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start safe">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start unsafe">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:end safe">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px; margin-left: 80px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:end unsafe">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<!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: stretching intrinsic ratio item with min/max-size</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
border: 1px solid;
|
||||
margin: 5px;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
}
|
||||
.vertical-tests div { vertical-align:bottom }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="width:4px; height:48px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="height:12px; width:1px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png" style="height:1px; width:12px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="height:6px; width:72px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; height:12px; width:1px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="width:10px; height:120px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="width:6px; height:72px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png" style="width:24px; height:2px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="width:120px; height:10px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 48px / 6px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; width:calc(2px * (80 / 24)); height:80px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; width:6px; height:72px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:calc(2px * (98 / 24))">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:6px">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="vertical-tests">
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="width:4px; height:48px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="height:12px; width:1px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png" style="height:1px; width:12px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="height:6px; width:72px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; height:48px; width:4px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; height:12px; width:1px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="width:10px; height:120px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="width:6px; height:72px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png" style="width:24px; height:2px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="width:120px; height:10px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 48px / 6px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; width:calc(2px * (80 / 24)); height:80px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; width:6px; height:72px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:calc(2px * (98 / 24))">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:6px">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
<!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: stretching intrinsic ratio item with min/max-size</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
|
||||
<link rel="match" href="grid-item-intrinsic-ratio-stretch-002-ref.html">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
border: 1px solid;
|
||||
margin: 5px;
|
||||
}
|
||||
.vertical-tests img { writing-mode: vertical-rl; }
|
||||
.vertical-tests div { vertical-align:bottom }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="max-width:4px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="max-height:12px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png" style="max-width:12px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="max-height:6px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; max-height:48px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; max-height:12px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="min-width:10px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="min-width:6px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png" style="min-height:2px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="min-height:10px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 48px / 6px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; min-height:80px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; min-height:72px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; min-width:98px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; min-width:72px">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="vertical-tests">
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="max-width:4px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="max-height:12px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png" style="max-width:12px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="max-height:6px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; max-height:48px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; max-height:12px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="min-width:10px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="min-width:6px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png" style="min-height:2px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="min-height:10px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 48px / 6px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; min-height:80px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; min-height:72px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; min-width:98px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; min-width:72px">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<!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: stretching intrinsic ratio item with min/max-size</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
border: 1px solid;
|
||||
margin: 5px;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
}
|
||||
.vertical-tests div { vertical-align:bottom }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="width:4px; height:48px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="width:1px; height:12px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png" style="width:12px; height:1px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="width:72px; height:6px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; width:4px; height:48px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; width:1px; height:12px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="width:10px; height:48px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="width:6px; height:36px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png" style="height:2px; width:12px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="height:10px; width:48px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 48px / 6px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; height:80px; width:4px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; height:50px; width:1px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:3px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:2px">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="vertical-tests">
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="width:4px; height:48px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="width:1px; height:12px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png" style="width:12px; height:1px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="width:72px; height:6px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; width:4px; height:48px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; width:1px; height:12px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="width:10px; height:48px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="width:6px; height:36px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png" style="height:2px; width:12px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="height:10px; width:48px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 48px / 6px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; height:80px; width:4px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; height:50px; width:1px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:3px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:2px">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
<!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: stretching intrinsic ratio item with min/max-size</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
|
||||
<link rel="match" href="grid-item-intrinsic-ratio-stretch-003-ref.html">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
border: 1px solid;
|
||||
margin: 5px;
|
||||
}
|
||||
.vertical-tests img { writing-mode: vertical-rl; }
|
||||
.vertical-tests div { vertical-align:bottom }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="min-width:4px; max-width:0">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="min-height:12px; max-height:0">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png" style="min-width:12px; max-width:0">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="min-height:6px; max-height:0">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; min-height:48px; max-height:0">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; min-height:12px; max-height:0">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; min-width:48px; max-width:0">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; min-width:48px; max-width:0">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="min-width:10px; max-height:48px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="min-width:6px; max-height:36px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png" style="min-height:2px; max-width:12px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="min-height:10px; max-width:48px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 48px / 6px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; min-height:80px; max-width:4px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; min-height:50px; max-width:1px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; min-width:98px; max-height:3px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; min-width:48px; max-height:2px">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="vertical-tests">
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="min-width:4px; max-width:0">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="min-height:12px; max-height:0">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png" style="min-width:12px; max-width:0">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="min-height:6px; max-height:0">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; min-height:48px; max-height:0">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; min-height:12px; max-height:0">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; min-width:48px; max-width:0">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; min-width:48px; max-width:0">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid" style="grid: 96px / 20px">
|
||||
<img src="support/lime-2x24.png" style="min-width:10px; max-height:48px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="min-width:6px; max-height:36px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 20px">
|
||||
<img src="support/lime-24x2.png" style="min-height:2px; max-width:12px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="min-height:10px; max-width:48px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 48px / 6px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; min-height:80px; max-width:4px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 96px / 4px">
|
||||
<img src="support/lime-2x24.png" style="align-self:start; min-height:50px; max-width:1px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 8px / 100px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; min-width:98px; max-height:3px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 8px / 10px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start; min-width:48px; max-height:2px">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Testing track 'min-content' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
.col { grid-auto-rows:10px; }
|
||||
.col img { min-height:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var coltest = [
|
||||
"height:30px; max-width:48px", "height:30px; width:48px", "height:30px; width:12px",
|
||||
"width:12px", "max-width:12px", "height:30px", "height:4px; width:80px", "height:1px",
|
||||
"height:1px; width:20px", "max-height:1px", "max-height:1px; max-width:6px",
|
||||
"min-height:4px", "min-height:4px; max-width: 30px"
|
||||
];
|
||||
var results = [
|
||||
"48px", "48px", "12px", "12px", "12px", "360px", "80px", "12px", "20px", "12px",
|
||||
"6px", "48px", "30px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-columns:min-content"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < coltest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid col");
|
||||
grid.setAttribute("style","grid-template-columns:minmax("+results[i]+",0)");
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-24x2.png");
|
||||
img.setAttribute("style",coltest[i] + "; min-width:"+ results[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Testing track 'min-content' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<link rel="match" href="grid-min-content-min-sizing-transferred-size-001-ref.html">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.col { grid-template-columns:min-content; grid-auto-rows:10px; }
|
||||
.col img { min-height:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var coltest = [
|
||||
"height:30px; max-width:48px", "height:30px; width:48px", "height:30px; width:12px",
|
||||
"width:12px", "max-width:12px", "height:30px", "height:4px; width:80px", "height:1px",
|
||||
"height:1px; width:20px", "max-height:1px", "max-height:1px; max-width:6px",
|
||||
"min-height:4px", "min-height:4px; max-width: 30px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-columns:min-content"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < coltest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid col");
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-24x2.png");
|
||||
img.setAttribute("style",coltest[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Testing track 'min-content' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
.col { grid-template-columns:minmax(auto,0); grid-auto-rows:10px; }
|
||||
.col img { min-height:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var coltest = [
|
||||
"height:30px; max-width:200%", "height:30px; width:200%", "height:30px; width:50%",
|
||||
"width:50%", "max-width:50%", "height:30px", "height:200%; width:80px", "height:50%",
|
||||
"height:50%; width:20px", "max-height:50%", "max-height:50%; max-width:6px",
|
||||
"min-height:40%", "min-height:40%; max-width:30px"
|
||||
];
|
||||
var results = [
|
||||
"0", "0", "0", "0", "0", "360px", "80px", "24px", "20px", "24px",
|
||||
"6px", "24px", "24px"
|
||||
];
|
||||
var item_width = [
|
||||
"0px", "0px", "0px", "0px", "0px", "360px", "80px", "60px", "20px", "24px",
|
||||
"6px", "48px", "30px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-columns:min-content"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < coltest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid col");
|
||||
grid.setAttribute("style","grid-template-columns:minmax("+results[i]+",0)");
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-24x2.png");
|
||||
img.setAttribute("style",coltest[i] + "; width:"+ item_width[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Testing track 'min-content' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<link rel="match" href="grid-min-content-min-sizing-transferred-size-002-ref.html">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.col { grid-template-columns:min-content; grid-auto-rows:10px; }
|
||||
.col img { min-height:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<script>
|
||||
var coltest = [
|
||||
"height:30px; max-width:200%", "height:30px; width:200%", "height:30px; width:50%",
|
||||
"width:50%", "max-width:50%", "height:30px", "height:200%; width:80px", "height:50%",
|
||||
"height:50%; width:20px", "max-height:50%", "max-height:50%; max-width:6px",
|
||||
"min-height:40%", "min-height:40%; max-width:30px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-columns:min-content"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < coltest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid col");
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-24x2.png");
|
||||
img.setAttribute("style",coltest[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Testing track 'min-content' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
.row { }
|
||||
.row img { min-width:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var coltest = [
|
||||
"12px", "12px", "4px", "1px", "2px", "1px", "1px", "1px", "1px", "3px", "5px"
|
||||
];
|
||||
var rowtest = [
|
||||
"width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px",
|
||||
"height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px",
|
||||
"width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px"
|
||||
];
|
||||
var results = [
|
||||
"48px", "48px", "12px", "12px", "24px", "12px", "12px", "12px", "20px", "36px", "30px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-rows:min-content"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < rowtest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid row");
|
||||
grid.setAttribute("style","grid:minmax("+results[i]+",0) / " + coltest[i]);
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-2x24.png");
|
||||
img.setAttribute("style",rowtest[i] + "; min-height:"+ results[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Testing track 'min-content' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<link rel="match" href="grid-min-content-min-sizing-transferred-size-003-ref.html">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.row { grid-template-rows:min-content; }
|
||||
.row img { min-width:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var rowtest = [
|
||||
"width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px",
|
||||
"height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px",
|
||||
"width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-rows:min-content"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < rowtest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid row");
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-2x24.png");
|
||||
img.setAttribute("style",rowtest[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Testing track 'min-content' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
body { overflow:hidden; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
.row { }
|
||||
.row img { min-width:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var rowtest = [
|
||||
"width:50%; max-height:200%", "width:50%; height:200%", "width:4px; height:50%",
|
||||
"height:50%", "max-height:200%", "max-height:50%", "max-width:50%", "width:50%; height:20px",
|
||||
"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
|
||||
];
|
||||
var results = [
|
||||
"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "24px/2px", "20px/2px", "20px/2px", "24px/2px", "24px/52px"
|
||||
];
|
||||
var item_height = [
|
||||
"0", "0", "0", "0", "0", "0", "12px", "20px", "20px", "24px", "312px"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-rows:min-content"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < rowtest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid row");
|
||||
grid.setAttribute("style","grid:" + results[i]);
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-2x24.png");
|
||||
img.setAttribute("style",rowtest[i] + "; max-height:auto; height:"+ item_height[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: Testing track 'min-content' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<link rel="match" href="grid-min-content-min-sizing-transferred-size-004-ref.html">
|
||||
<style type="text/css">
|
||||
html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
|
||||
body { overflow:hidden; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.row { grid-template-rows:min-content; }
|
||||
.row img { min-width:0; }
|
||||
|
||||
br { clear:both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var rowtest = [
|
||||
"width:50%; max-height:200%", "width:50%; height:200%", "width:4px; height:50%",
|
||||
"height:50%", "max-height:200%", "max-height:50%", "max-width:50%", "width:50%; height:20px",
|
||||
"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
|
||||
];
|
||||
|
||||
var h3 = document.createElement('h3');
|
||||
h3.appendChild(document.createTextNode("grid-template-rows:min-content"));
|
||||
document.body.appendChild(h3);
|
||||
for (var i = 0; i < rowtest.length; ++i) {
|
||||
var grid = document.createElement('div');
|
||||
grid.setAttribute("class","grid row");
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute("src","support/lime-2x24.png");
|
||||
img.setAttribute("style",rowtest[i]);
|
||||
grid.appendChild(img);
|
||||
document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n'));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
document.body.appendChild(grid);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -56,6 +56,18 @@ fuzzy-if(winWidget,1,36) == grid-auto-min-sizing-definite-001.html grid-auto-min
|
|||
== grid-auto-min-sizing-intrinsic-002.html grid-auto-min-sizing-intrinsic-002-ref.html
|
||||
== grid-auto-min-sizing-intrinsic-003.html grid-auto-min-sizing-intrinsic-003-ref.html
|
||||
== grid-auto-min-sizing-intrinsic-004.html grid-auto-min-sizing-intrinsic-004-ref.html
|
||||
== grid-auto-min-sizing-transferred-size-001.html grid-auto-min-sizing-transferred-size-001-ref.html
|
||||
== grid-auto-min-sizing-transferred-size-002.html grid-auto-min-sizing-transferred-size-002-ref.html
|
||||
== grid-auto-min-sizing-transferred-size-003.html grid-auto-min-sizing-transferred-size-003-ref.html
|
||||
== grid-auto-min-sizing-transferred-size-004.html grid-auto-min-sizing-transferred-size-004-ref.html
|
||||
== grid-auto-min-sizing-min-content-min-size-001.html grid-auto-min-sizing-min-content-min-size-001-ref.html
|
||||
== grid-auto-min-sizing-min-content-min-size-002.html grid-auto-min-sizing-min-content-min-size-002-ref.html
|
||||
== grid-auto-min-sizing-min-content-min-size-003.html grid-auto-min-sizing-min-content-min-size-003-ref.html
|
||||
== grid-auto-min-sizing-min-content-min-size-004.html grid-auto-min-sizing-min-content-min-size-004-ref.html
|
||||
== grid-min-content-min-sizing-transferred-size-001.html grid-min-content-min-sizing-transferred-size-001-ref.html
|
||||
== grid-min-content-min-sizing-transferred-size-002.html grid-min-content-min-sizing-transferred-size-002-ref.html
|
||||
== grid-min-content-min-sizing-transferred-size-003.html grid-min-content-min-sizing-transferred-size-003-ref.html
|
||||
== grid-min-content-min-sizing-transferred-size-004.html grid-min-content-min-sizing-transferred-size-004-ref.html
|
||||
skip-if(Android) == grid-auto-min-sizing-percent-001.html grid-auto-min-sizing-percent-001-ref.html # bug 1305716
|
||||
== 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
|
||||
|
|
@ -80,6 +92,9 @@ skip-if(Android) == grid-auto-min-sizing-percent-001.html grid-auto-min-sizing-p
|
|||
== grid-item-justify-001.html grid-item-justify-001-ref.html
|
||||
== grid-item-justify-002.html grid-item-justify-002-ref.html
|
||||
== grid-item-stretch-001.html grid-item-stretch-001-ref.html
|
||||
== grid-item-intrinsic-ratio-stretch-001.html grid-item-intrinsic-ratio-stretch-001-ref.html
|
||||
== grid-item-intrinsic-ratio-stretch-002.html grid-item-intrinsic-ratio-stretch-002-ref.html
|
||||
== grid-item-intrinsic-ratio-stretch-003.html grid-item-intrinsic-ratio-stretch-003-ref.html
|
||||
== grid-item-self-baseline-001.html grid-item-self-baseline-001-ref.html
|
||||
random-if(http.oscpu!="Linux\u0020i686") == grid-item-content-baseline-001.html grid-item-content-baseline-001-ref.html # depends on exact Ahem baseline font metrics which seems to differ between platforms: bug 1310792
|
||||
random-if(http.oscpu!="Linux\u0020i686") == grid-item-content-baseline-002.html grid-item-content-baseline-002-ref.html # ditto
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 96 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 98 B |
Загрузка…
Ссылка в новой задаче