third_party/WebKit/LayoutTests/fast/css-grid-layout/calc-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 .calcWidth {
  13     width: -webkit-calc(80% + 20%);
  14     height: 15px;
  15 }
  16
  17 .calcHeight {
  18     width: 15px;
  19     height: -webkit-calc(80% + 20px);
  20 }
  21
  22 .calcHeightAndWidth {
  23     width: -webkit-calc(80% + 20px);
  24     height: -webkit-calc(70% + 30%);
  25 }
  26 </style>
  27 <script src="../../resources/check-layout.js"></script>
  28 <body onload="checkLayout('.grid')">
  29
  30 <p>Test that resolving calc lengths on grid items works properly on a fixed grid with different writing modes.</p>
  31
  32 <div class="grid">
  33     <div class="firstRowFirstColumn calcWidth" data-expected-width="100" data-expected-height="15"></div>
  34     <div class="firstRowSecondColumn calcHeight" data-expected-width="15" data-expected-height="60"></div>
  35     <div class="secondRowFirstColumn calcHeightAndWidth" data-expected-width="100" data-expected-height="150"></div>
  36     <div class="secondRowSecondColumn calcHeightAndWidth" data-expected-width="260" data-expected-height="150"></div>
  37 </div>
  38
  39 <div class="grid verticalRL">
  40     <div class="firstRowFirstColumn calcWidth" data-expected-width="50" data-expected-height="15"></div>
  41     <div class="firstRowSecondColumn calcHeight" data-expected-width="15" data-expected-height="260"></div>
  42     <div class="secondRowFirstColumn calcHeightAndWidth" data-expected-width="140" data-expected-height="100"></div>
  43     <div class="secondRowSecondColumn calcHeightAndWidth" data-expected-width="140" data-expected-height="300"></div>
  44 </div>
  45
  46 <div class="grid">
  47     <div class="firstRowFirstColumn calcWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
  48     <div class="firstRowSecondColumn calcHeight verticalRL" data-expected-width="15" data-expected-height="60"></div>
  49     <div class="secondRowFirstColumn calcHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
  50     <div class="secondRowSecondColumn calcHeightAndWidth verticalRL" data-expected-width="260" data-expected-height="150"></div>
  51 </div>
  52
  53 <div class="grid">
  54     <div class="firstRowFirstColumn calcWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
  55     <div class="firstRowSecondColumn calcHeight" data-expected-width="15" data-expected-height="60"></div>
  56     <div class="secondRowFirstColumn calcHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
  57     <div class="secondRowSecondColumn calcHeightAndWidth" data-expected-width="260" data-expected-height="150"></div>
  58 </div>
  59 </body>
  60 </html>