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