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