LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .grid {
   7     -webkit-grid-template-columns: 20% 50% 30%;
   8     -webkit-grid-template-rows: 40%;
   9 }
  10
  11 .fixedSize {
  12     width: 400px;
  13     height: 400px;
  14 }
  15
  16 .calculatedSize {
  17     width: calc(200px + 20%);
  18     height: calc(300px + 10%);
  19 }
  20
  21 .percentageSize {
  22     width: 50%;
  23     height: 50%;
  24 }
  25
  26 .absolutelyPositioned {
  27     position: absolute;
  28 }
  29
  30 .indefiniteSize {
  31     width: -webkit-fit-content;
  32     height: auto;
  33 }
  34
  35 .firstRowFirstColumn {
  36     color: blue;
  37     background-color: cyan;
  38 }
  39
  40 .firstRowSecondColumn {
  41     color: green;
  42     background-color: lime;
  43 }
  44
  45 .firstRowThirdColumn {
  46     color: brown;
  47     background-color: yellow;
  48     -webkit-grid-column: 3;
  49     -webkit-grid-row: 1;
  50 }
  51 </style>
  52 <script src="../../resources/check-layout.js"></script>
  53 </head>
  54 <body onload="checkLayout('.grid');">
  55     <p>This test checks percentage track breadths are resolved properly regarding the container size.</p>
  56     <div class="unconstrainedContainer">
  57         <div class="grid">
  58             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="200" data-expected-height="10">XX</div>
  59             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="500" data-expected-height="10">XXXXX</div>
  60             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="300" data-expected-height="10">XXX</div>
  61         </div>
  62     </div>
  63
  64     <div class="indefiniteSize">
  65         <div class="grid">
  66             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
  67             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
  68             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
  69         </div>
  70     </div>
  71
  72     <div class="unconstrainedContainer">
  73         <div class="grid fixedSize">
  74             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
  75             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
  76             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
  77         </div>
  78     </div>
  79
  80     <div class="indefiniteSize">
  81         <div class="grid fixedSize">
  82             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
  83             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
  84             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
  85         </div>
  86     </div>
  87
  88     <div class="indefiniteSize">
  89         <div class="grid calculatedSize">
  90             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
  91             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
  92             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
  93         </div>
  94     </div>
  95
  96     <div class="unconstrainedContainer">
  97         <div class="grid calculatedSize">
  98             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
  99             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
 100             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
 101         </div>
 102     </div>
 103
 104     <div class="indefiniteSize">
 105         <div class="grid percentageSize">
 106             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
 107             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
 108             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
 109         </div>
 110     </div>
 111
 112     <div class="unconstrainedContainer">
 113         <div class="grid percentageSize">
 114             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="100" data-expected-height="200">XX</div>
 115             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="250" data-expected-height="200">XXXXX</div>
 116             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="150" data-expected-height="200">XXX</div>
 117         </div>
 118     </div>
 119
 120     <div class="indefiniteSize">
 121         <div class="grid absolutelyPositioned">
 122             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XX</div>
 123             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XXXXX</div>
 124             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XXX</div>
 125         </div>
 126     </div>
 127
 128     <div class="unconstrainedContainer">
 129         <div class="grid absolutelyPositioned">
 130             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XX</div>
 131             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XXXXX</div>
 132             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XXX</div>
 133         </div>
 134     </div>
 135
 136     <div class="indefiniteSize">
 137         <div class="grid indefiniteSize">
 138             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
 139             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
 140             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
 141         </div>
 142     </div>
 143
 144     <div class="unconstrainedContainer">
 145         <div class="grid indefiniteSize">
 146             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
 147             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
 148             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
 149         </div>
 150     </div>
 151
 152 </body>
 153 </html>