third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-with-percent-min-max-height-dynamic.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .grid {
   6     grid-template-columns: 50px 100px;
   7     grid-template-rows: 70px 140px;
   8 }
   9
  10 #minHeightPercent {
  11     height: 10px;
  12     min-height: 50%;
  13 }
  14
  15 #maxHeightPercent {
  16     height: 100px;
  17     max-height: 50%;
  18 }
  19 </style>
  20 <script src="../../resources/check-layout.js"></script>
  21 <script>
  22 function testLayout(gridElementID, gridTracks, size)
  23 {
  24     var gridElement = document.getElementById(gridElementID);
  25     gridElement.style.gridTemplateRows = gridTracks.rows;
  26     var gridItem = gridElement.firstChild.nextSibling;
  27     gridItem.setAttribute("data-expected-width", size.width);
  28     gridItem.setAttribute("data-expected-height", size.height);
  29     checkLayout("#" + gridElementID, document.getElementById("test-output"))
  30 }
  31
  32 function runTests()
  33 {
  34     testLayout("gridWithMinHeightItem", { "rows": "70px 140px" }, { "width": "50", "height": "35" });
  35     testLayout("gridWithMinHeightItem", { "rows": "100px 140px" }, { "width": "50", "height": "50" });
  36     testLayout("gridWithMinHeightItem", { "rows": "100px 240px" }, { "width": "50", "height": "50" });
  37     testLayout("gridWithMinHeightItem", { "rows": "10px 240px" }, { "width": "50", "height": "10" });
  38
  39     testLayout("gridWithMaxHeightItem", { "rows": "70px 140px" }, { "width": "50", "height": "35" });
  40     testLayout("gridWithMaxHeightItem", { "rows": "100px 140px" }, { "width": "50", "height": "50" });
  41     testLayout("gridWithMaxHeightItem", { "rows": "100px 240px" }, { "width": "50", "height": "50" });
  42     testLayout("gridWithMaxHeightItem", { "rows": "1000px 240px" }, { "width": "50", "height": "100" });
  43 }
  44
  45 window.addEventListener("load", runTests, false);
  46 </script>
  47 <body>
  48
  49 <p>Test that grid items with a percentage logical min-height or max-height resolve their size properly.</p>
  50
  51 <div id="gridWithMinHeightItem" class="grid">
  52     <div id="minHeightPercent"></div>
  53 </div>
  54
  55 <div id="gridWithMaxHeightItem" class="grid">
  56     <div id="maxHeightPercent"></div>
  57 </div>
  58
  59 <div id="test-output"></div>
  60
  61 </body>
  62 </html>