third_party/WebKit/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html

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