src/third_party/WebKit/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track.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: 40% 60%;
  11     grid-template-rows: 30% 70%;
  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 <body onload="checkLayout('.grid')">
  38
  39 <p>Test that percentage sized grid items inside percentage sized grid tracks get properly sized.</p>
  40
  41 <div style="position: relative">
  42 <div class="grid" data-expected-width="400" data-expected-height="300">
  43     <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
  44     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
  45     <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
  46     <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
  47 </div>
  48 </div>
  49
  50 <div style="position: relative">
  51 <div class="grid" style="-webkit-writing-mode: horizontal-bt" data-expected-width="400" data-expected-height="300">
  52     <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
  53     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
  54     <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
  55     <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
  56 </div>
  57 </div>
  58
  59 <div style="position: relative">
  60 <div class="grid" style="-webkit-writing-mode: vertical-rl;" data-expected-width="400" data-expected-height="300">
  61     <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
  62     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
  63     <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
  64     <div class="secondRowSecondColumn" data-expected-width="280" data-expected-height="180"></div>
  65 </div>
  66 </div>
  67
  68 <div style="position: relative">
  69 <div class="grid" style="-webkit-writing-mode: vertical-lr;" data-expected-width="400" data-expected-height="300">
  70     <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
  71     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
  72     <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
  73     <div class="secondRowSecondColumn" data-expected-width="280" data-expected-height="180"></div>
  74 </div>
  75 </div>
  76
  77 </body>
  78 </html>