third_party/WebKit/LayoutTests/fast/css-grid-layout/percent-resolution-grid-item.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .grid {
   6     grid-template-columns: 100px 300px;
   7     grid-template-rows: 50px 150px;
   8     height: 200px;
   9     width: 400px;
  10 }
  11
  12 .percentWidth {
  13     width: 100%;
  14     height: 15px;
  15 }
  16
  17 .percentHeight {
  18     width: 15px;
  19     height: 100%;
  20 }
  21
  22 .percentHeightAndWidth {
  23     width: 100%;
  24     height: 100%;
  25 }
  26 </style>
  27 <script src="../../resources/check-layout.js"></script>
  28 <body onload="checkLayout('.grid')">
  29
  30 <p>Test that resolving percent lengths on grid items works properly on a fixed grid with different writing modes.</p>
  31
  32 <div class="grid">
  33     <div class="firstRowFirstColumn percentWidth" data-expected-width="100" data-expected-height="15"></div>
  34     <div class="firstRowSecondColumn percentHeight" data-expected-width="15" data-expected-height="50"></div>
  35     <div class="secondRowFirstColumn percentHeightAndWidth" data-expected-width="100" data-expected-height="150"></div>
  36     <div class="secondRowSecondColumn percentHeightAndWidth" data-expected-width="300" data-expected-height="150"></div>
  37 </div>
  38
  39 <div class="grid verticalRL">
  40     <div class="firstRowFirstColumn percentWidth" data-expected-width="50" data-expected-height="15"></div>
  41     <div class="firstRowSecondColumn percentHeight" data-expected-width="15" data-expected-height="300"></div>
  42     <div class="secondRowFirstColumn percentHeightAndWidth" data-expected-width="150" data-expected-height="100"></div>
  43     <div class="secondRowSecondColumn percentHeightAndWidth" data-expected-width="150" data-expected-height="300"></div>
  44 </div>
  45
  46 <div class="grid">
  47     <div class="firstRowFirstColumn percentWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
  48     <div class="firstRowSecondColumn percentHeight verticalRL" data-expected-width="15" data-expected-height="50"></div>
  49     <div class="secondRowFirstColumn percentHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
  50     <div class="secondRowSecondColumn percentHeightAndWidth verticalRL" data-expected-width="300" data-expected-height="150"></div>
  51 </div>
  52
  53 <div class="grid">
  54     <div class="firstRowFirstColumn percentWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
  55     <div class="firstRowSecondColumn percentHeight" data-expected-width="15" data-expected-height="50"></div>
  56     <div class="secondRowFirstColumn percentHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
  57     <div class="secondRowSecondColumn percentHeightAndWidth" data-expected-width="300" data-expected-height="150"></div>
  58 </div>
  59 </body>
  60 </html>