71 lines
2.6 KiB
HTML
71 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link href="resources/grid.css" rel="stylesheet">
|
|
<script src="../../resources/check-layout.js"></script>
|
|
<style>
|
|
.grid {
|
|
grid-template-columns: min-content 1fr;
|
|
grid-template-rows: min-content;
|
|
width: 500px;
|
|
font: 10px/1 Ahem;
|
|
}
|
|
</style>
|
|
<script>
|
|
function shrinkToFitTest()
|
|
{
|
|
checkLayout('.grid');
|
|
reduceContainerWidthAndCheckLayout();
|
|
checkLayout('.grid');
|
|
restoreContainerWidthAndCheckLayout();
|
|
checkLayout('.grid');
|
|
};
|
|
|
|
function reduceContainerWidthAndCheckLayout()
|
|
{
|
|
var grid = document.getElementById("grid")
|
|
grid.style.width = "250px";
|
|
grid.setAttribute("data-expected-width", "250");
|
|
grid.setAttribute("data-expected-height", "300");
|
|
|
|
var cell1 = document.getElementById("cell1")
|
|
cell1.setAttribute("data-expected-width", "80");
|
|
cell1.setAttribute("data-expected-height", "300");
|
|
|
|
var cell2 = document.getElementById("cell2")
|
|
cell2.setAttribute("data-expected-width", "170");
|
|
cell2.setAttribute("data-expected-height", "300");
|
|
};
|
|
|
|
function restoreContainerWidthAndCheckLayout()
|
|
{
|
|
var grid = document.getElementById("grid")
|
|
grid.style.width = "500px";
|
|
grid.setAttribute("data-expected-width", "500");
|
|
grid.setAttribute("data-expected-height", "110");
|
|
|
|
var cell1 = document.getElementById("cell1")
|
|
cell1.setAttribute("data-expected-width", "80");
|
|
cell1.setAttribute("data-expected-height", "110");
|
|
|
|
var cell2 = document.getElementById("cell2")
|
|
cell2.setAttribute("data-expected-width", "420");
|
|
cell2.setAttribute("data-expected-height", "110");
|
|
};
|
|
</script>
|
|
<body onload="shrinkToFitTest();">
|
|
|
|
<p>This test checks that a min-content sized row track grows when the container width is reduced and that it shrinks to fit its content when container is resized to its initial dimensions.</p>
|
|
|
|
<div id="grid" class="grid" data-expected-width="500" data-expected-height="110">
|
|
<div id="cell1" class="firstRowFirstColumn" data-expected-width="80" data-expected-height="110">
|
|
#cell1 (min-content)
|
|
</div>
|
|
<div id="cell2" class="firstRowSecondColumn" data-expected-width="420" data-expected-height="110">
|
|
<span>
|
|
#cell2 (1fr) xxx. xx xxx xxxxx xxx xxx ,x. xxxxx xx xx xxx. xxx xx xxxxx xxx xxxxx, . xx xx xxxxxxxxx. xxx xxxxxxxx xxx xx xx, . xxx x xxxxx x x. xxx xxxx xxxxxxx xxxxx,x. x x x xx xxxxxx. xxxxxx xx x xxx xx x,x. xxxxxxxx xx xxx. xxxx x xx x xxx xx xx,x. xxx x xxxxx xxx. xxxxxx xxx x xxx xx xx, . x xx xxxxx xxx. xxx xx x xxxxxxx x xxx, . xx xxxxx xxxx x. xxx xx xxxxx xxx xxxxx,x. x xxx xxxxx xxx. xxx xx xx xxxxxx xx xx, . x xx xxxx x x x. xxx xx xx xxxxxx xx xx, .</span>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|