<!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>
Codebase Browser
chromium