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