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

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