<!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>