mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-10 03:45:46 +00:00
Bug 1300369 part 13 - [css-grid] Reftests for margin-box min-size clamping.
This commit is contained in:
Mats Palmgren
parent
bb4421d329
commit
5d99ef9a6b
@ -31,7 +31,7 @@ span {
|
||||
|
||||
<div class="grid">
|
||||
<span>a</span>
|
||||
<span style="width:-moz-min-content">IAmReallyWideAndTheBorderShouldSurroundMe</span>
|
||||
<span style="width:28px">IAmReallyWideAndTheBorderShouldSurroundMe</span>
|
||||
</div>
|
||||
|
||||
<pre>The border shouldn't shrink-wrap the wide text below, due to definite "width" values:</pre>
|
||||
@ -48,7 +48,7 @@ span {
|
||||
|
||||
<div class="grid" style="margin-bottom:50px;">
|
||||
<span>a</span>
|
||||
<span style="font-size:72px;width:-moz-min-content">IAmReallyTall</span>
|
||||
<span style="font-size:72px;width:28px;height:28px">IAmReallyTall</span>
|
||||
<span>c</span>
|
||||
<span>d</span>
|
||||
</div>
|
||||
@ -56,10 +56,10 @@ span {
|
||||
The border shouldn't shrink-wrap the wide text below, due to definite "height" values:
|
||||
<div class="grid">
|
||||
<span>a</span>
|
||||
<span style="font-size:72px; height:10%;width:-moz-min-content">IAmReallyTall</span>
|
||||
<span style="font-size:72px; height:10%;width:28px">IAmReallyTall</span>
|
||||
<span>c</span>
|
||||
<span style="font-size:72px; height:10px;width:-moz-min-content">SameHere</span>
|
||||
<span style="font-size:72px; height:40px;width:-moz-min-content">SameHere</span>
|
||||
<span style="font-size:72px; height:10px;width:28px">SameHere</span>
|
||||
<span style="font-size:72px; height:40px;width:28px">SameHere</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
@ -40,7 +40,7 @@ pre {
|
||||
|
||||
<div class="grid" style="margin-left:0">
|
||||
<span>a</span>
|
||||
<span style="height:-moz-min-content">IAmReallyWideAndTheBorderShouldSurroundMe</span>
|
||||
<span style="height:28px">IAmReallyWideAndTheBorderShouldSurroundMe</span>
|
||||
</div>
|
||||
|
||||
<pre>The border shouldn't shrink-wrap the wide text below, due to definite "height" values:</pre>
|
||||
@ -57,7 +57,7 @@ pre {
|
||||
|
||||
<div class="grid" style="margin-bottom:50px;">
|
||||
<span>a</span>
|
||||
<span style="font-size:72px;height:-moz-min-content">IAmReallyTall</span>
|
||||
<span style="font-size:72px;height:28px;width:28px">IAmReallyTall</span>
|
||||
<span>c</span>
|
||||
<span>d</span>
|
||||
</div>
|
||||
@ -65,10 +65,10 @@ pre {
|
||||
<pre>The border shouldn't shrink-wrap the wide text below, due to definite "width" values:</pre>
|
||||
<div class="grid">
|
||||
<span>a</span>
|
||||
<span style="font-size:72px; width:10%;height:-moz-min-content">IAmReallyTall</span>
|
||||
<span style="font-size:72px; width:10%;height:28px">IAmReallyTall</span>
|
||||
<span>c</span>
|
||||
<span style="font-size:72px; width:10px;height:-moz-min-content">SameHere</span>
|
||||
<span style="font-size:72px; width:40px;height:-moz-min-content">SameHere</span>
|
||||
<span style="font-size:72px; width:10px;height:28px">SameHere</span>
|
||||
<span style="font-size:72px; width:40px;height:28px">SameHere</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
@ -52,6 +52,11 @@ span.i { font-size:12px; grid-column:2; }
|
||||
border: 1px solid;
|
||||
margin: 1px;
|
||||
}
|
||||
/* don't clamp grid item automatic minimum size */
|
||||
* {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
.slb { align-self:last-baseline; align-content:self-end; }
|
||||
|
||||
</style>
|
||||
@ -60,20 +65,20 @@ span.i { font-size:12px; grid-column:2; }
|
||||
|
||||
A<div class="ib">
|
||||
<div class="ib" style="height:120px; width:56px;"><span
|
||||
class="a f" style="width:1em; padding-bottom:5px;">A<br>B</span>
|
||||
class="a f" style="width:30px; padding-bottom:5px;">A<br>B</span>
|
||||
</div><span class="i a f" style="width:54px">C<br>D</span>
|
||||
</div></div>
|
||||
|
||||
<div class="ib" style="width:180px;">
|
||||
<div class="ib" style="height:120px; width:56px;"><span
|
||||
class="a f" style="width:1em; padding-top:5px; margin-top:7px">A<br>B</span>
|
||||
class="a f" style="width:30px; padding-top:5px; margin-top:7px">A<br>B</span>
|
||||
</div><span class="i a f" style="width:54px">C<br>D</span><span
|
||||
class="a f" style="width:54px; padding-top:20px">E<br>F</span>
|
||||
</div>
|
||||
|
||||
<div class="ib" style="width:180px;">
|
||||
<div class="ib" style="height:120px; width:56px;"><span
|
||||
class="a" style="width:1em; margin-top:7px; padding-top:5px; padding-bottom:18px;">A<br>B</span>
|
||||
class="a f" style="width:30px; margin-top:7px; padding-top:5px; padding-bottom:18px;">A<br>B</span>
|
||||
</div><span class="i a f" style="width:54px">C<br>D</span><span
|
||||
class="a f" style="width:54px; padding-top:20px">E<br>F</span>
|
||||
</div>
|
||||
@ -81,23 +86,23 @@ A<div class="ib">
|
||||
|
||||
<div class="ib" style="width:200px;">
|
||||
<div class="ib" style="height:120px; width:76px; white-space:nowrap"><span
|
||||
class="a" style="width:32px; margin-top:7px; padding-top:5px; padding-bottom:18px;">A<br>B</span><span
|
||||
class="a" style="float:right; width:36px; margin-right:-2px; padding-bottom:22px; margin-top:-100px">A<br>B</span>
|
||||
class="a f" style="width:30px; margin-top:7px; padding-top:5px; padding-bottom:18px;">A<br>B</span><span
|
||||
class="a f" style="float:right; width:30px; position:relative; left:-4px; padding-bottom:22px; margin-top:-100px">A<br>B</span>
|
||||
</div><span class="i a f" style="width:54px">C<br>D</span><span
|
||||
class="a f" style="width:54px; padding-top:20px;">E<br>F</span>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<x style="position:relative; top:-33px">A</x><div class="ib" style="width:200px">
|
||||
<x style="position:relative; top:-64px">A</x><div class="ib" style="width:200px;margin-top:32px">
|
||||
<div class="ib vl" style="height:70px; width:196px;">
|
||||
<span class="a" style="display:block; padding-block-end:15px; height:-moz-min-content">A<br>B</span>
|
||||
<span class="a" style="display:block; padding-block-end:15px; height:1px">A<br>B</span>
|
||||
</div>
|
||||
</div><div class="ib" style="width:200px">
|
||||
<div class="ib vl" style="height:70px; width:196px;">
|
||||
<span class="a" style="display:block; padding-block-end:15px; width:148px; height:-moz-min-content">A<br>B</span>
|
||||
<span class="a" style="display:block; padding-block-end:15px; width:148px; height:1px">A<br>B</span>
|
||||
</div>
|
||||
</div><div class="ib" style="width:200px">
|
||||
</div><div class="ib" style="width:200px;position:relative; top:-31px">
|
||||
<div class="ib vl" style="height:70px; width:196px;">
|
||||
<span class="a" style="display:block; height:-moz-min-content; padding-block-end:15px; width:148px; height:-moz-min-content">A<br>B</span>
|
||||
</div>
|
||||
|
||||
@ -26,6 +26,12 @@ html,body {
|
||||
grid: repeat(3,50px) 13px / 60px 60px;
|
||||
}
|
||||
|
||||
/* don't clamp grid item automatic minimum size */
|
||||
.igrid *, .grid * {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.a {
|
||||
border: 3px solid black;
|
||||
background:lime;
|
||||
|
||||
@ -36,7 +36,7 @@ br { page-break-after:always; break-after:always; display:block; height:1px; }
|
||||
<span class="t" style="align-self:stretch"><x style="height:auto"></x></span>
|
||||
</div>
|
||||
<div class="grid b" style="border-color:transparent; grid-auto-rows: 0;">
|
||||
<span class="b"><x style="height:0.04in"></x></span>
|
||||
<span class="b" style="min-height:0"><x style="height:0.04in"></x></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -46,7 +46,7 @@ br { page-break-after:always; break-after:always; display:block; height:1px; }
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid b" style="border-color:transparent; grid-auto-rows: 0;">
|
||||
<span class="b"><x style="height:0.04in"></x></span>
|
||||
<span class="b" style="min-height:0"><x style="height:0.04in"></x></span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
@ -0,0 +1,199 @@
|
||||
<!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: Clamp 'automatic minimum size' to definite max-sizing</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,minmax(auto, 15px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 10px));
|
||||
grid-gap: 1px;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
float: left;
|
||||
border: 1px dashed;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.sz {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.definite {
|
||||
grid-template-columns: repeat(2,15px);
|
||||
grid-template-rows: repeat(2,10px);
|
||||
}
|
||||
.min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 10px));
|
||||
}
|
||||
.max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 10px));
|
||||
}
|
||||
|
||||
.larger .grid {
|
||||
grid-template-columns: repeat(2,minmax(auto, 25px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 28px));
|
||||
}
|
||||
.larger .definite {
|
||||
grid-template-columns: repeat(2,25px);
|
||||
grid-template-rows: repeat(2,28px);
|
||||
}
|
||||
.larger .min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 28px));
|
||||
}
|
||||
.larger .max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 28px));
|
||||
}
|
||||
|
||||
.stretch .grid {
|
||||
align-items: stretch;
|
||||
justify-items: stretch;
|
||||
}
|
||||
|
||||
.a.grid {
|
||||
width: 54px;
|
||||
}
|
||||
.larger .a.grid {
|
||||
width: 64px;
|
||||
}
|
||||
.a2.grid {
|
||||
width: 38px;
|
||||
}
|
||||
.larger .a2.grid {
|
||||
width: 51px;
|
||||
}
|
||||
.grid.sz.max {
|
||||
width: 40px;
|
||||
}
|
||||
.larger .grid.max.a span {
|
||||
width:20px;
|
||||
}
|
||||
.larger .grid.max.a2 span {
|
||||
width:20px;
|
||||
}
|
||||
|
||||
span {
|
||||
grid-area: 1 / 1;
|
||||
font-size: 48px;
|
||||
background: grey;
|
||||
background-clip: content-box;
|
||||
border: 1px solid;
|
||||
padding: 1px 3px 5px 7px;
|
||||
margin: 3px 5px 7px 1px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.span2 {
|
||||
grid-area: 1 / 1 / span 2 / span 2;
|
||||
width: 13px;
|
||||
height: 3px;
|
||||
}
|
||||
.grid.max span {
|
||||
width:20px;
|
||||
}
|
||||
.larger .grid span {
|
||||
width: 7px;
|
||||
height: 10px;
|
||||
}
|
||||
.larger .grid .span2 {
|
||||
font-size: 32px;
|
||||
width: 20px;
|
||||
height: 32px;
|
||||
}
|
||||
.stretch.larger .grid .span2 {
|
||||
width: 33px;
|
||||
height: 39px;
|
||||
}
|
||||
.stretch.larger .grid.sz .span2 {
|
||||
width: 22px;
|
||||
height: 32px;
|
||||
}
|
||||
.stretch.larger .grid.definite .span2 {
|
||||
width: 33px;
|
||||
height: 39px;
|
||||
}
|
||||
|
||||
x {
|
||||
grid-area: 1 / 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
align-self: stretch;
|
||||
justify-self: stretch;
|
||||
background: cyan;
|
||||
}
|
||||
c {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
br {
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="tests">
|
||||
<div class="grid a"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid definite"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid a2"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid definite"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<div class="grid sz"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz definite"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid min"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid min"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid sz min"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<div class="grid a max"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid max"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid a2 sz max"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var tests = document.getElementById('tests');
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
154
layout/reftests/css-grid/grid-item-auto-min-size-clamp-001.html
Normal file
154
layout/reftests/css-grid/grid-item-auto-min-size-clamp-001.html
Normal file
@ -0,0 +1,154 @@
|
||||
<!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: Clamp 'automatic minimum size' to definite max-sizing</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<link rel="match" href="grid-item-auto-min-size-clamp-001-ref.html">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,minmax(auto, 15px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 10px));
|
||||
grid-gap: 1px;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
float: left;
|
||||
border: 1px dashed;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.sz {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.definite {
|
||||
grid-template-columns: repeat(2,15px);
|
||||
grid-template-rows: repeat(2,10px);
|
||||
}
|
||||
.min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 10px));
|
||||
}
|
||||
.max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 10px));
|
||||
}
|
||||
|
||||
.larger .grid {
|
||||
grid-template-columns: repeat(2,minmax(auto, 25px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 28px));
|
||||
}
|
||||
.larger .definite {
|
||||
grid-template-columns: repeat(2,25px);
|
||||
grid-template-rows: repeat(2,28px);
|
||||
}
|
||||
.larger .min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 28px));
|
||||
}
|
||||
.larger .max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 28px));
|
||||
}
|
||||
|
||||
.stretch .grid {
|
||||
align-items: stretch;
|
||||
justify-items: stretch;
|
||||
}
|
||||
|
||||
span {
|
||||
grid-area: 1 / 1;
|
||||
font-size: 48px;
|
||||
background: grey;
|
||||
background-clip: content-box;
|
||||
border: 1px solid;
|
||||
padding: 1px 3px 5px 7px;
|
||||
margin: 3px 5px 7px 1px;
|
||||
}
|
||||
.span2 {
|
||||
grid-area: 1 / 1 / span 2 / span 2;
|
||||
}
|
||||
.larger .grid .span2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
x {
|
||||
grid-area: 1 / 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
align-self: stretch;
|
||||
justify-self: stretch;
|
||||
background: cyan;
|
||||
}
|
||||
c {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
br {
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="tests">
|
||||
<div class="grid"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid definite"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid definite"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<div class="grid sz"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz definite"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid min"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid min"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid sz min"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<div class="grid max"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid max"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid sz max"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var tests = document.getElementById('tests');
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
@ -0,0 +1,184 @@
|
||||
<!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: Clamp 'automatic minimum size' to definite max-sizing for orthogonal item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,minmax(auto, 15px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 10px));
|
||||
grid-gap: 1px;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
float: left;
|
||||
border: 1px dashed;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.sz {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.definite {
|
||||
grid-template-columns: repeat(2,15px);
|
||||
grid-template-rows: repeat(2,10px);
|
||||
}
|
||||
.min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 10px));
|
||||
}
|
||||
.max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 10px));
|
||||
}
|
||||
|
||||
.larger .grid {
|
||||
grid-template-columns: repeat(2,minmax(auto, 25px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 28px));
|
||||
}
|
||||
.larger .definite {
|
||||
grid-template-columns: repeat(2,25px);
|
||||
grid-template-rows: repeat(2,28px);
|
||||
}
|
||||
.larger .min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 28px));
|
||||
}
|
||||
.larger .max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 28px));
|
||||
}
|
||||
|
||||
.stretch .grid {
|
||||
align-items: stretch;
|
||||
justify-items: stretch;
|
||||
}
|
||||
.grid.a.max {
|
||||
height:61px;
|
||||
}
|
||||
.larger .grid.a.max {
|
||||
height:79px;
|
||||
}
|
||||
|
||||
span {
|
||||
writing-mode: vertical-rl;
|
||||
grid-area: 1 / 1;
|
||||
font-size: 48px;
|
||||
background: grey;
|
||||
background-clip: content-box;
|
||||
border: 1px solid;
|
||||
padding: 1px 3px 5px 7px;
|
||||
margin: 3px 5px 7px 1px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.span2 {
|
||||
grid-area: 1 / 1 / span 2 / span 2;
|
||||
width: 13px;
|
||||
height: 3px;
|
||||
}
|
||||
.larger .grid span {
|
||||
width: 7px;
|
||||
height: 10px;
|
||||
}
|
||||
.larger .grid .span2 {
|
||||
font-size: 32px;
|
||||
width: 20px;
|
||||
height: 32px;
|
||||
}
|
||||
.stretch.larger .grid .span2 {
|
||||
width: 33px;
|
||||
height: 39px;
|
||||
}
|
||||
.stretch.larger .grid.sz .span2 {
|
||||
width: 22px;
|
||||
height: 32px;
|
||||
}
|
||||
.stretch.larger .grid.definite .span2 {
|
||||
width: 33px;
|
||||
height: 39px;
|
||||
}
|
||||
.grid.max span {
|
||||
height:32px;
|
||||
}
|
||||
|
||||
x {
|
||||
grid-area: 1 / 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
align-self: stretch;
|
||||
justify-self: stretch;
|
||||
background: cyan;
|
||||
}
|
||||
c {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
br {
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="tests">
|
||||
<div class="grid"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid definite"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid definite"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<div class="grid sz"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz definite"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid min"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid min"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid sz min"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<div class="grid a max"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid max"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid sz max"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var tests = document.getElementById('tests');
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
155
layout/reftests/css-grid/grid-item-auto-min-size-clamp-002.html
Normal file
155
layout/reftests/css-grid/grid-item-auto-min-size-clamp-002.html
Normal file
@ -0,0 +1,155 @@
|
||||
<!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: Clamp 'automatic minimum size' to definite max-sizing for orthogonal item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<link rel="match" href="grid-item-auto-min-size-clamp-002-ref.html">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,minmax(auto, 15px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 10px));
|
||||
grid-gap: 1px;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
float: left;
|
||||
border: 1px dashed;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.sz {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.definite {
|
||||
grid-template-columns: repeat(2,15px);
|
||||
grid-template-rows: repeat(2,10px);
|
||||
}
|
||||
.min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 10px));
|
||||
}
|
||||
.max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 10px));
|
||||
}
|
||||
|
||||
.larger .grid {
|
||||
grid-template-columns: repeat(2,minmax(auto, 25px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 28px));
|
||||
}
|
||||
.larger .definite {
|
||||
grid-template-columns: repeat(2,25px);
|
||||
grid-template-rows: repeat(2,28px);
|
||||
}
|
||||
.larger .min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 28px));
|
||||
}
|
||||
.larger .max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 28px));
|
||||
}
|
||||
|
||||
.stretch .grid {
|
||||
align-items: stretch;
|
||||
justify-items: stretch;
|
||||
}
|
||||
|
||||
span {
|
||||
writing-mode: vertical-rl;
|
||||
grid-area: 1 / 1;
|
||||
font-size: 48px;
|
||||
background: grey;
|
||||
background-clip: content-box;
|
||||
border: 1px solid;
|
||||
padding: 1px 3px 5px 7px;
|
||||
margin: 3px 5px 7px 1px;
|
||||
}
|
||||
.span2 {
|
||||
grid-area: 1 / 1 / span 2 / span 2;
|
||||
}
|
||||
.larger .grid .span2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
x {
|
||||
grid-area: 1 / 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
align-self: stretch;
|
||||
justify-self: stretch;
|
||||
background: cyan;
|
||||
}
|
||||
c {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
br {
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="tests">
|
||||
<div class="grid"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid definite"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid definite"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<div class="grid sz"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz definite"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid min"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid min"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid sz min"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<div class="grid max"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid max"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid sz max"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var tests = document.getElementById('tests');
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
@ -0,0 +1,183 @@
|
||||
<!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: Clamp 'automatic minimum size' to definite max-sizing for intrinsic ratio item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,minmax(auto, 15px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 10px));
|
||||
grid-gap: 1px;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
float: left;
|
||||
border: 1px dashed;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.sz {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.definite {
|
||||
grid-template-columns: repeat(2,15px);
|
||||
grid-template-rows: repeat(2,10px);
|
||||
}
|
||||
.min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 10px));
|
||||
}
|
||||
.max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 10px));
|
||||
}
|
||||
|
||||
.larger .grid {
|
||||
grid-template-columns: repeat(2,minmax(auto, 25px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 28px));
|
||||
}
|
||||
.larger .definite {
|
||||
grid-template-columns: repeat(2,25px);
|
||||
grid-template-rows: repeat(2,28px);
|
||||
}
|
||||
.larger .min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 28px));
|
||||
}
|
||||
.larger .max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 28px));
|
||||
}
|
||||
|
||||
.stretch .grid {
|
||||
align-items: stretch;
|
||||
justify-items: stretch;
|
||||
}
|
||||
.grid.a {
|
||||
width:54px;
|
||||
}
|
||||
.grid.a2 {
|
||||
width:38px;
|
||||
}
|
||||
.larger .grid.a {
|
||||
width:64px;
|
||||
}
|
||||
.larger .grid.a2 {
|
||||
width:51px;
|
||||
}
|
||||
img {
|
||||
grid-area: 1 / 1;
|
||||
border: 1px solid;
|
||||
padding: 1px 3px 5px 7px;
|
||||
margin: 3px 5px 7px 1px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.span2 {
|
||||
grid-area: 1 / 1 / span 2 / span 2;
|
||||
}
|
||||
.grid .span2 {
|
||||
width: calc((56/30) * 1px);
|
||||
height: 3px;
|
||||
}
|
||||
.larger .grid img {
|
||||
width: 6.25px;
|
||||
height: 10px;
|
||||
}
|
||||
.larger .grid .span2 {
|
||||
font-size: 32px;
|
||||
width: 20px;
|
||||
height: 32px;
|
||||
}
|
||||
.stretch.larger .grid .span2 {
|
||||
width: 24px;
|
||||
height: 39px;
|
||||
}
|
||||
.stretch.larger .grid.sz .span2 {
|
||||
width: 20px;
|
||||
height: 32px;
|
||||
}
|
||||
.stretch.larger .grid.definite .span2 {
|
||||
width: 24px;
|
||||
height: 39px;
|
||||
}
|
||||
.grid.max img {
|
||||
width: 20px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
x {
|
||||
grid-area: 1 / 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
align-self: stretch;
|
||||
justify-self: stretch;
|
||||
background: cyan;
|
||||
}
|
||||
|
||||
br {
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="tests">
|
||||
<div class="grid a"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid a2"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<div class="grid x1 max"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid x1 sz max"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<br>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var tests = document.getElementById('tests');
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
146
layout/reftests/css-grid/grid-item-auto-min-size-clamp-003.html
Normal file
146
layout/reftests/css-grid/grid-item-auto-min-size-clamp-003.html
Normal file
@ -0,0 +1,146 @@
|
||||
<!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: Clamp 'automatic minimum size' to definite max-sizing for intrinsic ratio item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<link rel="match" href="grid-item-auto-min-size-clamp-003-ref.html">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,minmax(auto, 15px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 10px));
|
||||
grid-gap: 1px;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
float: left;
|
||||
border: 1px dashed;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.sz {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.definite {
|
||||
grid-template-columns: repeat(2,15px);
|
||||
grid-template-rows: repeat(2,10px);
|
||||
}
|
||||
.min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 10px));
|
||||
}
|
||||
.max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 10px));
|
||||
}
|
||||
|
||||
.larger .grid {
|
||||
grid-template-columns: repeat(2,minmax(auto, 25px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 28px));
|
||||
}
|
||||
.larger .definite {
|
||||
grid-template-columns: repeat(2,25px);
|
||||
grid-template-rows: repeat(2,28px);
|
||||
}
|
||||
.larger .min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 28px));
|
||||
}
|
||||
.larger .max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 28px));
|
||||
}
|
||||
|
||||
.stretch .grid {
|
||||
align-items: stretch;
|
||||
justify-items: stretch;
|
||||
}
|
||||
|
||||
img {
|
||||
grid-area: 1 / 1;
|
||||
border: 1px solid;
|
||||
padding: 1px 3px 5px 7px;
|
||||
margin: 3px 5px 7px 1px;
|
||||
}
|
||||
.span2 {
|
||||
grid-area: 1 / 1 / span 2 / span 2;
|
||||
}
|
||||
.larger .grid .span2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
x {
|
||||
grid-area: 1 / 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
align-self: stretch;
|
||||
justify-self: stretch;
|
||||
background: cyan;
|
||||
}
|
||||
|
||||
br {
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="tests">
|
||||
<div class="grid"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<br>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var tests = document.getElementById('tests');
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
@ -0,0 +1,204 @@
|
||||
<!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: Clamp 'automatic minimum size' to definite max-sizing for orthogonal intrinsic ratio item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,minmax(auto, 15px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 10px));
|
||||
grid-gap: 1px;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
float: left;
|
||||
border: 1px dashed;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.sz {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.definite {
|
||||
grid-template-columns: repeat(2,15px);
|
||||
grid-template-rows: repeat(2,10px);
|
||||
}
|
||||
.min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 10px));
|
||||
}
|
||||
.max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 10px));
|
||||
}
|
||||
|
||||
.larger .grid {
|
||||
grid-template-columns: repeat(2,minmax(auto, 25px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 28px));
|
||||
}
|
||||
.larger .definite {
|
||||
grid-template-columns: repeat(2,25px);
|
||||
grid-template-rows: repeat(2,28px);
|
||||
}
|
||||
.larger .min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 28px));
|
||||
}
|
||||
.larger .max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 28px));
|
||||
}
|
||||
|
||||
.stretch .grid {
|
||||
align-items: stretch;
|
||||
justify-items: stretch;
|
||||
}
|
||||
.grid.a {
|
||||
width:54px;
|
||||
}
|
||||
.grid.a2 {
|
||||
width:38px;
|
||||
}
|
||||
.larger .grid.a {
|
||||
width:64px;
|
||||
}
|
||||
.larger .grid.a2 {
|
||||
width:51px;
|
||||
}
|
||||
.grid.x1 {
|
||||
grid-template-columns:38px 15px;
|
||||
}
|
||||
.larger .grid.x1 {
|
||||
grid-template-columns:38px 25px;
|
||||
}
|
||||
.grid.x2, .grid.x3 {
|
||||
grid-template-columns:18.5px 18.5px;
|
||||
}
|
||||
.larger .grid.x2 {
|
||||
grid-template-columns:25px 25px;
|
||||
}
|
||||
.larger .grid.x3 {
|
||||
grid-template-columns:19.5px 19.5px;
|
||||
}
|
||||
|
||||
img {
|
||||
writing-mode: vertical-rl;
|
||||
grid-area: 1 / 1;
|
||||
border: 1px solid;
|
||||
padding: 1px 3px 5px 7px;
|
||||
margin: 3px 5px 7px 1px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.span2 {
|
||||
grid-area: 1 / 1 / span 2 / span 2;
|
||||
}
|
||||
.grid .span2 {
|
||||
width: calc((56/30) * 1px);
|
||||
height: 3px;
|
||||
}
|
||||
.larger .grid img {
|
||||
width: 6.25px;
|
||||
height: 10px;
|
||||
}
|
||||
.larger .grid .span2 {
|
||||
font-size: 32px;
|
||||
width: 20px;
|
||||
height: 32px;
|
||||
}
|
||||
.stretch.larger .grid .span2 {
|
||||
width: 24px;
|
||||
height: 39px;
|
||||
}
|
||||
.larger .grid.sz .span2 {
|
||||
width: 13.75px;
|
||||
height: 22px;
|
||||
}
|
||||
.larger .grid.sz.definite .span2 {
|
||||
width: 20px;
|
||||
height: 32px;
|
||||
}
|
||||
.stretch.larger .grid.definite .span2 {
|
||||
width: 24px;
|
||||
height: 39px;
|
||||
}
|
||||
.grid.max img {
|
||||
width: 12.5px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
x {
|
||||
grid-area: 1 / 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
align-self: stretch;
|
||||
justify-self: stretch;
|
||||
background: cyan;
|
||||
}
|
||||
|
||||
br {
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="tests">
|
||||
<div class="grid a"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid a2"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<div class="grid x1 max"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid x2 max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid x1 sz max"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid x3 sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<br>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var tests = document.getElementById('tests');
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
147
layout/reftests/css-grid/grid-item-auto-min-size-clamp-004.html
Normal file
147
layout/reftests/css-grid/grid-item-auto-min-size-clamp-004.html
Normal file
@ -0,0 +1,147 @@
|
||||
<!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: Clamp 'automatic minimum size' to definite max-sizing for orthogonal intrinsic ratio item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<link rel="match" href="grid-item-auto-min-size-clamp-004-ref.html">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,minmax(auto, 15px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 10px));
|
||||
grid-gap: 1px;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
float: left;
|
||||
border: 1px dashed;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.sz {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.definite {
|
||||
grid-template-columns: repeat(2,15px);
|
||||
grid-template-rows: repeat(2,10px);
|
||||
}
|
||||
.min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 10px));
|
||||
}
|
||||
.max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 10px));
|
||||
}
|
||||
|
||||
.larger .grid {
|
||||
grid-template-columns: repeat(2,minmax(auto, 25px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 28px));
|
||||
}
|
||||
.larger .definite {
|
||||
grid-template-columns: repeat(2,25px);
|
||||
grid-template-rows: repeat(2,28px);
|
||||
}
|
||||
.larger .min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 28px));
|
||||
}
|
||||
.larger .max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 28px));
|
||||
}
|
||||
|
||||
.stretch .grid {
|
||||
align-items: stretch;
|
||||
justify-items: stretch;
|
||||
}
|
||||
|
||||
img {
|
||||
writing-mode: vertical-rl;
|
||||
grid-area: 1 / 1;
|
||||
border: 1px solid;
|
||||
padding: 1px 3px 5px 7px;
|
||||
margin: 3px 5px 7px 1px;
|
||||
}
|
||||
.span2 {
|
||||
grid-area: 1 / 1 / span 2 / span 2;
|
||||
}
|
||||
.larger .grid .span2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
x {
|
||||
grid-area: 1 / 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
align-self: stretch;
|
||||
justify-self: stretch;
|
||||
background: cyan;
|
||||
}
|
||||
|
||||
br {
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="tests">
|
||||
<div class="grid"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<br>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var tests = document.getElementById('tests');
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
@ -0,0 +1,174 @@
|
||||
<!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: Clamp 'automatic minimum size' to definite max-sizing of block item with margin:auto</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,minmax(auto, 15px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 10px));
|
||||
grid-gap: 1px;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
float: left;
|
||||
border: 1px dashed;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.sz {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.definite {
|
||||
grid-template-columns: repeat(2,15px);
|
||||
grid-template-rows: repeat(2,10px);
|
||||
}
|
||||
.min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 10px));
|
||||
}
|
||||
.max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 10px));
|
||||
}
|
||||
|
||||
.larger .grid {
|
||||
grid-template-columns: repeat(2,minmax(auto, 25px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 28px));
|
||||
}
|
||||
.larger .definite {
|
||||
grid-template-columns: repeat(2,25px);
|
||||
grid-template-rows: repeat(2,28px);
|
||||
}
|
||||
.larger .min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 28px));
|
||||
}
|
||||
.larger .max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 28px));
|
||||
}
|
||||
|
||||
.stretch .grid {
|
||||
align-items: stretch;
|
||||
justify-items: stretch;
|
||||
}
|
||||
|
||||
span {
|
||||
grid-area: 1 / 1;
|
||||
font-size: 48px;
|
||||
background: grey;
|
||||
background-clip: content-box;
|
||||
border: 1px solid;
|
||||
padding: 1px 3px 5px 7px;
|
||||
margin: 0;
|
||||
}
|
||||
.span2 {
|
||||
grid-area: 1 / 1 / span 2 / span 2;
|
||||
}
|
||||
.larger .grid .span2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.larger .grid span {
|
||||
align-self:center;
|
||||
justify-self:center;
|
||||
}
|
||||
.larger .grid .span2 {
|
||||
font-size: 32px;
|
||||
width: 20px;
|
||||
height: 32px;
|
||||
}
|
||||
.stretch.larger .grid .span2 {
|
||||
align-self:center;
|
||||
justify-self:center;
|
||||
}
|
||||
.stretch.larger .grid.sz .span2 {
|
||||
align-self:center;
|
||||
justify-self:center;
|
||||
}
|
||||
.stretch.larger .grid.definite .span2 {
|
||||
align-self:center;
|
||||
justify-self:center;
|
||||
}
|
||||
|
||||
x {
|
||||
grid-area: 1 / 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
align-self: stretch;
|
||||
justify-self: stretch;
|
||||
background: cyan;
|
||||
}
|
||||
c {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
br {
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="tests">
|
||||
<div class="grid"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid definite"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid definite"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<div class="grid sz"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz definite"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid min"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid min"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid sz min"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<div class="grid max"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid max"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid sz max"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var tests = document.getElementById('tests');
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
154
layout/reftests/css-grid/grid-item-auto-min-size-clamp-005.html
Normal file
154
layout/reftests/css-grid/grid-item-auto-min-size-clamp-005.html
Normal file
@ -0,0 +1,154 @@
|
||||
<!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: Clamp 'automatic minimum size' to definite max-sizing of block item with margin:auto</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<link rel="match" href="grid-item-auto-min-size-clamp-005-ref.html">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,minmax(auto, 15px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 10px));
|
||||
grid-gap: 1px;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
float: left;
|
||||
border: 1px dashed;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.sz {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.definite {
|
||||
grid-template-columns: repeat(2,15px);
|
||||
grid-template-rows: repeat(2,10px);
|
||||
}
|
||||
.min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 10px));
|
||||
}
|
||||
.max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 10px));
|
||||
}
|
||||
|
||||
.larger .grid {
|
||||
grid-template-columns: repeat(2,minmax(auto, 25px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 28px));
|
||||
}
|
||||
.larger .definite {
|
||||
grid-template-columns: repeat(2,25px);
|
||||
grid-template-rows: repeat(2,28px);
|
||||
}
|
||||
.larger .min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 28px));
|
||||
}
|
||||
.larger .max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 28px));
|
||||
}
|
||||
|
||||
.stretch .grid {
|
||||
align-items: stretch;
|
||||
justify-items: stretch;
|
||||
}
|
||||
|
||||
span {
|
||||
grid-area: 1 / 1;
|
||||
font-size: 48px;
|
||||
background: grey;
|
||||
background-clip: content-box;
|
||||
border: 1px solid;
|
||||
padding: 1px 3px 5px 7px;
|
||||
margin: auto;
|
||||
}
|
||||
.span2 {
|
||||
grid-area: 1 / 1 / span 2 / span 2;
|
||||
}
|
||||
.larger .grid .span2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
x {
|
||||
grid-area: 1 / 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
align-self: stretch;
|
||||
justify-self: stretch;
|
||||
background: cyan;
|
||||
}
|
||||
c {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
br {
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="tests">
|
||||
<div class="grid"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid definite"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid definite"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<div class="grid sz"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz definite"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid min"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid min"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid sz min"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<div class="grid max"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid max"><x></x><span class="span2"><c>X</c></span></div>
|
||||
<div class="grid sz max"><x></x><span><c>X</c></span></div>
|
||||
<div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var tests = document.getElementById('tests');
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
@ -0,0 +1,150 @@
|
||||
<!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: Clamp 'automatic minimum size' to definite max-sizing for intrinsic ratio item with margin:auto</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,minmax(auto, 15px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 10px));
|
||||
grid-gap: 1px;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
float: left;
|
||||
border: 1px dashed;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.sz {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.definite {
|
||||
grid-template-columns: repeat(2,15px);
|
||||
grid-template-rows: repeat(2,10px);
|
||||
}
|
||||
.min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 10px));
|
||||
}
|
||||
.max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 10px));
|
||||
}
|
||||
|
||||
.larger .grid {
|
||||
grid-template-columns: repeat(2,minmax(auto, 25px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 28px));
|
||||
}
|
||||
.larger .definite {
|
||||
grid-template-columns: repeat(2,25px);
|
||||
grid-template-rows: repeat(2,28px);
|
||||
}
|
||||
.larger .min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 28px));
|
||||
}
|
||||
.larger .max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 28px));
|
||||
}
|
||||
|
||||
.stretch .grid {
|
||||
align-items: stretch;
|
||||
justify-items: stretch;
|
||||
}
|
||||
|
||||
img {
|
||||
grid-area: 1 / 1;
|
||||
border: 1px solid;
|
||||
padding: 1px 3px 5px 7px;
|
||||
margin: 0;
|
||||
align-self:center;
|
||||
justify-self:center;
|
||||
}
|
||||
.span2 {
|
||||
grid-area: 1 / 1 / span 2 / span 2;
|
||||
}
|
||||
.larger .grid .span2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
.larger .grid .span2 {
|
||||
width: 20px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
x {
|
||||
grid-area: 1 / 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
align-self: stretch;
|
||||
justify-self: stretch;
|
||||
background: cyan;
|
||||
}
|
||||
|
||||
br {
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="tests">
|
||||
<div class="grid"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<br>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var tests = document.getElementById('tests');
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
146
layout/reftests/css-grid/grid-item-auto-min-size-clamp-006.html
Normal file
146
layout/reftests/css-grid/grid-item-auto-min-size-clamp-006.html
Normal file
@ -0,0 +1,146 @@
|
||||
<!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: Clamp 'automatic minimum size' to definite max-sizing for intrinsic ratio item with margin:auto</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<link rel="match" href="grid-item-auto-min-size-clamp-006-ref.html">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,minmax(auto, 15px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 10px));
|
||||
grid-gap: 1px;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
float: left;
|
||||
border: 1px dashed;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.sz {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.definite {
|
||||
grid-template-columns: repeat(2,15px);
|
||||
grid-template-rows: repeat(2,10px);
|
||||
}
|
||||
.min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 10px));
|
||||
}
|
||||
.max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 15px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 10px));
|
||||
}
|
||||
|
||||
.larger .grid {
|
||||
grid-template-columns: repeat(2,minmax(auto, 25px));
|
||||
grid-template-rows: repeat(2,minmax(auto, 28px));
|
||||
}
|
||||
.larger .definite {
|
||||
grid-template-columns: repeat(2,25px);
|
||||
grid-template-rows: repeat(2,28px);
|
||||
}
|
||||
.larger .min {
|
||||
grid-template-columns: repeat(2,minmax(min-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(min-content, 28px));
|
||||
}
|
||||
.larger .max {
|
||||
grid-template-columns: repeat(2,minmax(max-content, 25px));
|
||||
grid-template-rows: repeat(2,minmax(max-content, 28px));
|
||||
}
|
||||
|
||||
.stretch .grid {
|
||||
align-items: stretch;
|
||||
justify-items: stretch;
|
||||
}
|
||||
|
||||
img {
|
||||
grid-area: 1 / 1;
|
||||
border: 1px solid;
|
||||
padding: 1px 3px 5px 7px;
|
||||
margin: auto;
|
||||
}
|
||||
.span2 {
|
||||
grid-area: 1 / 1 / span 2 / span 2;
|
||||
}
|
||||
.larger .grid .span2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
x {
|
||||
grid-area: 1 / 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
align-self: stretch;
|
||||
justify-self: stretch;
|
||||
background: cyan;
|
||||
}
|
||||
|
||||
br {
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="tests">
|
||||
<div class="grid"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div>
|
||||
<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
|
||||
|
||||
<br>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var tests = document.getElementById('tests');
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
var n = tests.cloneNode(true);
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'stretch larger';
|
||||
wrap.appendChild(n);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
@ -0,0 +1,156 @@
|
||||
<!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: Clamp 'automatic minimum size' to definite max-sizing for items with specified intrinsic 'width'/'height'</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
position: relative;
|
||||
grid-template-columns: repeat(2,20px);
|
||||
grid-template-rows: repeat(2,20px);
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
border: 1px dashed;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.c-auto { grid-template-columns: 15px; width: 15px; }
|
||||
.c-min { grid-template-columns: 15px; width: 15px; }
|
||||
.c-max { grid-template-columns: 15px; width: 15px; }
|
||||
.c-1530 { grid-template-columns: 15px; width: 30px; }
|
||||
.c-30 { grid-template-columns: 30px; width: 30px; }
|
||||
.r-auto { grid-template-rows: 15px; height: 15px; }
|
||||
.r-min { grid-template-rows: 15px; height: 15px; }
|
||||
.r-max { grid-template-rows: 15px; height: 15px; }
|
||||
span {
|
||||
grid-area: 1 / 1;
|
||||
font-size: 48px;
|
||||
background: grey;
|
||||
}
|
||||
y {
|
||||
position: absolute;
|
||||
grid-area: 2 / 1 / 3 / 2;
|
||||
top:0;left:0;right:0;
|
||||
height: 10px;
|
||||
background: lightgrey;
|
||||
}
|
||||
.r y {
|
||||
grid-area: 1 / 2 / 2 / 3;
|
||||
top:0;bottom:0;left:0;
|
||||
width: 10px;
|
||||
height: auto;
|
||||
}
|
||||
br { clear: both; }
|
||||
|
||||
x { display:block; width:30px; height:40px; }
|
||||
span { width:15px; }
|
||||
.r span { width:20px; }
|
||||
.grid.c-30 span, .r.grid.c-30 span { width:30px; }
|
||||
.r span { height:15px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid c-1530"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid c-auto"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid c-30"><y style="width:30px"></y><span><x>X</x></span></div>
|
||||
<div class="grid c-1530"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid c-1530"><y></y><span><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid c-min"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid c-min"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid c-30" style="width:30px"><y style="width:30px"></y><span><x>X</x></span></div>
|
||||
<div class="grid c-min"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid c-min"><y></y><span><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid c-30"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid c-max"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid c-30"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid c-30"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid c-30"><y></y><span><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid r r-min"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r r-min"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r r-min"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r r-min"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r r-min"><y></y><span><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid r r-max"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r r-max"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r r-max"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r r-max"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r r-max"><y></y><span><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid r c-min r-auto"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-min r-auto"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-min r-auto"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-min r-auto"><y></y><span><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid r c-min r-min"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-min r-min"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-min r-min"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-min r-min"><y></y><span><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid r c-min r-max"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-min r-max"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-min r-max"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-min r-max"><y></y><span><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-max r-auto"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-max r-min"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-max r-max"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div>
|
||||
|
||||
</body></html>
|
||||
194
layout/reftests/css-grid/grid-item-auto-min-size-clamp-007.html
Normal file
194
layout/reftests/css-grid/grid-item-auto-min-size-clamp-007.html
Normal file
@ -0,0 +1,194 @@
|
||||
<!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: Clamp 'automatic minimum size' to definite max-sizing for items with specified intrinsic 'width'/'height'</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<link rel="match" href="grid-item-auto-min-size-clamp-007-ref.html">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
position: relative;
|
||||
grid-template-columns: repeat(2,20px);
|
||||
grid-template-rows: repeat(2,20px);
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
border: 1px dashed;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.c-auto { grid-template-columns: minmax(auto, 15px); }
|
||||
.c-min { grid-template-columns: minmax(min-content, 15px); }
|
||||
.c-max { grid-template-columns: minmax(max-content, 15px); }
|
||||
.r-auto { grid-template-rows: minmax(auto, 15px); }
|
||||
.r-min { grid-template-rows: minmax(min-content, 15px); }
|
||||
.r-max { grid-template-rows: minmax(max-content, 15px); }
|
||||
span {
|
||||
grid-area: 1 / 1;
|
||||
font-size: 48px;
|
||||
background: grey;
|
||||
}
|
||||
y {
|
||||
position: absolute;
|
||||
grid-area: 2 / 1 / 3 / 2;
|
||||
top:0;left:0;right:0;
|
||||
height: 10px;
|
||||
background: lightgrey;
|
||||
}
|
||||
|
||||
.min-content {
|
||||
width: -moz-min-content;
|
||||
width: -webkit-min-content;
|
||||
width: min-content;
|
||||
}
|
||||
.max-content {
|
||||
width: -moz-max-content;
|
||||
width: -webkit-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
.fit-content {
|
||||
width: -moz-fit-content;
|
||||
width: -webkit-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
.fill {
|
||||
width: -moz-available;
|
||||
width: -webkit-fill;
|
||||
width: fill;
|
||||
}
|
||||
|
||||
.r .min-content {
|
||||
height: -moz-min-content;
|
||||
height: -webkit-min-content;
|
||||
height: min-content;
|
||||
}
|
||||
.r .max-content {
|
||||
height: -moz-max-content;
|
||||
height: -webkit-max-content;
|
||||
height: max-content;
|
||||
}
|
||||
.r .fit-content {
|
||||
height: -moz-fit-content;
|
||||
height: -webkit-fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
.r .fill {
|
||||
height: -moz-available;
|
||||
height: -webkit-fill;
|
||||
height: fill;
|
||||
}
|
||||
.r y {
|
||||
grid-area: 1 / 2 / 2 / 3;
|
||||
top:0;bottom:0;left:0;
|
||||
width: 10px;
|
||||
height: auto;
|
||||
}
|
||||
br { clear: both; }
|
||||
|
||||
x { display:block; width:30px; height:40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid c-auto"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid c-auto"><y></y><span class="min-content"><x>X</x></span></div>
|
||||
<div class="grid c-auto"><y></y><span class="max-content"><x>X</x></span></div>
|
||||
<div class="grid c-auto"><y></y><span class="fit-content"><x>X</x></span></div>
|
||||
<div class="grid c-auto"><y></y><span class="fill"><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid c-min"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid c-min"><y></y><span class="min-content"><x>X</x></span></div>
|
||||
<div class="grid c-min"><y></y><span class="max-content"><x>X</x></span></div>
|
||||
<div class="grid c-min"><y></y><span class="fit-content"><x>X</x></span></div>
|
||||
<div class="grid c-min"><y></y><span class="fill"><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid c-max"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid c-max"><y></y><span class="min-content"><x>X</x></span></div>
|
||||
<div class="grid c-max"><y></y><span class="max-content"><x>X</x></span></div>
|
||||
<div class="grid c-max"><y></y><span class="fit-content"><x>X</x></span></div>
|
||||
<div class="grid c-max"><y></y><span class="fill"><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid r r-auto"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r r-auto"><y></y><span class="min-content"><x>X</x></span></div>
|
||||
<div class="grid r r-auto"><y></y><span class="max-content"><x>X</x></span></div>
|
||||
<div class="grid r r-auto"><y></y><span class="fit-content"><x>X</x></span></div>
|
||||
<div class="grid r r-auto"><y></y><span class="fill"><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid r r-min"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r r-min"><y></y><span class="min-content"><x>X</x></span></div>
|
||||
<div class="grid r r-min"><y></y><span class="max-content"><x>X</x></span></div>
|
||||
<div class="grid r r-min"><y></y><span class="fit-content"><x>X</x></span></div>
|
||||
<div class="grid r r-min"><y></y><span class="fill"><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid r r-max"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r r-max"><y></y><span class="min-content"><x>X</x></span></div>
|
||||
<div class="grid r r-max"><y></y><span class="max-content"><x>X</x></span></div>
|
||||
<div class="grid r r-max"><y></y><span class="fit-content"><x>X</x></span></div>
|
||||
<div class="grid r r-max"><y></y><span class="fill"><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid r c-min r-auto"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-min r-auto"><y></y><span class="min-content"><x>X</x></span></div>
|
||||
<div class="grid r c-min r-auto"><y></y><span class="max-content"><x>X</x></span></div>
|
||||
<div class="grid r c-min r-auto"><y></y><span class="fit-content"><x>X</x></span></div>
|
||||
<div class="grid r c-min r-auto"><y></y><span class="fill"><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid r c-min r-min"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-min r-min"><y></y><span class="min-content"><x>X</x></span></div>
|
||||
<div class="grid r c-min r-min"><y></y><span class="max-content"><x>X</x></span></div>
|
||||
<div class="grid r c-min r-min"><y></y><span class="fit-content"><x>X</x></span></div>
|
||||
<div class="grid r c-min r-min"><y></y><span class="fill"><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid r c-min r-max"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-min r-max"><y></y><span class="min-content"><x>X</x></span></div>
|
||||
<div class="grid r c-min r-max"><y></y><span class="max-content"><x>X</x></span></div>
|
||||
<div class="grid r c-min r-max"><y></y><span class="fit-content"><x>X</x></span></div>
|
||||
<div class="grid r c-min r-max"><y></y><span class="fill"><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid r c-max r-auto"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-max r-auto"><y></y><span class="min-content"><x>X</x></span></div>
|
||||
<div class="grid r c-max r-auto"><y></y><span class="max-content"><x>X</x></span></div>
|
||||
<div class="grid r c-max r-auto"><y></y><span class="fit-content"><x>X</x></span></div>
|
||||
<div class="grid r c-max r-auto"><y></y><span class="fill"><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid r c-max r-min"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-max r-min"><y></y><span class="min-content"><x>X</x></span></div>
|
||||
<div class="grid r c-max r-min"><y></y><span class="max-content"><x>X</x></span></div>
|
||||
<div class="grid r c-max r-min"><y></y><span class="fit-content"><x>X</x></span></div>
|
||||
<div class="grid r c-max r-min"><y></y><span class="fill"><x>X</x></span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid r c-max r-max"><y></y><span><x>X</x></span></div>
|
||||
<div class="grid r c-max r-max"><y></y><span class="min-content"><x>X</x></span></div>
|
||||
<div class="grid r c-max r-max"><y></y><span class="max-content"><x>X</x></span></div>
|
||||
<div class="grid r c-max r-max"><y></y><span class="fit-content"><x>X</x></span></div>
|
||||
<div class="grid r c-max r-max"><y></y><span class="fill"><x>X</x></span></div>
|
||||
|
||||
</body></html>
|
||||
50
layout/reftests/css-grid/grid-item-canvas-001-ref.html
Normal file
50
layout/reftests/css-grid/grid-item-canvas-001-ref.html
Normal file
@ -0,0 +1,50 @@
|
||||
<!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 canvas item</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; }
|
||||
|
||||
.block {
|
||||
float: left;
|
||||
border:1px solid;
|
||||
line-height:0;
|
||||
}
|
||||
canvas:nth-child(1n) { background: blue; }
|
||||
canvas:nth-child(2n) { background: grey; }
|
||||
canvas:nth-child(3n) { background: tan; }
|
||||
canvas:nth-child(4n) { background: black; }
|
||||
.sz > canvas {
|
||||
width:20px; height:10px;
|
||||
}
|
||||
.sz.t2 > canvas {
|
||||
width:10px; height:20px;
|
||||
}
|
||||
canvas {
|
||||
vertical-align:top;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="block sz">
|
||||
<canvas></canvas><canvas style="margin-left:-5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:15px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:-5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:15px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas></div>
|
||||
|
||||
<div class="block sz t2">
|
||||
<canvas></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas></div>
|
||||
|
||||
<div class="block" style="height:150px; width:215px">
|
||||
<canvas style="width:10px;height:5px;"></canvas><canvas style="width:30px;height:15px;margin-left:5px"></canvas><canvas style="width:10px;height:5px;margin-left:5px"></canvas><canvas style="width:30px;height:15px;margin-left:5px"></canvas><canvas style="width:10px;height:5px;vertical-align:bottom;margin-top:145px;margin-left:5px"></canvas><canvas style="width:30px;height:15px;vertical-align:bottom;margin-top:135px;margin-left:5px"></canvas><canvas style="width:10px;height:5px;vertical-align:bottom;margin-top:145px;margin-left:5px"></canvas><canvas style="width:30px;height:15px;vertical-align:bottom;margin-top:135px;margin-left:5px"></canvas></div>
|
||||
|
||||
<div class="block" style="height:300px; width:600px"><canvas style="width:300px;height:150px"></canvas><canvas style="width:300px;height:150px"></canvas><canvas style="width:300px;height:150px"></canvas><canvas style="width:300px;height:150px"></canvas></div>
|
||||
|
||||
<div class="block" style="height:60px; width:600px">
|
||||
<canvas style="height:30px"></canvas><canvas style="height:30px;margin-left:480px"></canvas><canvas style="height:30px"></canvas><canvas style="height:30px;margin-left:480px"></canvas></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
96
layout/reftests/css-grid/grid-item-canvas-001.html
Normal file
96
layout/reftests/css-grid/grid-item-canvas-001.html
Normal file
@ -0,0 +1,96 @@
|
||||
<!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 canvas item</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-canvas-001-ref.html">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto;
|
||||
grid-gap: 5px;
|
||||
border:1px solid;
|
||||
}
|
||||
canvas:nth-child(1n) { background: blue; }
|
||||
canvas:nth-child(2n) { background: grey; }
|
||||
canvas:nth-child(3n) { background: tan; }
|
||||
canvas:nth-child(4n) { background: black; }
|
||||
.sz > canvas {
|
||||
width:20px; height:10px;
|
||||
}
|
||||
.sz.t2 > canvas {
|
||||
width:10px; height:20px;
|
||||
}
|
||||
|
||||
.jend { justify-self: end; }
|
||||
.aend { align-self: end; }
|
||||
.end { justify-self: end; align-self: end; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid sz">
|
||||
<canvas></canvas>
|
||||
<canvas></canvas>
|
||||
<canvas class="jend"></canvas>
|
||||
<canvas class="jend"></canvas>
|
||||
<canvas class="aend"></canvas>
|
||||
<canvas class="aend"></canvas>
|
||||
<canvas class="end"></canvas>
|
||||
<canvas class="end"></canvas>
|
||||
<canvas></canvas>
|
||||
<canvas class="jend"></canvas>
|
||||
<canvas class="aend"></canvas>
|
||||
<canvas class="end"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="grid sz t2">
|
||||
<canvas></canvas>
|
||||
<canvas></canvas>
|
||||
<canvas class="jend"></canvas>
|
||||
<canvas class="jend"></canvas>
|
||||
<canvas class="aend"></canvas>
|
||||
<canvas class="aend"></canvas>
|
||||
<canvas class="end"></canvas>
|
||||
<canvas class="end"></canvas>
|
||||
<canvas></canvas>
|
||||
<canvas class="jend"></canvas>
|
||||
<canvas class="aend"></canvas>
|
||||
<canvas class="end"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<canvas></canvas>
|
||||
<canvas></canvas>
|
||||
<canvas class="jend"></canvas>
|
||||
<canvas class="jend"></canvas>
|
||||
<canvas class="aend"></canvas>
|
||||
<canvas class="aend"></canvas>
|
||||
<canvas class="end"></canvas>
|
||||
<canvas class="end"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid:auto/auto auto">
|
||||
<canvas></canvas>
|
||||
<canvas class="jend"></canvas>
|
||||
<canvas class="aend"></canvas>
|
||||
<canvas class="end"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid:minmax(auto,30px) 30px/auto auto">
|
||||
<canvas></canvas>
|
||||
<canvas class="jend"></canvas>
|
||||
<canvas class="aend"></canvas>
|
||||
<canvas class="end"></canvas>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -4,8 +4,8 @@
|
||||
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>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: stretching intrinsic ratio item with min/max-size:0</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; }
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
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>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: stretching intrinsic ratio item with min/max-size:0</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">
|
||||
@ -16,6 +16,10 @@ body,html { color:black; background:white; font:16px/1 monospace; padding:0; mar
|
||||
border: 1px solid;
|
||||
margin: 5px;
|
||||
}
|
||||
.grid > * {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
.vertical-tests img { writing-mode: vertical-rl; }
|
||||
.vertical-tests div { vertical-align:bottom }
|
||||
</style>
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: stretching intrinsic ratio item with min/max-size</title>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: stretching intrinsic ratio item with definite 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; }
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
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>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: stretching intrinsic ratio item with definite 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">
|
||||
@ -17,6 +17,10 @@ body,html { color:black; background:white; font:16px/1 monospace; padding:0; mar
|
||||
border: 1px solid;
|
||||
margin: 5px;
|
||||
}
|
||||
.grid > * {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
.vertical-tests img { writing-mode: vertical-rl; }
|
||||
.vertical-tests div { vertical-align:bottom }
|
||||
</style>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<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">
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<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">
|
||||
|
||||
@ -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>Reference: stretching intrinsic ratio item with min/max-size:auto and automatic minimum size clamping</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<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:10px; height:1px">
|
||||
</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:10px; height:1px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start safe; width:10px; height:1px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:end unsafe; width:10px; height:1px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px; margin-left: 80px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:end safe; width:10px; height:1px">
|
||||
</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:10px; height:1px">
|
||||
</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:10px; height:1px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:start safe; width:10px; height:1px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px; margin-left: 40px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:end unsafe; width:10px; height:1px">
|
||||
</div>
|
||||
<div class="grid" style="grid: 4px / 10px; margin-left: 80px">
|
||||
<img src="support/lime-24x2.png" style="justify-self:end safe; width:10px; height:1px">
|
||||
</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:auto and automatic minimum size clamping</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-item-intrinsic-ratio-stretch-004-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:auto and automatic minimum size clamping</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
|
||||
<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:10px; height:1px">
|
||||
</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:10px; height:1px">
|
||||
</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:auto and automatic minimum size clamping</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-item-intrinsic-ratio-stretch-005-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>
|
||||
@ -14,7 +14,7 @@ html,body {
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-rows: 0 7px;
|
||||
grid-template-rows: 7px;
|
||||
border: 1px solid blue;
|
||||
background: black;
|
||||
}
|
||||
|
||||
@ -95,6 +95,16 @@ skip-if(Android) == grid-auto-min-sizing-percent-001.html grid-auto-min-sizing-p
|
||||
== 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-intrinsic-ratio-stretch-004.html grid-item-intrinsic-ratio-stretch-004-ref.html
|
||||
== grid-item-intrinsic-ratio-stretch-005.html grid-item-intrinsic-ratio-stretch-005-ref.html
|
||||
== grid-item-auto-min-size-clamp-001.html grid-item-auto-min-size-clamp-001-ref.html
|
||||
== grid-item-auto-min-size-clamp-002.html grid-item-auto-min-size-clamp-002-ref.html
|
||||
== grid-item-auto-min-size-clamp-003.html grid-item-auto-min-size-clamp-003-ref.html
|
||||
== grid-item-auto-min-size-clamp-004.html grid-item-auto-min-size-clamp-004-ref.html
|
||||
== grid-item-auto-min-size-clamp-005.html grid-item-auto-min-size-clamp-005-ref.html
|
||||
== grid-item-auto-min-size-clamp-006.html grid-item-auto-min-size-clamp-006-ref.html
|
||||
== grid-item-auto-min-size-clamp-007.html grid-item-auto-min-size-clamp-007-ref.html
|
||||
== grid-item-canvas-001.html grid-item-canvas-001-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
|
||||
|
||||
BIN
layout/reftests/css-grid/support/solidblue-20x32.png
Normal file
BIN
layout/reftests/css-grid/support/solidblue-20x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 B |
Loading…
Reference in New Issue
Block a user