third_party/WebKit/LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <script src="../../resources/check-layout.js"></script>
   6 <style>
   7  .grid {
   8     grid-template-columns: min-content 1fr;
   9     grid-template-rows: min-content;
  10     width: 500px;
  11     font: 10px/1 Ahem;
  12  }
  13 </style>
  14 <script>
  15 function shrinkToFitTest()
  16 {
  17    checkLayout('.grid');
  18    reduceContainerWidthAndCheckLayout();
  19    checkLayout('.grid');
  20    restoreContainerWidthAndCheckLayout();
  21    checkLayout('.grid');
  22 };
  23
  24 function reduceContainerWidthAndCheckLayout()
  25 {
  26    var grid = document.getElementById("grid")
  27    grid.style.width = "250px";
  28    grid.setAttribute("data-expected-width", "250");
  29    grid.setAttribute("data-expected-height", "300");
  30
  31    var cell1 = document.getElementById("cell1")
  32    cell1.setAttribute("data-expected-width", "80");
  33    cell1.setAttribute("data-expected-height", "300");
  34
  35    var cell2 = document.getElementById("cell2")
  36    cell2.setAttribute("data-expected-width", "170");
  37    cell2.setAttribute("data-expected-height", "300");
  38 };
  39
  40 function restoreContainerWidthAndCheckLayout()
  41 {
  42    var grid = document.getElementById("grid")
  43    grid.style.width = "500px";
  44    grid.setAttribute("data-expected-width", "500");
  45    grid.setAttribute("data-expected-height", "110");
  46
  47    var cell1 = document.getElementById("cell1")
  48    cell1.setAttribute("data-expected-width", "80");
  49    cell1.setAttribute("data-expected-height", "110");
  50
  51    var cell2 = document.getElementById("cell2")
  52    cell2.setAttribute("data-expected-width", "420");
  53    cell2.setAttribute("data-expected-height", "110");
  54 };
  55 </script>
  56 <body onload="shrinkToFitTest();">
  57
  58 <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>
  59
  60 <div id="grid" class="grid" data-expected-width="500" data-expected-height="110">
  61     <div id="cell1" class="firstRowFirstColumn" data-expected-width="80" data-expected-height="110">
  62         #cell1 (min-content)
  63     </div>
  64     <div id="cell2" class="firstRowSecondColumn" data-expected-width="420" data-expected-height="110">
  65         <span>
  66             #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>
  67     </div>
  68 </div>
  69 </body>
  70 </html>