src/third_party/WebKit/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.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: 70% 30%;
  11     grid-template-rows: 40% 60%;
  12     width: 400px;
  13     height: 300px;
  14 }
  15
  16 .firstRowFirstColumn {
  17     width: 100%;
  18     height: 15px;
  19 }
  20
  21 .firstRowSecondColumn {
  22     width: 15px;
  23     height: 100%;
  24 }
  25
  26 .secondRowFirstColumn {
  27     width: 50%;
  28     height: 50%;
  29 }
  30
  31 .secondRowSecondColumn {
  32     width: -webkit-calc(100%);
  33     height: -webkit-calc(100%);
  34 }
  35 </style>
  36 <script src="../../resources/check-layout.js"></script>
  37 <script>
  38 function changeGridDefinitionsAndCheckValues()
  39 {
  40     var grid0 = document.getElementsByClassName("grid")[0];
  41     var grid1 = document.getElementsByClassName("grid")[1];
  42     var grid2 = document.getElementsByClassName("grid")[2];
  43     document.body.offsetLeft;
  44     grid0.style.gridTemplateColumns = "40% 60%";
  45
  46     grid1.style.gridTemplateRows = "30% 70%";
  47
  48     grid2.style.gridTemplateColumns = "40% 60%";
  49     grid2.style.gridTemplateRows = "30% 70%";
  50
  51     checkLayout('.grid');
  52 }
  53 window.addEventListener("load", changeGridDefinitionsAndCheckValues, false);
  54 </script>
  55 <body>
  56
  57 <p>Test that changing percentage sized grid tracks make the grid items relayouts.</p>
  58
  59 <div style="position: relative">
  60 <div class="grid" data-expected-width="400" data-expected-height="300">
  61     <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
  62     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="120"></div>
  63     <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="90"></div>
  64     <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="180"></div>
  65 </div>
  66 </div>
  67
  68 <div style="position: relative">
  69 <div class="grid" data-expected-width="400" data-expected-height="300">
  70     <div class="firstRowFirstColumn" data-expected-width="280" data-expected-height="15"></div>
  71     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
  72     <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="105"></div>
  73     <div class="secondRowSecondColumn" data-expected-width="120" data-expected-height="210"></div>
  74 </div>
  75 </div>
  76
  77 <div style="position: relative">
  78 <div class="grid" data-expected-width="400" data-expected-height="300">
  79     <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
  80     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
  81     <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
  82     <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
  83 </div>
  84 </div>
  85
  86 </body>
  87 </html>