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

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .container {
   6     position: relative;
   7     width: 500px;
   8     height: 600px;
   9 }
  10
  11 .grid {
  12     grid-template-columns: 40% 60%;
  13     grid-template-rows: 30% 70%;
  14     width: 80%;
  15     height: 50%;
  16 }
  17
  18 .firstRowFirstColumn {
  19     width: 100%;
  20     height: 15px;
  21 }
  22
  23 .firstRowSecondColumn {
  24     width: 15px;
  25     height: 100%;
  26 }
  27
  28 .secondRowFirstColumn {
  29     width: 50%;
  30     height: 50%;
  31 }
  32
  33 .secondRowSecondColumn {
  34     width: -webkit-calc(100%);
  35     height: -webkit-calc(100%);
  36 }
  37 </style>
  38 <script src="../../resources/check-layout.js"></script>
  39 <body onload="checkLayout('.grid')">
  40
  41 <p>Test that percentage sized grid items inside percentage sized grid tracks inside a percentage size grid get properly sized.</p>
  42
  43 <div class="container">
  44 <div class="grid" data-expected-width="400" data-expected-height="300">
  45     <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
  46     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
  47     <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
  48     <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
  49 </div>
  50 </div>
  51
  52 <div class="container">
  53 <div class="grid" style="-webkit-writing-mode: horizontal-bt" data-expected-width="400" data-expected-height="300">
  54     <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
  55     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
  56     <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
  57     <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
  58 </div>
  59 </div>
  60
  61 <div class="container">
  62 <div class="grid" style="-webkit-writing-mode: vertical-rl;" data-expected-width="400" data-expected-height="300">
  63     <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
  64     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
  65     <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
  66     <div class="secondRowSecondColumn" data-expected-width="280" data-expected-height="180"></div>
  67 </div>
  68 </div>
  69
  70 <div class="container">
  71 <div class="grid" style="-webkit-writing-mode: vertical-lr;" data-expected-width="400" data-expected-height="300">
  72     <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
  73     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
  74     <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
  75     <div class="secondRowSecondColumn" data-expected-width="280" data-expected-height="180"></div>
  76 </div>
  77 </div>
  78
  79 </body>
  80 </html>